2013-08-02 4 views
2

이미지를 원 안에 넣으려고하는데 성공하지 못했습니다. 내 코드는Raphael 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")으로 표시됩니다. 나 또한 이미지 객체를 만들려고했으나 여전히 작동하지 않습니다.

조금 도와주세요.

답변

3

또 다른 방법은 별도의 이미지가 있고 그 위에 원의 객체를 가져오고 싶을 때입니다.

전체 이미지가 너에게 맞는 작은 크기로 표시됩니다. 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); 
+0

음 ... 내 이미지로 원을 채울 수 없어서 그렇게 할 것입니다. 고마워. – Ericks

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)' 
}); 

나는 내가 할 수있는 등의 기본으로 유지하기 위해 완전히 애니메이션을 떠났다. 그것은 잘 작동하는 것 당신의 코드와 매우 비슷합니다. 예제에서 볼 수 없다면 브라우저 문제 일 수 있습니다.

+0

그것은 나를 위해 작동하지 않았다. 나는 이유를 모른다. :/또한 코드를 복사하여 붙여 넣었지만 성공하지 못했습니다. 그것은 호기심이 옳습니까? Anw : 다른 방법을 사용하겠습니다. 고마워. – Ericks

관련 문제