如何更改raphael js纸的坐标原点

Question

出于 2d 游戏目的，我必须将 raphael js 文件中的原点 (0,0) 设置到另一个角。默认情况下，原点设置在纸张的左上角。如何更改 raphael js 中的原点位置，以便可以相对于新原点绘制元素？

Answer 1

我觉得官方没有办法。您可以在创建后转换所有形状 ( width_of_canvas - shape_of_width ) / 2 和 ( height_of_canvas - shape_of_height ) / 2。所以你可以创建它们的起源并用这样的函数转换它们。

var paper = Raphael("canvas", 400, 400);
var offsetWidth = paper.width / 2,
offsetHeight = paper.height / 2;
var paperBorder = paper.rect(0,0,paper.width, paper.height).attr({ stroke:"black"})
var rectangle = paper.rect(0, 0, 50, 50).attr({
     stroke:"black",
     fill:"aqua"
})

function transformToCenter(shape) {
   var shapeProps = shape.getBBox();
   var itemOffsetWidth = offsetWidth - shapeProps.width / 2,
   itemOffsetHeight = offsetHeight - shapeProps.height / 2;
   shape.transform("t" + itemOffsetWidth + " " + itemOffsetHeight);
}
transformToCenter(rectangle);

JSFiddle Example

如何更改raphael js纸的坐标原点

How to change cordinate origin of raphael js paper

raphael