Question

我已经完成了Raphael.js图像，其中包含一组圆圈，如此

var paper = Raphael(0,0,100,100);
var circle1 = paper.circ(20,20,10);
var circle2 = paper.circ(40,40,10);

我还有拉斐尔格式的svg图标（感谢可爱的网站http://readysetraphael.com/），我想放在每个圈子里面。问题是...转换的svg图标中的所有路径现在都相对于点（0,0）！这意味着所有的字符串都是这样编写的

paper.path('M 1 1 L 2 0 L 0,2 z')

所以我的问题......是否有一些聪明的方法来“相对”这条路径使其位于每个圆圈内，而不是仅仅进入并手动改变路径字符串的每个元素以使其绘制相同的路径两圈内两次？

Answer 1

试试这个。用任何其他有效路径替换shp的内容。

    var shape,
        circleHalfWidth,
        circleHalfHeight,
        shpHalfHeight,
        shpHalfWidth,
        targetLeft,
        targetTop,
        paper,
        circle1,
        circBBox,
        shpBBox,
        shp,
        radius = 20,
        b2,
        c2,
        b,
        s;

shape = "M25.979,12.896,5.979,12.896,5.979,19.562,25.979,19.562z";
paper = new Raphael(0,0,500,500);
circle1 = paper.circle(100,100,radius);
shp = paper.path( shape );

// get objects that contain dimensions of circle and shape

circBBox = circle1.getBBox( );
shpBBox = shp.getBBox( );

// get dimensions that will help us calculate coordinates to centre of circle

circleHalfWidth = circBBox.width / 2;
circleHalfHeight = circBBox.height / 2;
shpHalfWidth = shpBBox.width / 2;
shpHalfHeight = shpBBox.height / 2;

// calculate coordinates to position shape on top left corner of circle

targetLeft = circle1.getBBox( ).x - shp.getBBox( ).x;
targetTop = circle1.getBBox( ).y - shp.getBBox( ).y;

//Calculate how wide is shape allowed to be in circle using pythagoras

c2 = Math.pow( radius, 2 );
b2 = c2 / 2;
b = Math.sqrt( b2 );

// Calculate ratio so that both height and width fit in circle

s = shpBBox.width > shpBBox.height ? ( shpBBox.width / b ) : ( shpBBox.height / b );

// change coordinates so shape will be moved to centre of circle

targetLeft += circleHalfWidth - shpHalfWidth;
targetTop += circleHalfHeight - shpHalfHeight;

// Remember uppercase T so that scaling is ignored when moving shape 

shp.transform( "s" + s  + "T" + targetLeft + "," + targetTop );

小提琴here

将一个raphael js元素放在另一个里面

1 个答案: