我的纸上有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
。
我认为它会起作用,但事实并非如此。这段代码的行为与我的想法不同。如何正确计算值?
答案 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 );
});