想要使用 javascript 在 canvas 中的路径上移动图像

Question

我必须开发一款必须移动图像的游戏。如需参考，请观看以下 YouTube link:

上的视频

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

我的游戏与它不同，但必须使用与 Lumosity 的 Train of Thoughts 游戏相同的对象移动功能。为此，我在谷歌上搜索了很多关于使用 JavaScript 在 canvas 中的特定路径上移动图像的信息，但还没有找到任何完美的解决方案。我找到了 TweenJS，它可以帮助我在路径上移动对象。我从以下 link:

中引用了它

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

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

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

Answer 1

如果您没有使用任何本地服务器或内置服务器，您能否提供有关异常的更多详细信息，它会抛出错误。请在 xampp 等本地服务器或 webstrom/brackets

中的内置服务器上尝试

Answer 2

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

我在 Animate 中做了一个快速测试，使用位图效果很好。我在使用和不使用本地服务器的情况下对其进行了测试，那里没有问题（只要图像在同一台服务器上。

如果您使用的是纯代码，我怀疑它可能存在问题。你有机会在这里 post 吗？

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));

想要使用 javascript 在 canvas 中的路径上移动图像

Want to move an image on a path in canvas using javascript

javascript

html5-canvas

createjs