라파즈 js 종이의 좌표 원점을 변경하는 방법

Question

2 차원 게임 목적을 위해 다른 구석으로 라파스 js 종이에서 원점 (0,0)을 설정해야합니다. 기본적으로 원점은 용지의 왼쪽 상단 모서리에 설정됩니다. 라파엘 js에서 원점 위치를 변경하여 요소가 새로운 원점을 기준으로 그려 질 수 있도록하려면 어떻게해야합니까?

Answer 1

공식적인 방법이 없다고 생각합니다. 생성 후 모든 모양 (width_of_canvas - shape_of_width)/2 및 (height_of_canvas - shape_of_height)/2를 변형 할 수 있습니다. 그래서 당신은 당신의 기원을 crete 할 수 있고 이것과 같은 함수로 변형시킬 수 있습니다.

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