Question

从类型化数组构建SVG路径的最佳方法是什么？

此类数组似乎是将为asm.js编译的代码中的数据传输到其他JavaScript代码段的最佳方式。

我想到了各种可能的方法。一种选择是在asm.js应用程序的源代码中构造d属性文本。但是该字符串将包含大量数字，sprintf的emscripten实现过于笼统，无法在此处提供良好的性能。所以我怀疑这种方法有没有竞争的机会。

因此，数据应该从生成的asm.js代码传递到手写JavaScript而不是文本而是数字。一种可能性是使用两个类型的数组（实际上是同一个ArrayBuffer的不同视图）。一个用于保存段类型，另一个用于保存关联的坐标。然后，可以在手写代码中使用此数据来计算d属性的字符串，或使用 SVGPathSegList来构建细分列表来自SVG DOM API。

我在这里尝试了这两种选择： http://jsperf.com/svg-path-from-typed-arrays

~~这两种方法似乎都不是特别快。~~ （编辑：我似乎误认为thounsand的分隔符是小数点分隔符。如果这是正确的，我每秒有近万次操作，而不是只有十个，那么这是完全可以接受的）

所以仍然我想知道，我错过了一些替代方案吗？有没有办法让这种操作甚至更快？如果你想尝试新的替代品，请随意edit我的jsperf。

Answer 1

这是我目前最好的解决方案。如果有人想出一个更聪明的人，我根本不介意。与每种线型相关联的代码编号与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);
}

从类型化数组更新svg路径

1 个答案: