路径节点

Question

我正在学习与BonsaiJS合作，并希望在舞台上导入外部SVG图像。

在http://docs.bonsaijs.org/overview/Path.html我了解到有三种方法可以创建new Path()发送SVG路径，路径命令或路径点作为参数，但对于更复杂的SVG文件，这太麻烦了做这项工作。

在How Can I Animate my SVG files with a JS Library - Is Bonsai Ideal for this?，我读过一个人可以使用new Bitmap()方法，但SVG会变成...位图。

我错过了什么吗？提前谢谢！

Answer 1

当时BonsaiJS似乎无法加载外部SVG，就像可以加载外部位图图像一样。 BonsaiJS文档（http://docs.bonsaijs.org/overview/Path.html）确实提供了三种方法来分别手动处理SVG文件中的路径。

路径节点

如果您的SVG包含<path>个节点（标记），请获取d属性的值并手动应用填充：

SVG

<path id="pathId" fill="#ff6600" d="M54.651,316.878c9.098,19.302,3.208,46.085,11.193,67.117 c0.687,2.48-4.441-0.06-2.581,5.486c9.171,20.188,10.61,52.755,17.331,79.04l-1.88-0.961c1.652,5.139,7.946,8.864,10.469,13.37">

BonsaiJS

var myShape1 = new Path("M54.651,316.878c9.098,19.302,3.208,46.085,11.193,67.117 c0.687,2.48-4.441-0.06-2.581,5.486c9.171,20.188,10.61,52.755,17.331,79.04l-1.88-0.961c1.652,5.139,7.946,8.864,10.469,13.37");
myShape1.fill('#ff6600');

多边形节点

如果您的SVG即。包含<polygon>个节点，获取points属性的字符串值，将此字符串拆分为数组并将所有字符串元素转换为浮点数。再次手动应用填充：

SVG

<polygon id="polygonId" fill="#FFFFFF" points="76.5,253.5 94.5,165.5 108.5,125.5 128.5,93.5 164.5,66.5 195.891,44.719 254.5,36.5 299.656,36.5 348.5,41.5 414,66 459,102 488,150.5 505.5,218.5 508,331.5 508,390 504.5,424.5 480,463.5 450,509.5 378,554.5 300,566 226,556.5 168,535.5 109.5,476 87,419.5 76.5,339.5 "/>

BonsaiJS

var points = "76.5,253.5 94.5,165.5 108.5,125.5 128.5,93.5 164.5,66.5 195.891,44.719 254.5,36.5 299.656,36.5 348.5,41.5 414,66 459,102 488,150.5 505.5,218.5 508,331.5 508,390 504.5,424.5 480,463.5 450,509.5 378,554.5 300,566 226,556.5 168,535.5 109.5,476 87,419.5 76.5,339.5";
points = points.split(/[\s,]+/).map(function(point) {
  return parseFloat(point);
});
var myShape2 = new Path(points).fill('#ffffff');

然后...

定义所有部件后，可以创建一个组并添加所有部件以“重建”原始SVG图像，即：

var myGroup = new Group().addTo(stage);
myShape1.addTo(myGroup);
myShape2.addTo(myGroup);

Answer 2

在http://docs.bonsaijs.org/overview/Path.html我了解到有三种方法可以创建一个新的Path（），将SVG路径，路径命令或路径点作为参数发送，但是对于更复杂的SVG文件，这太麻烦了。这项工作。

是的，Bonsai让你导入SVG（比如）Paths。

如何使用JS库动画我的SVG文件 - Bonsai是否适用于此？我读过一个可以使用新的Bitmap（）方法，但是SVG会变成...位图。

Bonsai一般不允许您导入SVG。只有路径。这意味着Bonsai不会为您提供访问SVG文件内部节点的API。

使用Bitmap API不是导入SVG的方法。 SVG文件被视为任何常规图像格式。这取决于平台和渲染器是否会被光栅化。它可以与使用DOM的HTMLImageElement进行比较。

BonsaiJS如何加载外部SVG文件？

2 个答案:

路径节点

SVG

BonsaiJS

多边形节点

SVG

BonsaiJS

然后...