javascript - 如何在 raphael.js 中定位与中心相关的对象

Question

当我为对象设置 x, y 值以将它们放置在纸上时，它会从左上角测量 x, y。有什么办法可以改变它，使它的位置与纸张的中心相关？

Answer 1

拉斐尔有矩形、圆形和椭圆形。

• 后者 2 以中心坐标定位，因此您无需担心。
• 矩形根据其左上角坐标定位

所以回答你的问题：

Raphael 并没有提供一种用中心坐标定位矩形的方法。
但是，您可以自己轻松地做到这一点。
看看这个DEMO。

例如：

// lets assume your center coordinates are cx and cy
var rec = paper.rect(cx, cy, 120, 80);

// to position in the middle, just do this
var rec = paper.rect(cx - 120/2, cy - 80/2, 120, 80);

它是如此简单。祝你好运！

---

编辑

如果这是您想要在项目中执行的操作，那么只需 Raphael.js 并覆盖矩形类。

Answer 2

Raphael 不支持g元素。因此，您可以运行一个循环并添加属性transform="translate(*half_of_canvas_width*, *half_of_canvas_height*)"，如下所示：

var paper = new Raphael("canvas");

var cx = 250;
var cy = 250;

var rec = paper.rect(0, 0, 250, 250).attr({fill:'red'})

var list = document.getElementById("canvas").childNodes[0].childNodes;
for(var i = 2 /*because the first two elements are desc tag*/, l = list.length; i < l; i++){
    list[i].setAttribute("transform", "translate(250,250)");
}

演示：

http://jsfiddle.net/ry8kT/150/

祝你好运 ：）