javascript - 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. 祝你好运