Question

我使用此在线工具http://www.professorcloud.com/svg-to-canvas/

将SVG图像转换为canvas js命令

现在我向您展示一些代码：

...
ctx.beginPath();
ctx.moveTo(1080.756,172.244);
ctx.lineTo(1077.382,175.618);
ctx.lineTo(1079.223,177.458);
ctx.lineTo(1081.677,175.004);
ctx.lineTo(1082.903,171.63);
ctx.lineTo(1080.756,172.244);
ctx.closePath();
ctx.fill();
ctx.stroke();



ctx.beginPath();
ctx.moveTo(1089.039,169.79);
ctx.lineTo(1091.492,169.79);
ctx.quadraticCurveTo(1091.492,169.79,1091.492,169.79);
ctx.lineTo(1091.492,171.32399999999998);
ctx.quadraticCurveTo(1091.492,171.32399999999998,1091.492,171.32399999999998);
ctx.lineTo(1089.039,171.32399999999998);
ctx.quadraticCurveTo(1089.039,171.32399999999998,1089.039,171.32399999999998);
ctx.quadraticCurveTo(1089.039,169.79,1089.039,169.79);
ctx.lineTo(1089.039,169.79);
ctx.closePath();
ctx.fill();
ctx.stroke();
...

每个beginPath-closePath段代码在画布上绘制单独的对象由于我想对这些对象进行进一步的操作，我得到了我需要将这个命令列表转换为紧凑的结构：

a = [
    {
        name: 'name1',
        coords: [ 
            ['m',21,22],
            ['l',[1,2], [3,4], [5,6]],
            ['b',7,8,9,10],
            ['l',[11,12],[13,14]]               
        ]
    },
    {
        name: 'name2',
        coords: [ 
            ['m',21,22],
            ['l',[21,22], [23,4], [5,6]],
            ['b',[27,28,9,10], [11,12,13,14]],
            ['l',[211,212],[213,214]]               
        ]
    }           
];

我希望将每个单独的对象转换为js对象{}。并且在此对象中'coords'属性将具有所有js canvas函数并以数组方式表示协调。第一个字母表示函数（moveTo，lineTo等）然后 - 这个函数的参数。但是额外的事情是，如果我有多行lineTo函数，我想将它们组合成一个数组。所以当我有这样的代码时：

ctx.lineTo(1,2);
ctx.lineTo(3,4);

我希望将其转换为

['l',[1,2], [3,4]]

而不是

['l',[1,2]],
['l',[3,4]]

我该怎么做？无法通过php regex看到这样做的方法我在循环和多个preg_match es和if子句中看到了解决方案，但我真的希望看到一个更简单的解决方案。

Answer 1

Underscore.js魔术将[ ['l',[1,2]],...,['l',[3,4]] ]转换为['l',[1,2],...,[3,4]]

function compact_arr(data) { // helper function
  return _.union(data[0][0], _.pluck(data, [1]))
}

接下来，扫描coords:对连续的'l'（或'b'或'm'）组进行分组，并在每个组中调用compact_arr()。

将canvas js命令转换为紧凑结构

1 个答案: