將 createjs.Graphics 中風轉換為 animation 路徑

Question

使用 createjs.Shape，我在兩點之間畫了一條線。 我想將筆畫轉換為 object 的 animation 路徑。 查看 GSAP animateToPath，顯然路徑需要是 an.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);

Answer 1

如果您只是想將 EaselJS 指令轉換為 SVG，請查看 SVGExporter class。

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

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

祝你好運！