简体   繁体   中英

Raphael.js How to get center point location of paper and scale relative to the center?

I have defined my raphael paper like below:

var paper = Raphael("my-paper", '100%', '100%');

//render some shapes on my paper
var e = paper.ellipse(50, 50, 40, 20);
var c = paper.circle(50, 50, 40);
var r = paper.rect(40, 40, 50, 50, 10);

As you saw above, I defined my Raphael paper, then drew some shapes on my paper. I have following two questions to ask:

1. How to get the center point x and y value of my paper. (x: horizontal location, y: vertical location)

2. I would like to scale everything on my paper to twice bigger size, I know I can use Raphel scale function . I would like to scale all the elements on the paper relative to the center of my paper , so, I need to do something like:

e.scale(2, 2, CENTER_X, CENTER_Y)

( CENTER_X and CENTER_Y are asked in question 1 )

I'd like the result looks like zoom in, am I using in the right way or are there other ways to do it?

paper.width and paper.height should return the dimensions of the paper which would give you the center.

You can find center of the paper like this

var x = this.paper.canvas.offsetLeft;
var y = this.paper.canvas.offsetTop;

var centerX = x + paper.width/2 ;
var centerY=  y + paper.height/2;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM