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

admin管理员组

文章数量:1302379

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?

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?

• javascript
• raphael

Share Improve this question Follow asked Jun 7, 2011 at 14:07 LeemLeem 18.3k3939 gold badges112112 silver badges164164 bronze badges 1

• Are you still looking for this answer? I can provide you with a working example... – ffleandro Commented Jul 10, 2012 at 14:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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;

本文标签：