基於中心座標的Raphael JS位置矩形

Question

基於中心座標（很像定位一個圓圈），有沒有辦法在Raphael.js中定位矩形？

Answer 1

您可以通過簡單地創建自己的自定義元素做到這一點，這裏是它如何工作的一個示例：

Raphael.fn.MyRect = function(cx, cy, width, height) { 
    var xLeftTop = cx - (width/2); 
    var yLeftTop = cy - (height/2); 
    this.rectObj = paper.rect(xLeftTop, yLeftTop, width, height); 
    return this; 
}; 

var paper = Raphael(10, 50, 320, 200); 
paper.MyRect(95, 35, 50, 50); // 95 is the center in x and 35 the center in y 

一個活生生的例子：http://jsfiddle.net/7QMbH/

這種方式，你可以創建許多矩形你想要的，它使你的代碼可以理解。

Answer 2

最簡單的方法是創建一個具有座標x - rect_width/2和y - rect_heigth/2您的矩形：

例子：

var rect_w = 180, 
    rect_h = 80; 

var paper = Raphael(10, 10, 500, 500); 
    paper.rect(100 - rect_w/2, 100 - rect_h/2, rect_w, rect_h, 5); 

// The last 5 gives curved edges to you rectangle (if you need it of course). 

基本上，而不是100,100的左上角，你給10,60 。 好運