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

Question

我必须开发一款必须移动图像的游戏。如需引用，请观看以下 YouTube 链接中的视频:

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

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

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

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

请建议我可以在 JavaScript 中执行此功能的方法。

Answer 1

您是否使用 Animate CC 导出代码？ MotionGuidePlugin 旨在从 Animate 导出，但也可以手动使用。如果您使用 Animate，如何更改为位图？您只是使用代码执行此操作，还是交换到 Animate 内的位图实例？

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