pixi.js 피벗이 객체 위치에 영향을줍니다.

Question

DisplayObject의 피벗 속성과 관련하여 질문이 있습니다. 특히, 나는 중심 주위에 DisplayObjectContainer를 회전시키고 싶다. 그래서 나는 중심점으로 피벗을 설정합니다. 그러나 이것은 요소의 위치에 영향을 미친 것으로 나타났습니다.

예를 들어, 위치를 기본값 0,0으로 설정하면 pixijs는 왼쪽 위 모서리가 아닌 중심점에 따라 객체의 위치를 ​​지정하려고 시도합니다. 그래서 DisplayObjectContainer의 자식 (내 경우에는 Graphics 클래스의 인스턴스 임)은 기본 뷰포트에서 벗어납니다.

회전 지점을 설정하지만 개체의 왼쪽 상단 모서리를 기준으로 위치를 지정하는 방법이 있습니까?

Answer 1

개체를 회전시키고 자하는 지점에 그래픽 컨테이너를 그리고 그 중심이 그래픽의 x/y 위치가되도록 개체를 그려야합니다. 따라서 중심을 중심으로 피벗하면서 원하는 정확한 좌표에 그려진 사각형을 그리려면이 함수를 사용합니다. 이 정사각형 또는 직사각형이기 때문에 중심이 X1의 + (폭/2) 및 (Y1)의 + (높이/2)를 사용하여 스크린 상에 있어야 할 곳에

self.createRect = function (x1, y1, x2, y2, color) { 
    var graphics = new PIXI.Graphics(); 

    graphics.beginFill(color || 0x000000); 
    //This is the point around which the object will rotate. 
    graphics.position.x = x1 + (x2/2); 
    graphics.position.y = y1 + (y2/2); 

    // draw a rectangle at -width/2 and -height/2. The rectangle's top-left corner will 
    // be at position x1/y1 
    graphics.drawRect(-(x2/2), -(y2/2), x2, y2); 

    self.stage.addChild(graphics); 

    return graphics; 
}; 

, 우리는 우리가 왼쪽으로 RECT 오프셋 계산할 수 drawRect (- (width/2), - (height/2), x2, y2)를 사용하여 너비의 절반과 높이의 절반만큼 위쪽으로 이동합니다.

Answer 2

피벗 속성은 약간 혼란 스럽습니다. 다음의 예를 상상해보십시오 : 피벗은 나사입니다 (물론 어딘가에 위치 할 수도 있습니다 만, 더 나은 이해를 위해 피사체가 스크류가 튀어 나와있는 판자로 상상해보십시오). 귀하의 그래픽/컨테이너 위치는 나사입니다. 물체는 항상 위치를 중심으로 회전하지만, 물체의 피벗 (나무 판 위의 나사의 위치)을 변경할 수 있으므로 개체의 회전 지점이됩니다. 마침내 나무 판자를 나사못으로 조이십시오. 당신이 당신의 목적은 여기에 예를 들어 그린 경우

기본적으로 위치와 피벗의 기본 값은 0 그래서입니다 :

test.drawRoundedRect(100, 100, 200, 200,12); 

당신이 지금 회전 시도 할 수 있습니다 당신은, 볼이 그 것이다 점 (0,0)을 중심으로 회전합니다. 그래픽은 항상 위치를 중심으로 회전

, 당신은 다른 곳을 찾습니다 시도 할 수 있습니다 :

test.position.x = 200; 
test.position.y = 200; 

를 목적은 이제 포인트 (200200) 중심으로 회전한다. 그러나 이것은 변화에 불과합니다. 피벗 점 (나사)을 다른 위치로 변경하려고 할 수 있습니다. 그래서 나무 판자에 나사를 (50,50), (100,100) 등으로 놓으면 이 대상 위치 인에 영향을 미칩니다.

이제 예를 들어 피벗 지점을 (200,200)으로 개체 위치와 동일한 좌표로 설정할 수 있습니다.

test.pivot.x = 200; 
test.pivot.y = 200; 

마지막으로 그려진 개체의 중심점을 중심으로 회전합니다.

@Spencer에서 제공하는 솔루션은 피벗 속성의 대안입니다.