将 createjs.Graphics 笔画转换为动画路径答案

【问题标题】：Converting createjs.Graphics stroke to animation path将 createjs.Graphics 笔画转换为动画路径
【发布时间】：2022-01-15 20:31:41
【问题描述】：

使用 createjs.Shape，我在两点之间画了一条线。我想将笔画转换为对象的动画路径。查看 GSAP animateToPath，显然路径需要是 .svg。有没有办法使用代码将我的笔画转换为 svg？是否有任何库可以促进这种类型的补间路径？非常感谢。

var line = new createjs.Shape(new createjs.Graphics().setStrokeStyle(40).beginStroke("#012849").moveTo(this.cubes[14].x+50,this.cubes[14].y+50).lineTo(this.cubes[57].x+50,this.cubes[57].y+50).endStroke()); this.container.addChild(line);

【问题讨论】：

标签： javascript path createjs tween

【解决方案1】：

如果您只是想将 EaselJS 指令转换为 SVG，只需 SVGExporter 类即可。

https://github.com/CreateJS/EaselJS/tree/master/extras/SVGExporter

var exporter = new SVGExporter(stage, false, false, false);
exporter.run();
document.body.appendChild(exporter.svg);

祝你好运！

【讨论】：

太棒了。谢谢。