我使用这个在线工具将 SVG 图像转换为 canvas js 命令 http://www.professorcloud.com/svg-to-canvas/
现在我向您展示该代码的一些片段:
...
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
代码段都会在 Canvas 上绘制单独的对象。
当我想对这些对象进行进一步操作时,我发现我需要将此命令列表转换为紧凑的结构:
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 正则表达式执行此操作的方法。
我在循环和多个 preg_match
es 和 if
子句中看到了解决方案,但确实希望看到一个更简单的解决方案。
最佳答案
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]))
}
接下来,扫描坐标:
对连续的“l”(或“b”或“m”)集进行分组,并对每个组调用compact_arr()
。
关于javascript - 将canvas js命令转换为紧凑结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25816270/