Làm thế nào để áp dụng ma trận biến đổi cho các tọa độ đường dẫn trong Raphael JS 2?

Question

Tôi muốn áp dụng hoặc 'nướng' một phép biến đổi một số đường dẫn trong Raphael JS 2, để sau đó tôi có thể kết hợp chúng thành một đường dẫn duy nhất.

Dưới đây là đường dẫn mẫu, nơi tôi muốn thuộc tính "chuyển đổi" được áp dụng cho tất cả các tọa độ "d".

<path style="" fill="#000000" stroke="none" d="M150,-265C182,-275,171,-220,180,-194L178,-194C181,-192,180,-185,181,-180C211,-169,282,-173,306,-166C308,-169,316,-171,315,-165C268,-157,225,-148,184,-137C188,-118,186,-96,190,-79L282,-131C289,-131,296,-135,297,-126C293,-118,271,-105,236,-80C190,-48,155,-20,125,-6C112,-15,115,-34,111,-51C121,-70,108,-107,107,-133C70,-132,-5,-126,0,-157C18,-170,39,-181,64,-191C75,-190,92,-181,100,-185C99,-198,95,-211,89,-225Z" transform="matrix(0.1389, 0, 0, 0.1389, 291.91, 235.465)" stroke-width="7.199999999999999"> 

Tôi hiểu rằng khung công tác svg-edit có thể chuyển đổi tọa độ đường dẫn thành vị trí tuyệt đối và loại bỏ ma trận biến đổi trong quy trình.

Một số câu hỏi có liên quan, mà tôi không thể có được câu trả lời của tôi từ:

• Baking transforms into SVG Path Element commands
• How to apply a transformation matrix?

Answer 1

Một giải pháp phần có thể được tìm thấy trong jsFiddle này: http://jsfiddle.net/X6YNm/1/

//include whoa font, and raphael 
paper = Raphael('holder'); 
var text = paper.print(300, 50, 'Foo', paper.getFont('whoa'), 50, 'baseline'); 
var path = new Array(); 
for (var i = 0; i < text.length; i ++) { 
    path[i] = paper.path(Raphael.pathToRelative(text[i].attr('path'))); 
    path[i].attr({ fill: 'red' }).translate(i * 250, 300); 
} 

Nó cr ăn một con đường mới, dựa trên mỗi nhân vật trong tập hợp ban đầu. Tuy nhiên, fiddle không đúng không gian các ký tự.

Một số cuộc thảo luận liên quan trên nhóm raphael google: Một số nhóm thảo luận google đây: https://groups.google.com/d/msg/raphaeljs/OP29oelR5Eg/zPi5m6rjsvIJ

Answer 2

Dưới đây là một jsFiddle áp dụng tất cả các biến đổi cho bạn: http://jsfiddle.net/ecmanaut/cFSjt/

Có thể là Raphael cho thấy một số hoặc tất cả các các công cụ mà tôi đã tự lấp đầy, nhưng nếu không, các mẹo này sẽ rất hữu ích. Nếu nhu cầu của bạn bao gồm nhiều phần tử không phải đường dẫn (như nhóm, rects, circle, ellipses, vv), trước tiên hãy chuyển đổi chúng thành các phần tử đường dẫn (ví dụ như sử dụng pathify).