在画布中创建路径的任何其他方法

Question

为SVG路径元素的"d"属性传递以下值。

"M 92.5 531.5 L 92.5 526.5 M 207.5 531.5 L 207.5 526.5 M 322.5 531.5 L 322.5 526.5 M 436.5 531.5 L 436.5 526.5 M 551.5 531.5 L 551.5 526.5 M 666.5 531.5 L 666.5 526.5 M 780.5 531.5 L 780.5 526.5 "

要在画布中渲染相同内容，我需要指定moveTo()和lineTo()约7次。

那么，你能否在画布上建议任何其他方法来实现这一目标？

Answer 1

您可以自己构建一个小型解码器。在javascript中，这很容易做到：

//
var drawCode  = "M 92.5 531.5 L 92.5 526.5 M 207.5 531.5 L 207.5 526.5 M 322.5 531.5 L 322.5 526.5 M 436.5 531.5 L 436.5 526.5 M 551.5 531.5 L 551.5 526.5 M 666.5 531.5 L 666.5 526.5 M 780.5 531.5 L 780.5 526.5 ";

var commands = {};
commands.M = { name : 'moveTo', arity : 2};
commands.L = { name : 'lineTo', arity : 2};

// split the original string on space
var splitted = drawCode.split(' ');
// just iterate in those arguments
var i=0;
while (i<splitted.length-1) {
  var cmd = commands[splitted[i]]; // retrieve current command.
  ctx[cmd.name].apply(ctx, splitted.slice (i+1, i+1+cmd.arity));
   i = i + 1  + cmd.arity;
}