Raphael - 如何计算setViewBox的参数?

时间:2013-11-16 09:14:48

标签: raphael

我的纸上有2个圆圈,尺寸为1000 * 1000:

var circle1 = paper.circle(500, 500, 50);
var circle2 = paper.circle(200, 200, 25);

当我点击circle2时,我想将circle2作为视图的中心并放大2倍,因此circle2将视觉上与circle1一样大

我的代码:

paper.setViewBox(-300, -300, 500, 500);

-300200-5005001000/2

我认为它会起作用,但事实并非如此。这段代码的行为与我的想法不同。如何正确计算值?

1 个答案:

答案 0 :(得分:0)

我认为在这种情况下你需要物体的位置减去250,因为250是新坐标设置的一半,如果你被缩放,则要计算从中心移动的距离。我已经在较低的坐标上添加了一个额外圆圈的小提琴,以帮助突出显示http://jsfiddle.net/EXg5f/2/

var paper = Raphael('container',1000,1000);

var circle1 = paper.circle(500, 500, 50).attr({ fill: 'red' });

var circle2 = paper.circle(200, 200, 25).attr({ fill: 'blue' });

var circle3 = paper.circle(10,10,50).attr({ fill: 'yellow' });

circle2.click( function() {
    paper.setViewBox( -50, -50, 500, 500 );
});

circle1.click( function() {
   paper.setViewBox( 250, 250, 500, 500 );
});

circle3.click( function() {
    paper.setViewBox( -240, -240, 500, 500 );
});