在拉斐爾矢量圖形中移動三角形的位置

我正在使用Raphael.js創建「播放」按鈕圖標。但是，三角形的位置太靠近圓的邊緣。在鼠標懸停時，我正在增加筆畫寬度 - 問題在於三角形實際上出現在圓圈之外，這不是我想要的。該HTML只是一個帶有ID的div：在拉斐爾矢量圖形中移動三角形的位置

<html> 
<head> 
</head> 
<body> 
    <div id="playB"></div> 
</body> 
</html>

的JavaScript是相當長，所以here is the jsfiddle

什麼是最簡單的方式爲「移動」在這種情況下的SVG的路徑？即 - 從右側進一步開始，並從頂部進一步開始。我嘗試了各種各樣的東西，但除了改變圖標的大小 - 將路徑的每個數字乘以x，我根本無法操縱圖標。在這種情況下移動圖標的特定元素。

來源

2013-01-09 lenny

您需要分割路徑以調整三角形的位置。我是能夠用眼睛靠撿出來要做到這一點，其中第二個「M」是路徑：

var playB = Raphael('playB', 200, 200); 
var circle =   playB.path("M64,5.864C31.892,5.864,5.864,31.892,5.864,64c0,32.108,26.028,58.136,58.136,58.136c32.108,0,58.136-26.028,58.136-58.136C122.136,31.892,96.108,5.864,64,5.864z"); 
var triangle = playB.path("M26.736,102.728L97.264,62L26.736,21.272V102.728z");

然後你可以移動的三角過來：

triangle.attr("transform", "T15,0");

要保持性能和動畫完好，都添加到拉斐爾組：

var playBP = playB.set(); 
playBP.push(circle, triangle); 
playBP.attr({ 
    'stroke-width': 5, 
    'stroke': "#000", 
    'fill': "#fff", 
    'opacity': 1 
});

然後你只需要一個小的變化：改變「這個」，在鼠標懸停命令「playBP」。這看起來可能是多餘的，但「this」指的是被蒙上陰影的單個元素，而不是集合。

var speed = 5; 

playBP.mouseover(function(){ 
    playBP.animate({ 
    'stroke-width': 10, 
    'stroke': "#fff", 
    'fill': "#000", 
    'opacity': .9 
    }, 1000, 'elastic'); 

}); 
playBP.mouseout(function(){ 
    playBP.stop().animate({ 
    'stroke-width': 5, 
    'stroke': "#000", 
    'fill': "#fff", 
    'opacity': 1  
    }, speed*4, 'elastic'); 

});

jsFiddle updated

如果您只想修復路徑，你可以使用Raphael.mapPath（）函數來得到調整X/Y爲三角形，像這樣：

console.log(Raphael.mapPath(triangle.attr("path"), triangle.matrix));

來源

2013-01-09 19:11:34

請問triangle.matrix是什麼？一個例子？ –

-1

使用el.transform('t{x},{y}')，例如el.transform('t1,1')將每個元素向右和向下平移1個像素。您可以根據需要替換x和y的不同值，包括負值。

來源

2013-01-09 17:42:56 Plynx

這不會起作用，因爲三角形和圓形是同一路徑的一部分。 –

我花了簡單的方法，並改變了你的路徑inkscape。這很容易做到。如果你有興趣，這就是我所做的。

在inkscape中創建一個路徑並選擇它。
Ctrl-shift-x以獲取xml編輯器。你的路徑應該被選中。
點擊「d」屬性。
在下面的框中將值替換爲小提琴中的值。
點擊設置。
路徑將被修改爲類似於小提琴中的路徑。

然後，我只是選擇了三角形節點，並將它們移過來。回到xml編輯器，選擇「d」值，並把它放到你的小提琴中。

var playBP =   playB.path("M 64,5.864 C 31.892,5.864 5.864,31.892 5.864, 
64 5.864,96.108 31.892,122.136 64,122.136 96.108,122.136 122.136,96.108 122.136, 
64 122.136,31.892 96.108,5.864 64,5.864 z M 38.640816,102.728 109.16882, 
62 38.640816,21.272 z");

Voila.

來源

2013-01-10 17:27:04 amadan

在拉斐爾矢量圖形中移動三角形的位置

回答

相關問題