Pixi.js: ピボットはオブジェクトの位置に影響します

作成日 2013年07月06日  ·  24コメント  ·  ソース: pixijs/pixi.js

DisplayObjectのピボットプロパティに関して質問があります。 特に、DisplayObjectContainerをその中心を中心に回転させたいと思います。 ピボットを中心点に設定します。 ただし、これが要素の位置に影響することに気づきました。

たとえば、位置を0,0(デフォルト)に設定すると、pixijsは左上隅ではなく中心点に従ってオブジェクトを配置しようとします。 したがって、DisplayObjectContainerの子(私の場合はGraphicsクラスのインスタンス)は、ビューポートの左端と上端を使い果たします。

回転点を設定する方法はありますが、それでもオブジェクトを左上隅に対して配置します。

🕷 Bug

最も参考になるコメント

私の意見では、グラフィック(またはコンテナ)をその中心点を中心に回転させる最も簡単な方法は、グラフィックが描画された中心点の座標を保存することです。 次に、グラフィックの位置とピボットを中心点に設定します。
次に例を示します。

たとえば、グラフィックオブジェクトを作成する場合は、その上にプリミティブの描画を開始できます。
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;

ピボットプロパティはバグがありません。それがどのように機能し、なぜ「オブジェクトの位置に影響を与える」のかを理解するのは少し混乱します。 オブジェクトは常に自分の位置を中心に回転しており、ピボットはオブジェクトが回転する場所から新しいポイントを設定するのに役立ちます。

全てのコメント24件

グラフィックのピボットと位置を中央に設定することでこれを行うことができ、次にこのポイントの周りにグラフィックを描画しました。

私はここにコード例でstackoverflowに関するあなたの質問に答えました: http

@GoodBoyDigitalピボットは位置に影響を与えていますか?もしそうなら、それは簡単な修正ですか?

私は実際にpivotanchorについて混乱していますが、これらをマージできますか?

ええと、 pivotanchorは(概念的に)異なります。 ピボットは回転点に影響し、アンカーは原点(位置の点)です。 ただし、ピボットが適切に使用されているかどうかはわかりません。

これも同じポイントとして使えるようですね。 私は実際にレンダリング(css変換元、フラッシュの登録)でこれらが分離されているのを見たことがありませんこれが説明されたユースケースはありましたか? もしそうなら、すべてがデフォルトで1つのものになり、設定されている場合は別のものを使用できますか?

ピボットがポイントでない限り、おそらくデフォルトで回転を含むすべての場所にアンカーしますが、それを回転に使用しますか?

更新:または上記の逆ですが、私は_anchor = default_、および_pivot =ローテーション_に傾いていますが、IMOの名前をより適切にしています。

anchorpivotは、レンダリングエンジンではかなり一般的です。 中心を中心に回転させたいが、左上で位置を決定するユースケースはたくさんあります。 それは私たちがサポートすべきであるだけでなく、そうするものです。

ハウディ、今この問題を調べています。 少し明確にするために、 anchorはスプライト固有のものです。 テクスチャを揃えるために使用されます。 当時、cocos2dで何かを作っていたときに、この機能が信じられないほど便利だと思ったので、本当にpixiに追加したかったのです。 pivotはすべての表示オブジェクトに属し、基本的に回転点です。

これを解決済みとして閉じると、ピボット/アンカーは意図したとおりに機能します。

これを表示して申し訳ありませんが、私はこのリポジトリを検索/読み取りしており、DisplayObjectContainerを中心から回転させる方法がまだわかりません。 ピボットを使用しても、他の場所に移動せずにコンテナを中心から反転させることはできません。 何か案は? #93を見て、それが答えだと思いましたが、正しく理解していないのかもしれません。 どんな助けでもいただければ幸いです。 ありがとう!

編集:私のオブジェクトが画面上を移動していて、移動中に反転することを言及すると役立つと思いました。 私はまた、「フリッピング」を行うためにスケールを使用しています。

@ mparker11ポイントを中心に回転することと( scale介して)反転することは異なります。 pivotrotationの値に影響しますが、コンテナがスケールでどのように反転するかに適切に影響を与えることができるかどうかはわかりません...

@GoodBoyDigitalの考え?

@englercjご回答ありがとうございます。 行列乗算を使用してそれを実現することについての記事を読みました。 @ GoodBoyDigitalが彼のPIXI.DisplayObject.prototype.updateTransform関数で使用されていることがわかりますが、私の人生では、それをスケールに変更する方法を本当に理解できません。センターを変更する必要がある場合でも。

うーん...ピボットの使い方がよくわかりません。

スプライトの位置を特定の位置に設定します。 次に、中心を回転させたいので、スプライトの中心にピボットを設定します(sprite.width / 2、sprite.height / 2)。 これにより、スプライトが移動し、回転が0,0になります。

え? 私は何か見落としてますか?

@tleunenスプライトを使用しているので、アンカーを使用する必要があると思います。

この動作はv4で修正されますか?

私はPixiを試してみることにし、すぐにこの「バグ」にぶつかりました。
数時間グーグルした後、私はまだこれがどのように機能するのか理解していません。
フォーラムのほとんどの人は、「ピボットの動作が壊れている」とだけ言っています。 あまり役に立ちません。

あなたのコメントも私が恐れていることではありません。 これは、pixiがピボットを処理する方法です。
この「バグ」が多すぎてむき出しにならない場合は、PRまたはジョギングを提供してください。

2016年3月10日(木曜日)に、イワンKleshninの[email protected]書きました:

_この動作はv4で修正されますか?_

私はPixiを試してみることにし、すぐにこの「バグ」にぶつかりました。
数時間グーグルした後、私はまだこれがどのようになっているのか理解していません
作業。
フォーラムのほとんどの人は、「ピボットの動作が壊れている」とだけ言っています。 あまりない
役に立ちました。


このメールに直接返信するか、GitHubで表示してください
https://github.com/pixijs/pixi.js/issues/190#issuecomment-194833811

マットグローブ

_テクニカルパートナー_

電話番号:07708 114496 :: www.goodboydigital.com
1階、ユニット9B、クイーンズヤード、ホワイトポストレーン、ロンドン、E9 5EN
goodboy©。 全著作権所有。

あなたのコメントも私は恐れています

個人的に「あまり役に立たない」と思わないでください。
気分を害するのではなく、私の感情的な状態を説明するためのものでした。

この「バグ」が多すぎてむき出しにならない場合は、PRまたはジョギングを提供してください。

私はこの業界の初心者なので、それがバグかどうかはわかりません。
そのため、上記の「バグ」という単語を引用符で囲んでいます。 一部の人々はそれがそうだと思います。 一部–そうではありません。
私は自分の経験を共有し、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;

ピボットプロパティはバグがありません。それがどのように機能し、なぜ「オブジェクトの位置に影響を与える」のかを理解するのは少し混乱します。 オブジェクトは常に自分の位置を中心に回転しており、ピボットはオブジェクトが回転する場所から新しいポイントを設定するのに役立ちます。

こんにちはみんな! ピボットを角度で使用できますか? 1つのスプライトの角度を変更して(ピボットを使用して回転位置を変更しようとしています)、マウスを追跡しようとしていますが、できません。手伝ってくれませんか。

私のコードペンの例を確認してください=> http://codepen.io/jdnichollsc/pen/KgdRvV?editors=0010
そしてエラー=> http://screencast.com/t/hSSaaTO4j0

よろしくお願いします、ニコールズ

完了しました。 ピボット.yまたはピボット.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;

ピボットプロパティはバグがありません。それがどのように機能し、なぜ「オブジェクトの位置に影響を与える」のかを理解するのは少し混乱します。 オブジェクトは常に自分の位置を中心に回転しており、ピボットはオブジェクトが回転する場所から新しいポイントを設定するのに役立ちます。

ちょっとおい、それは副作用があるので、私はそれがハックだったと思います:位置が変更されました。

このスレッドは、閉じられた後に最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。

このページは役に立ちましたか?
1 / 5 - 1 評価