Question

我的纸上有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);

-300为200-500，500为1000/2。

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

Answer 1

我认为在这种情况下你需要物体的位置减去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 );
});

Raphael - 如何计算setViewBox的参数？

1 个答案: