从类型化数组构造 SVG 路径的最佳方法是什么?
这样的数组似乎是将数据从为 asm.js 编译的代码传输到其他 JavaScript 片段的最佳方式。
我想到了各种可能的方法。一种选择是在 asm.js 应用程序的源代码中构造 d
属性文本。但该字符串将包含大量数字,并且 sprintf
的 emscripten 实现过于笼统,无法在此处提供良好的性能。所以我怀疑这种方法是否有任何竞争机会。
因此,数据应该从生成的 asm.js 代码传递到手写的 JavaScript,而不是作为文本,而是作为数字。一种可能性是使用两个类型化数组(它们实际上是同一ArrayBuffer
的不同 View )。一个用于保存段类型,另一个用于保存关联的坐标。然后可以在手写代码中使用此数据来计算 d
属性的字符串,或使用 SVGPathSegList
构建分段列表。 来自 SVG DOM API。
我在这里尝试了这两种替代方案: http://jsperf.com/svg-path-from-typed-arrays .
这两种方法似乎都特别快。 (编辑:看来我把千位分隔符误认为是小数分隔符。如果这是正确的,那么我每秒有近一万次操作,而不是只有十个,那么这是完全可以接受的)
所以 仍然我想知道,是否有一些我错过的替代方案?
有没有办法让这种操作甚至更快?
欢迎edit如果您想尝试新的替代方案,请联系我的 jsperf。
最佳答案
这是我目前最好的解决方案。如果有人想出更聪明的办法,我一点也不介意。与每种线型关联的代码编号与 SVGPathSeg.pathSegType
中的代码编号相匹配。 。所以“关闭”是1
,“绝对移动”是2
等等。
var letters = [" ? ", " Z ", " M ", " m ", " L ", " l ",
" C ", " c ", " Q ", " q ", " A ", " a ",
" H ", " h ", " V ", " v ", " S ", " s ", " T ", " t "];
var numbers = [ 0 , 0 , 2 , 2 , 2 , 2 ,
6 , 6 , 4 , 4 , 7 , 7 ,
1 , 1 , 1 , 1 , 4 , 4 , 2 , 2 ];
function buildPathString(elt, types, coordinates) {
var i, t, c, nc, d = "", ci = 0;
for (i = 0; i != types.length; ++i) {
t = types[i];
nc = numbers[t];
c = coordinates.subarray(ci, ci + nc);
d += letters[t] + Array.prototype.join.call(c, " ");
ci += nc;
}
elt.setAttribute("d", d);
}
关于javascript - 从类型化数组更新 svg 路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16745222/