javascript - 中心座標に基づく Raphael JS 位置長方形

Question

Raphael.js中心座標に基づいて 長方形を配置する方法はありますか (円を配置するのと同じように)。

Answer 1

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。幸運を

Answer 2

独自のカスタム要素を作成するだけでそれを行うことができます。これを行う方法の例を次に示します。

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/

このようにして、必要な数の長方形を作成でき、コードが理解しやすくなります。