Pixi.js: 피벗은 개체 위치에 영향을줍니다.

그래픽의 피벗과 위치를 중앙으로 설정하여이 작업을 수행 한 다음이 지점을 중심으로 그래픽을 그렸습니다.

http://stackoverflow.com/questions/17505169/pixi-js-pivot-affects-object-position/18007977#18007977 코드 예제로 stackoverflow에 대한 질문에 답변했습니다

@GoodBoyDigital 피벗이 위치에 영향을

실제로 pivot 및 anchor 에 대해 혼란 스러웠습니다. 병합 할 수 있습니까?

음, pivot 와 anchor 는 (개념적으로) 다릅니다. 피벗은 회전 지점에 영향을주는 반면 앵커는 원점 (위치 지점)입니다. 그래도 피벗이 제대로 사용되고 있는지 잘 모르겠습니다.

이것은 같은 점으로 사용할 수있는 것 같습니다. 실제로 렌더링 (css transform-origin, flash 등록)에서 분리 된 것을 본 적이 없습니다. 이것이 설명 된 사용 사례가 있었습니까? 그렇다면 모든 것이 기본적으로 한 가지로 설정되고 설정된 경우 다른 것을 사용할 수 있습니까?

피벗이 점이 아닌 한 회전을 포함하여 모든 곳에 고정되도록 기본 설정되어 있으면 회전에 사용합니까?

업데이트 : 또는 위의 반대의 경우도 있지만 _anchor = default_ 및 _pivot = rotation_, 더 나은 이름 IMO로 기울고 있습니다.

anchor 및 pivot 는 렌더링 엔진에서 매우 일반적입니다. 중심을 중심으로 회전하고 싶지만 위치가 왼쪽 상단에 의해 결정되는 많은 사용 사례가 있습니다. 우리가 지원해야 할뿐만 아니라 의지 할 것입니다.

안녕하세요, 지금이 문제를 조사 중입니다. 약간의 설명을 위해 anchor 는 스프라이트에 특정한 것입니다. 텍스처를 정렬하는 데 사용됩니다. 나는 그날 cocos2d로 물건을 만들 때 기능이 매우 유용하다는 것을 알았으므로 정말 그것을 pixi에 추가하고 싶었습니다. pivot 는 모든 표시 객체에 속하며 기본적으로 회전 지점입니다.

해결 된대로 닫으면 피벗 / 앵커가 의도 한대로 작동합니다.

이 문제를 제기해서 죄송하지만이 저장소를 통해 검색 / 읽고 있었으며 중앙에서 DisplayObjectContainer를 회전하는 방법에 대해 아직 명확하지 않습니다. 피벗을 사용하면 컨테이너가 다른 곳으로 이동하지 않고 중앙에서 뒤집힐 수 없습니다. 어떤 아이디어? 93 번을보고 그게 답이라고 생각했는데 제대로 이해하지 못했을 수도 있습니다. 어떤 도움을 주시면 감사하겠습니다. 감사!

편집 : 내 물체가 화면을 가로 질러 움직이고 움직이는 동안 뒤집힐 것이라고 언급하는 것이 도움이 될 것이라고 생각했습니다. 나는 또한 "플립 핑"을하기 위해 스케일을 사용하고 있습니다.

@ mparker11 포인트를 중심으로 회전하고 뒤집는 ( scale )은 다릅니다. pivot 는 rotation 의 값에 영향을줍니다. 컨테이너가 배율에 따라 뒤집히는 방식에 제대로 영향을 줄 수 있는지 확실하지 않습니다.

@GoodBoyDigital에 대한 생각?

@englercj 응답 @GoodBoyDigital 자신에 사용되는 것을 볼 수있는, 그것을 달성하기 위해 행렬 곱셈을 사용하는 방법에 대한 기사를 읽어 PIXI.DisplayObject.prototype.updateTransform 기능을하지만, 내 인생 내가 정말에서 확장 할 수 있도록 변경하는 방법을 이해할 수 없다 변경해야 할 경우에도 센터입니다.

음 ... 피벗을 사용하는 방법을 확실히 이해하지 못합니다.

나는 주어진 위치에서 스프라이트의 위치를 ​​설정합니다. 그런 다음 중심에서 회전하도록 만들고 싶으므로 피벗을 내 스프라이트의 중심 (sprite.width / 2, sprite.height / 2)에 설정했습니다. 이로 인해 내 스프라이트가 움직이고 0,0에서 회전합니다.

어? 내가 뭐 놓친 거 없니?

@tleunen 스프라이트를 사용하고 있기 때문에 앵커를 사용해야한다고 생각합니다.

이 동작은 v4에서 수정됩니까?

나는 Pixi를 시험 해보고 즉시이 "버그"를 공격하기로 결정했습니다.
몇 시간 동안 인터넷 검색을 한 후에도 이것이 어떻게 작동하는지 이해하지 못합니다.
포럼의 대부분의 사람들은 "피벗 동작이 깨졌습니다"라고 말합니다. 별로 도움이되지 않습니다.

두렵습니다. 이것이 pixi가 피벗을 다루는 방식입니다.
이 '버그'가 너무 많아서 드러나지 않는다면 홍보 나 조깅을 해주세요.

2016 년 3 월 10 일 목요일에 Ivan Kleshnin [email protected] 은 다음과 같이 썼습니다.

_이 동작은 v4에서 수정됩니까? _

나는 Pixi를 시험 해보고 즉시이 "버그"를 공격하기로 결정했습니다.
몇 시간 동안 인터넷 검색을 한 후에도 이것이 어떻게해야하는지 이해하지 못합니다.
작업.
포럼의 대부분의 사람들은 "피벗 동작이 깨졌습니다"라고 말합니다. 하지 매우
도움이됩니다.

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/pixijs/pixi.js/issues/190#issuecomment -194833811.

Mat Groves

_ 기술 파트너 _

전화 : 07708 114496 :: www.goodboydigital.com
1 층, Unit 9B, Queens Yard, White Post Lane, London, E9 5EN
goodboy ©. 판권 소유.

당신의 의견도 두려워요

개인적으로 "별로 도움이되지 않음"을 받아들이지 마십시오.
기분을 상하게하는 것이 아니라 내 감정 상태를 설명하기위한 것이 었습니다.

이 '버그'가 너무 많아서 드러나지 않는다면 홍보 나 조깅을 해주세요.

나는이 업계에서 멍청이이기 때문에 그것이 버그인지 아닌지 모르겠다.
그래서 따옴표 안에 "버그"라는 단어를 넣었습니다. 어떤 사람들은 그렇게 생각합니다. 일부 – 그렇지 않습니다.
방금 경험을 공유하고 v4의 변경 사항에 대해 질문했습니다. 나는 정말로 Pixi를 배우고 싶었지만 이것은 나를 실망시켰다.

주요 문제 : 10 개 이상의 관련 문제를 읽은 후에도 (여기와 인터넷에서) 여전히이 동작을 해결하는 방법을 얻지 못하고 컨테이너가 정의 된 공간의 중심을 중심으로 회전하도록합니다.
그리고 나는 특별히 어리석지 않습니다.

안녕!

걱정 하지마, 내가 키가 작다면 미안해 긴 하루 끝에 나를 잡았어!

피벗은 정규화되지 않은 앵커 포인트로 작동합니다.

이를 수정하는 가장 쉬운 방법은 개체를 컨테이너에 추가하고 컨테이너를 회전시키면서 개체를 내부적으로 이동하는 것입니다.

도움이 되었기를 바랍니다.

문제 없어요. 고맙습니다. 나는 당신의 조언을 사용하려고 노력할 것입니다.

제 생각에는 그래픽 (또는 컨테이너)을 중심점을 중심으로 회전하는 가장 쉬운 방법은 그래픽이 그려진 중심점 좌표를 저장하는 것입니다. 그런 다음 그래픽의 위치와 피벗을 중심점으로 설정합니다.
다음은 그 예입니다.

예를 들어 그래픽 객체를 만드는 경우 그 위에 기본 요소를 그릴 수 있습니다.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
기본 요소는 항상 Graphics 객체의 위치 (기본값은 0)를 기준으로 그려집니다.
따라서 그래픽 객체의 새 위치를 200으로 설정해야합니다. 이것이 기본 요소의 현재 중심점이기 때문입니다.
test.position.x = 200; test.position.y = 200;
이제 프리미티브가 방금 이동했음을 알 수 있습니다. 따라서 피벗을 동일한 좌표로 설정해야하며 그렸던 동일한 위치에 유지됩니다.
test.pivot.x = 200; test.pivot.y = 200;

pivot 속성은 버그가 아닙니다. 작동 방식과 "객체 위치에 영향을 미치는"이유를 이해하는 것은 약간 혼란 스럽습니다. 개체는 항상 자신의 위치를 ​​중심으로 회전하며 피벗은 회전하는 위치에서 새 지점을 설정하는 데 도움이됩니다.

안녕하세요 여러분! 각도가있는 피벗을 사용할 수 있습니까? 마우스를 따라 가도록 한 스프라이트의 각도 (피벗을 사용하여 회전 위치 수정)를 수정하려고합니다.하지만 할 수 없습니다. 도와 주시겠습니까?

내 코드 펜 예제 확인 => http://codepen.io/jdnichollsc/pen/KgdRvV?editors=0010
그리고 오류 => http://screencast.com/t/hSSaaTO4j0

미리 감사드립니다, Nicholls

끝난! pivot.y 또는 pivot.x 만 사용 하하하! 모든 Pixi 팀에 감사드립니다! : +1 :

제 생각에는 그래픽 (또는 컨테이너)을 중심점을 중심으로 회전하는 가장 쉬운 방법은 그래픽이 그려진 중심점 좌표를 저장하는 것입니다. 그런 다음 그래픽의 위치와 피벗을 중심점으로 설정합니다.
다음은 그 예입니다.

예를 들어 그래픽 객체를 만드는 경우 그 위에 기본 요소를 그릴 수 있습니다.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
기본 요소는 항상 Graphics 객체의 위치 (기본값은 0)를 기준으로 그려집니다.
따라서 그래픽 객체의 새 위치를 200으로 설정해야합니다. 이것이 기본 요소의 현재 중심점이기 때문입니다.
test.position.x = 200; test.position.y = 200;
이제 프리미티브가 방금 이동했음을 알 수 있습니다. 따라서 피벗을 동일한 좌표로 설정해야하며 그렸던 동일한 위치에 유지됩니다.
test.pivot.x = 200; test.pivot.y = 200;

pivot 속성은 버그가 아닙니다. 작동 방식과 "객체 위치에 영향을 미치는"이유를 이해하는 것은 약간 혼란 스럽습니다. 개체는 항상 자신의 위치를 ​​중심으로 회전하며 피벗은 회전하는 위치에서 새 지점을 설정하는 데 도움이됩니다.

야, 그건 해킹이라고 생각하는데, 부작용이있어서 위치가 바뀌 었 거든

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를여십시오.