0

我正在实时创建/编辑大量（100 到 1000 秒）SVG 路径元素，它们具有整数坐标，以响应用户输入（拖动）。

var pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
var coords = [[0,0], [1,0], [1,1], [0,1]]; // In real case can be list of 1000s, dynamically generated

var d = '';
for (var i = 0; i < coords.length; ++i) {
  d += (i == 0 ? 'M' : 'L') + coords[i][0] + ',' + coords[i][1];
}
d += 'z';

pathElement.setAttributeNS(null, 'd', d);

我可以并且确实汇集了路径元素，因此在这方面它可以最大限度地减少对象+垃圾的创建。但是，似乎很多中间字符串是通过重复使用+=. 此外，将坐标作为数字，将它们转换为字符串，然后系统必须在内部将它们解析回数字，这似乎有点奇怪。

这似乎有点浪费，我担心会出现卡顿，因为在拖动每个鼠标鼠标的过程中都会重复上述操作。以上任何一种情况都可以避免吗？

上下文：这是http://projections.charemza.name/的一部分 ，来自https://github.com/michalc/projections，它可以在应用墨卡托投影之前旋转世界地图。

4

2 回答 2

1

尝试这个：

var pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
var coords = [[0,0], [1,0], [1,1], [0,1]]; // In real case can be list of 1000s, dynamically generated

var d = [];
for (var i = 0; i < coords.length; ++i) {
  d.push((i == 0 ? 'M' : 'L') + coords[i][0] + ',' + coords[i][1]);
}
d.push('z');

pathElement.setAttributeNS(null, 'd', d.join(''));
于 2018-04-28T07:45:16.843 回答
0

有一种方法，使用Uint8ArrayandTextDecoder似乎比 Firefox 中的字符串连接更快，但比 Chrome 中的字符串连接慢：https ://jsperf.com/integer-coordinates-to-svg-path/1 。

没有创建中间字符串，但它确实创建了一个 Uint8Array（可重用 ArrayBuffer 上的视图）

你可以...

  • 手动从数字中查找 ASCII 字符
  • 将字符设置为Uint8Array
  • 用于new TextDecoder.decode(....从缓冲区中获取 Javascript 字符串

如下

// Each coord pair is 6 * 2 chars (inc minuses), commas, M or L, and z for path
var maxCoords = 1024 * 5;
var maxChars = maxCoords * (2 + 6 + 1 + 1) + 1
var coordsString = new Uint8Array(maxChars);
var ASCII_ZERO = 48;
var ASCII_MINUS = 45;
var ASCII_M = 77;
var ASCII_L = 76;
var ASCII_z = 122;
var ASCII_comma = 44;
var decoder = new TextDecoder();
var digitsReversed = new Uint8Array(6);

function concatInteger(integer, string, stringOffset) {
  var newInteger;
  var asciiValue;
  var digitValue;
  var offset = 0;

  if (integer < 0) {
    string[stringOffset] = ASCII_MINUS;
    ++stringOffset;
  }
  integer = Math.abs(integer);

  while (integer > 0 || offset == 0) {
    digitValue = integer % 10;
    asciiValue = ASCII_ZERO + digitValue;
    digitsReversed[offset] = asciiValue;
    ++offset;
    integer = (integer - digitValue) / 10;
  }

  for (var i = 0; i < offset; ++i) {
    string[stringOffset] = digitsReversed[offset - i - 1];
    ++stringOffset
  }

  return stringOffset;
}


var pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');

var coordsStringOffset = 0;
var coords = [[0,0], [1,0], [1,1], [0,1]]; // In real case can be list of 1000s, dynamically generated
for (var i = 0; i < coords.length; ++i) {
  coordsString[coordsStringOffset] = (i == 0) ? ASCII_M : ASCII_L;
  ++coordsStringOffset;
  coordsStringOffset = concatInteger(coords[i][0], coordsString, coordsStringOffset);
  coordsString[coordsStringOffset] = ASCII_comma
  ++coordsStringOffset;
  coordsStringOffset = concatInteger(coords[i][1], coordsString, coordsStringOffset);
}
coordsString[coordsStringOffset] = ASCII_z;
++coordsStringOffset;

var d = decoder.decode(new Uint8Array(coordsString.buffer, 0, coordsStringOffset));

pathElement.setAttributeNS(null, 'd', d);
于 2018-04-28T20:22:02.133 回答