2

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

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

请帮忙？

4

2 回答 2

4

另一种方法是，如果您有单独的图像并且想要将它带到您的圆形对象上。

这使得整个图像看起来更小，适合你的圆圈。演示

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-02T21:35:55.357 回答
3

这是我如何创建一个带有图像的圆圈的链接： 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-02T21:30:21.390 回答