1

私がやった 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')

だから私の質問...このパスを「相対化」して、パス文字列のすべての要素を手動で変更して同じパスを2回描画させることなく、各円の内側に配置する巧妙な方法はありますか?二つの円？

4

1 に答える 1

2

これを試して。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 );

ここでフィドル

于 2012-10-15T02:16:21.130 に答える