如何用Raphael Js将图像放入圆圈内

Question

我正在尝试将图像放入圆圈但没有成功。这是我的代码：

//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”）着色。我也尝试制作一个图像对象，但仍然无效。

请帮助一点？

Answer 1

另一种方法，如果您有单独的图像并希望将其带到您的圆形对象上。

这使整个图像显示的尺寸更小，适合您圈。的 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);

Answer 2

以下是我创建一个包含图片的圆圈的链接： 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)'
});

我完全离开了动画片以尽可能地保持它的基本状态。它似乎工作正常，与您的代码非常相似。如果您在示例中看不到它，则可能是浏览器问题。