如何將圖像放在與拉斐爾Js的圓圈內

我試圖把圖像放在圓圈內，但沒有成功。這是我的代碼：如何將圖像放在與拉斐爾Js的圓圈內

//Elms.raphael() is my stage. 
var circle = Elms.raphael().circle(730, 200, 0); 
circle.attr({ fill : 'url(myImg.jpg)' });     

setTimeout(function() 
{ 
    circle.animate({ 'stroke' : '#000', r : 90, 'stroke-width' : '5' }, 300); 
}, 250);

而不是把圖像放在圓圈它變成黑色（「＃333」）着色。我也試圖製作一個圖像對象，但仍然不起作用。

請幫忙嗎？

來源

2013-08-02 Ericks

另一種方法，如果你有單獨的圖像，並想把它帶到你的圓圈對象。

這使整個圖像顯示更小的尺寸，適合你圈。 DEMO

var r = new Raphael(10,10, 500, 500); 
var c = r.circle(200, 200, 80).attr({stroke: 'red', "stroke-width" : 3}); 

var img = r.image("http://www.eatyourcareer.com/wp-content/uploads/2012/06/ok-256x2561.png", 100, 105, 200, 200);

來源

2013-08-02 21:35:55 Brian

嗯......因爲我無法用我的形象填滿這個圈子，我會這樣做。謝啦。 – Ericks

下面是我如何創建它與圖像的圈鏈接： jsfiddle

var paper = Raphael(document.getElementById("test"), 320, 200); 

var circle = paper.circle(100, 100, 50); 
circle.attr({ 
    fill: 'url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-220px-SIPI_Jelly_Beans_4.1.07.tiff.jpg)' 
});

我離開了動畫出來完全以保持其基本盡我所能。它似乎工作正常，並且與您的代碼非常相似。如果您在示例中看不到它，那麼可能是瀏覽器問題。

來源

2013-08-02 21:30:21

它沒有爲我工作。我不知道爲什麼。：/我也複製並粘貼你的代碼，但沒有成功。這很好奇吧？ Anw：我會用另一種方法。謝了哥們。 – Ericks

如何將圖像放在與拉斐爾Js的圓圈內

回答

相關問題