Question

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

Answer 1

拉斐尔有长方形，圆形和椭圆形。

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

回答你的问题：

拉斐尔没有提供一种方法来定位具有中心坐标的矩形。
但是你可以轻松地自己做到这一点。
看看 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/

祝你好运：）

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

2 个答案: