Raphael JS合併路徑

我在SVG和Raphael很新，但我已經使用Illustrator很多年了，所以我對它的工作原理有了一些假設。我想結合兩個應該返回單個元素的路徑。Raphael JS合併路徑

我需要做一個講話泡泡，但它可能是真的。在這種情況下，我嘗試製作兩個rect，一個帶有圓角，另一個帶有旋轉的正方形rect。它看起來不錯，但是當我試圖移動氣泡時，由於旋轉45度，旋轉的元件向錯誤的方向移動。

如何合成我可以稍後操作的路徑，就好像它是單個元素/路徑一樣？

Example of speech bubble

來源

2013-08-27 curly_brackets

我想我給你很好的解決方案。沒有？ – Brian

你好。這是一個古老的問題，但是你沒有迴應那些幫助過你的人。你會考慮現在這樣做嗎？ – halfer

的第一件事是，你可以把你的2個元素爲拉斐爾一套，你以後會與Element.transform()移動。這可以讓你應用移動處理程序一次，而不是兩次。

也爲您的問題，它是acually documented：

...也有另類「絕對」的平移，旋轉和規模：T，R和S，他們不會把以前的轉化帳戶。例如，... T100,0將始終以水平方式移動元素100 px ，而... t100,0可以在之前有r90 時將其垂直移動。只是比較r90t100,0和r90T100,0的結果。 ...

來源

2013-08-27 09:53:11

在這裏你去DEMO

var paper = Raphael('canvas',400,400), 
    r1 = paper.rect(100,100,200,100).attr({fill:'black'}), 
    r2 = paper.rect(130,130,140,40,5).attr({fill:'white','stroke':'white'}), 
    r3 = paper.path("M200 170L240 170 220 180z").attr({fill:'white', 'stroke':'white'}), 
    p  = paper.set(r1,r2,r3); 

// the rest of the code is in the demo

請注意，這是很容易通過path()創建三角形，而不是擔心旋轉。好運;）

來源

2013-08-27 16:24:31 Brian

Hi @ Brian。我正在尋找與您的解決方案相反的方案。你將如何分解複合路徑？這裏是我的問題：http://stackoverflow.com/questions/20847767/how-to-change-an-svgs-complex-paths-that-have-duplicated-paths-for-each-line-to – user3117671

如果你的意思是合併喜歡用Illustrator的Pathfinder面板的路徑 - 打開多個路徑一個路徑（不是一組路徑），合併重疊的 - 我敢肯定沒有直接拉斐爾或等價SVG 。

最接近的是，創建一個複合路徑（又名複合路徑） - 相當於Illustrator中的cmd-8或Object > Make Compound Path。這將路徑合併到一個路徑中，但不會刪除重疊區域。

基本上，對於一組paper.set(paper.path('M0,0 4,0 0,4z'),paper.path('M9,9 4,9 9,4z'));，等效複合路徑將爲paper.path('M0,0 4,0 0,4z M9,9 4,9 9,4z'); - 只將路徑定義合併爲一個，每個路徑定義都以其自己的M開頭。

有些差異拉斐爾設置：當你移動，排序，等

少開銷（它只是一個複雜的路徑，而不是幾個獨立的個體路徑元素）
更少的驚喜：
- 適用於拉斐爾套的東西依次適用於每個項目，而不是以套件爲單位 - 例如toFront()更改訂單範圍內設置，並且轉換中心圍繞每個項目，像Illustrator的transform each，除非您給變換靜態座標。
- 但是，應用於複合路徑的事物適用於整個複合路徑作爲一個單位。
這是不可能的複合路徑的子路徑有不同的屬性
之類的東西梯度在整個複合路徑的申請一次，而用套，會有各自不同的路徑上獨立的梯度

JSBIN demo - 比較梯度，看看複合對如何只是DOM上的一條路徑。

這裏有一個簡單的插件，增加了帶一組，並從它創建複合路徑的能力：

Raphael.st.compoundPath = function(){ 
    var positions = []; 
    this.forEach(function(element){ 
     positions.push(element.compoundPath()); 
    }); 
    return positions.join(''); 
} 
Raphael.el.compoundPath = function(){ 
    var path = this.attr('path'); 
    return path ? Raphael.parsePathString(path).join('') : ''; 
}

然後使用它是這樣的：

var someSet = paper.set(paper.path('M0,0 4,0 0,4z'),paper.path('M9,9 4,9 9,4z')); 
var compPath = paper.path(someSet.compoundPath()); 
someSet.remove(); // if you want to replace the set with a compound path

注意它僅將一組路徑結合起來 - 如果需要將其他形狀與路徑結合使用，則需要先將路徑轉換爲路徑。

來源

2013-12-04 15:06:34 user568458

嗨@ user568458 。我正在尋找與您的解決方案相反的方案。你將如何分解複合路徑？這裏是我的問題：http://stackoverflow.com/questions/20847767/how-to-change-an-svgs-complex-paths-that-have-duplicated-paths-for-each-line-to – user3117671

Raphael JS合併路徑

回答

相關問題