Raphael js의 서클 내에서 완벽한 이미지를 얻는 방법

Question

서클 내부의 이미지를 채울 수 있습니다. 하지만 문제는 이미지가 원 안에 확대되어 이미지가 확대되거나 원형에 맞춰지기를 원합니다.

<div class="disp"></div> 

자바 스크립트

var r = Raphael("disp"); 

    var cir=r.circle(100, 100,33).attr({fill:"url(image.jpg)"}); 
// image get zoomed, how to make image fit into circle or less zoomed 

제발 도와주세요! 감사합니다

Answer 1

몇 가지 수학을해야합니다. attr(fill)을 사용하지 마세요 - image 개체를 만들고 서클에 맞춰보세요.
Here은 이러한 동작의 좋은 예입니다.

BTW, 당신은 작동하지 않습니다 클래스 = "DISP"와 var r = Raphael("disp");을 썼다 -이 기능이 ID을 기다립니다.

Answer 2

Here's a solution jQuery뿐만 아니라 Raphael을 사용한다고 가정하면 코드에 직접 삽입 할 수 있습니다.