我如何在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/

祝好運 ：）