【问题标题】:Want to move an image on a path in canvas using javascript想要使用 javascript 在画布中的路径上移动图像
【发布时间】:2023-04-03 02:55:02
【问题描述】:

我必须开发一个我必须移动图像的游戏。如需参考,请参阅以下 YouTube 链接中的视频:

https://www.youtube.com/watch?v=CQAMCuqMHpA

我的游戏与它不同,但必须使用与 Lumosity 的思路游戏相同的对象移动功能。 为此,我使用 JavaScript 在画布中的特定路径上移动图像进行了很多搜索,但还没有找到任何完美的解决方案。我找到了 TweenJS,它可以帮助我在路径上移动对象。我从以下链接引用它:

http://createjs.com/docs/tweenjs/classes/MotionGuidePlugin.html

通过使用 TweenJS,我可以移动圆形、矩形等形状,但无法在路径上移动图像。当我尝试通过将图像转换为位图然后使用 TweenJS 移动位图来执行此操作时,它显示异常。

请提出一些我可以在 JavaScript 中实现此功能的方法。

【问题讨论】:

标签: javascript html5-canvas createjs


【解决方案1】:

您是否使用 Animate CC 导出代码? MotionGuidePlugin 旨在从 Animate 中导出,尽管它可以手动使用。如果您使用的是 Animate,您如何更改为位图?你只是用代码来做,还是在 Animate 中切换到 Bitmap 实例?

我在 Animate 中做了一个快速测试,使用位图效果很好。我在有本地服务器和没有本地服务器的情况下都测试过,那里没有问题(只要图像在同一台服务器上。

如果您使用的是纯代码,我怀疑它可能存在问题。有机会在这里发吗?

Here is a quick sample using an image(从 Animate CC 导出)。

代码:

this.instance = new lib.chrisk();
this.instance.parent = this;
this.instance.setTransform(49,183.9,1,1,0,0,0,5.8,5.9);

this.timeline.addTween(cjs.Tween.get(this.instance).to({guide:{path:[49.2,183.8,44.7,191.3,41.3,202.7,37.2,216.5,37.2,228.8,37.2,247.3,40.1,254.9,43.4,263.8,54.5,270.9,62.4,275.9,89.3,288.6,126.6,306.1,153.2,319.8,153.3,325.2,155.4,327.6,157.5,330.2,163,331.1,167.6,331.9,178.3,331.9,184.8,331.9,203.2,331.8,203.5,331.8,227.2,330.6,252.3,329.1,259,327.8,264.4,326.7,269.5,324.5,275.3,322,279,318.8,281.2,315.8,280.3,308.1,279,301,279,300.8,279.6,287.9,279.6,284.8,279.6,280.7,277,277.8,274.4,274.8,271.8,270.9,269.1,267,267.9,265.7,263.6,260.7,251,255.8,229.2,247.2,209.9,244.7,203.4,243.8,196,243.6,188.8,243.4,185.9,243.3,177.4,242.8,174.9,238.5,172.2,233.8,172.2,217.3,172.2,207.4,174.8,195.4,177.8,181.3,183.2,169.8,197.4,140,222,140,233,140,242.3,150.4,254.8,164.7,259,194.8,260.6,207,271.4,218.3,281.4,228.7,297.8,237,313.4,244.9,331.8,249.3,350.3,253.8,367.5,253.8,396.5,253.8,417,243.8,440,232.6,440,213.8,440,206.9,437.3,198.1,434,187.7,428.1,178.8,412.1,155.6,384,153,343.4,149.3,322.1,144.6,306.5,141.2,298.7,137,291,132.7,291,127.5,291,122.3,294.9,112.9,299.2,102.3,306,93,324.2,68,347,68,351.1,68,381.9,69.5,412.6,71,420,71]}},59).wait(1));

【讨论】:

    【解决方案2】:

    如果您不使用任何本地服务器或内置服务器,您能否提供有关异常的更多详细信息,它将引发错误。请尝试一些本地服务器,例如 xampp 或 webstrom/brackets 中的内置服务器

    【讨论】:

    • 我正在使用本地 wamp 服务器。它显示异常“Uncaught TypeError: Cannot read property 'guide' of undefined”
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-09-29
    • 2020-09-09
    • 2013-11-18
    • 1970-01-01
    • 2014-01-06
    • 2018-11-30
    相关资源
    最近更新 更多