从类型化数组更新svg路径

Update svg path from typed arrays

本文关键字：svg 路径 更新 数组 类型化      更新时间：2023-09-26

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

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

我想到了各种可能的方法。一种选择是在asm.js应用程序的源代码中构造d属性文本。但是该字符串将包含许多数字，并且sprintf的刻字实现过于通用，无法在这里提供良好的性能。因此，我怀疑这种方法是否有竞争的机会。

所以数据应该从生成的asm.js代码传递到手写的JavaScript，而不是作为文本，而是作为数字。一种可能性是使用两个类型数组(它们实际上是同一ArrayBuffer的不同视图)。一个保存段类型，另一个保存相关坐标。这些数据可以在手写代码中使用，要么为d属性计算一个字符串，要么从SVG DOM API使用 SVGPathSegList 构建一个段列表。

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

两种方法似乎都不是特别快。 (编辑:似乎我把千位分隔符误认为小数分隔符了。如果这是正确的，并且我每秒有近10,000次操作，而不是只有10次，那么这是完全可以接受的)

所以 还是我想知道，有没有我错过的其他选择?有没有办法使这种操作甚至更快?如果你想尝试新的选择，请随意编辑我的jsperf。

这是我目前最好的解决方案。如果有人想出一个更聪明的方法，我一点也不介意。与每个行类型相关联的代码号与SVGPathSeg.pathSegType中的代码号匹配。" close "是1， " move absolute "是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);
}
相关文章：