我正在学习使用 BonsaiJS，并想在舞台上导入外部 SVG 图像。
在http://docs.bonsaijs.org/overview/Path.html我了解到有三种方法可以创建new Path()发送 SVG 路径、路径命令或路径点作为参数，但对于更复杂的 SVG 文件，这太过分了做这项工作的麻烦。
在我如何使用 JS 库为我的 SVG 文件制作动画 - 盆景适合这个吗？我读过可以使用该new Bitmap()方法，但是 SVG 变成了……位图。
我错过了什么吗？提前致谢！
问问题
1084 次
2 回答
2
当时 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">
盆景JS
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 "/>
盆景JS
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);
于 2013-06-06T12:30:32.137 回答
1
在http://docs.bonsaijs.org/overview/Path.html我了解到有三种方法可以创建一个新的 Path() 发送 SVG 路径、路径命令或路径点作为参数，但对于更复杂的 SVG 文件，这是完成这项工作太麻烦了。
是的，Bonsai 允许您导入 SVG（类似）路径。
在我如何使用 JS 库为我的 SVG 文件制作动画 - 盆景适合这个吗？我读到可以使用新的 Bitmap() 方法，但是 SVG 变成了……位图。
Bonsai 通常不允许您导入 SVG。只有路径。这意味着 Bonsai 没有为您提供访问 SVG 文件内部节点的 API。
使用 Bitmap API 不是导入 SVG 的一种方式。SVG 文件被视为任何常规图像格式。它是否会被光栅化取决于平台和渲染器。它可以与使用 DOM 的 HTMLImageElement 进行比较。
于 2013-06-06T06:16:50.427 回答