2014-09-12 3 views
1

я преобразовал SVG изображения к командам холст 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 сегмент кода втягивает отдельный объект на холсте.
Как я хочу сделать дальнейшие манипуляции с этим объектами я пришел к тому, что мне нужно, чтобы преобразовать этот список команд для компактной структуры:

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 и скоординированное представление в виде массива. Где первая буква указывает на функцию (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 предложениях, но действительно хотел увидеть более простое решение.

+0

Зачем использовать регулярное выражение? Вы можете написать парсер. Кажется, как вложенный цикл. –

+0

Я вижу сульфию в циклах и несколько preg_mathches и если предложения, но хотел увидеть что-то более простое. –

+1

Нет, не расширьте его в PHP, проанализируйте его на стороне клиента, что намного проще. Определенно не нужно регулярное выражение для этого - у вас уже есть структура JSON - либо итерация объекта JSON - либо после разбора его на объект JS на стороне клиента, либо на ассоциативный массив PHP на сервере. –

ответ

0

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' или 'т') и вызова compact_arr() по каждой группе.

+0

Но мне нужно преобразовать его один раз и сохранить результат в файле и работать с этим новым файлом. Ваше решение, похоже, конвертируется на лету. –

+0

Также мой входной файл не похож на [['l', [1,2]], ..., ['l', [3,4]]]. Но это похоже на код, который я написал в моем вопросе - сразу после слов «Теперь я покажу вам часть этого кода: –

Смежные вопросы