Pixi.js: يؤثر المحور على موضع الكائن

تم إنشاؤها على ٦ يوليو ٢٠١٣  ·  24تعليقات  ·  مصدر: pixijs/pixi.js

لدي سؤال فيما يتعلق بالخاصية المحورية لـ DisplayObject. على وجه الخصوص ، أريد تدوير DisplayObjectContainer حول مركزها ؛ لذلك قمت بتعيين المحور على نقطة المركز الخاصة به. ومع ذلك ، فقد لاحظت أن هذا يؤثر على موضع العنصر.

على سبيل المثال ، إذا قمت بتعيين الموضع على 0،0 (وهو الوضع الافتراضي) ، فستحاول وحدات البكسل وضع الكائن وفقًا لنقطة المركز وليس الزاوية اليسرى العليا. لذا فإن العناصر الفرعية لـ DisplayObjectContainer (والتي في حالتي هي مثيل لفئة الرسومات) تنفد من الحافتين اليسرى والعلوية لإطار العرض.

هل هناك أي طريقة لتعيين نقطة الاستدارة مع استمرار وضع الكائن بالنسبة إلى الزاوية اليسرى العلوية.

🕷 Bug

التعليق الأكثر فائدة

في رأيي ، أسهل طريقة لتدوير رسم (أو حاوية) حول نقطة مركزه هي حفظ إحداثيات النقطة المركزية ، حيث تم رسم الرسم. بعد ذلك ، عيّن الموضع ومحور الرسم إلى نقطة المركز.
هنا مثال:

إذا قمت على سبيل المثال بإنشاء كائن رسومي ، فيمكنك البدء في رسم العناصر الأولية عليه.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
يتم دائمًا رسم العنصر البدائي بالنسبة إلى موضع كائن الرسومات (وهو 0 افتراضيًا).
لذلك ، نحتاج إلى ضبط الموضع الجديد للكائن الرسومي على 200 ، لأنه نقطة المركز الحالية للبدائي.
test.position.x = 200; test.position.y = 200;
يمكننا الآن أن نرى أن العنصر البدائي قد تم إزاحته ، لذلك نحتاج إلى ضبط المحور على نفس الإحداثي وسيبقى في نفس الموضع ، حيث رسمناه.
test.pivot.x = 200; test.pivot.y = 200;

خاصية pivot ليست عربات التي تجرها الدواب ، إنها محيرة قليلاً لفهم كيفية عملها ولماذا "تؤثر على موضع الكائن". يدور الكائن دائمًا حول موضعه ويساعدنا المحور على تعيين نقطة جديدة من حيث يدور.

ال 24 كومينتر

تمكنت من القيام بذلك عن طريق ضبط محور وموضع الرسومات على مركزها ، ثم قمت برسم الرسومات حول هذه النقطة.

أجبت على سؤالك حول stackoverflow مع مثال رمز هنا: http://stackoverflow.com/questions/17505169/pixi-js-pivot-affects-object-position/18007977#18007977

GoodBoyDigital @ هل يؤثر المحور على الموقف ، وإذا كان الأمر كذلك ، فهل هذا حل سريع؟

لقد تم الخلط بيني وبين pivot و anchor ، فهل يمكن دمجهما؟

حسنًا ، pivot و anchor مختلفان (من الناحية النظرية). يؤثر المحور على نقطة الاستدارة ، بينما نقطة الارتساء هي الأصل (نقطة الموضع). لست متأكدًا من استخدام المحور بشكل صحيح.

يبدو أن هذا يمكن استخدامه كنقطة واحدة. لم أر في الواقع هذه منفصلة من قبل في العرض (أصل تحويل css ، تسجيل فلاش) هل كانت هناك حالة استخدام لهذا السبب؟ إذا كان الأمر كذلك ، فهل يمكن أن يكون كل شيء افتراضيًا لشيء واحد ، ثم يستخدم آخر إذا تم تعيينه؟

ربما بشكل افتراضي للإرساء في كل مكان بما في ذلك التدوير ، ما لم يكن المحور هو نقطة ، استخدم ذلك للدوران؟

تحديث : أو العكس مما ورد أعلاه ، على الرغم من أنني أميل نحو _anchor = افتراضي_ ، و _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 أعتقد أنك بحاجة إلى استخدام المرساة لأنك تستخدم Sprites.

هل سيتم إصلاح هذا السلوك في الإصدار 4؟

قررت أن أجرب Pixi وضربت هذا "الخطأ" على الفور.
بعد بضع ساعات من استخدام googling ، ما زلت لا أفهم كيف يُفترض أن يعمل هذا.
يقول معظم الأشخاص في المنتديات "السلوك المحوري معطل". ليس مفيدًا جدًا.

ولا أخشى من تعليقك. هذه هي الطريقة التي يتعامل بها pixi مع pivot.
إذا كان هذا "الخطأ" أكثر من اللازم ، يرجى تقديم العلاقات العامة أو الركض ..

في يوم الخميس الموافق 10 مارس / آذار 2016 ، كتب Ivan Kleshnin [email protected] :

_هل سيتم إصلاح هذا السلوك في الإصدار 4؟ _

قررت أن أجرب Pixi وضربت هذا "الخطأ" على الفور.
بعد بضع ساعات من استخدام googling ، ما زلت لا أفهم كيف يفترض أن يحدث ذلك
عمل.
يقول معظم الأشخاص في المنتديات "السلوك المحوري معطل". ليس جدا
معاون، مساعد، مفيد، فاعل خير.

-
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub
https://github.com/pixijs/pixi.js/issues/190#issuecomment -194833811.

مات غروفز

_ الشريك الفني_

هاتف: 07708 114496 :: www.goodboydigital.com
الطابق الأول ، الوحدة 9 ب ، كوينز يارد ، وايت بوست لين ، لندن ، E9 5EN
goodboy ©. كل الحقوق محفوظة.

ولا أخشى من تعليقك

من فضلك لا تأخذ "غير مفيد جدا" شخصيا.
كان من المفترض أن أصف حالتي العاطفية ، وليس الإساءة.

إذا كان هذا "الخطأ" أكثر من اللازم ، يرجى تقديم العلاقات العامة أو الركض ..

لا أعرف ما إذا كان هذا خطأ أم لا لأنني مستجد في هذه الصناعة.
لهذا السبب وضعت كلمة "خطأ" أعلاه في علامات الاقتباس. بعض الناس يعتبرونه كذلك. البعض - ليس كذلك.
لقد شاركت تجربتي للتو وسألت عن التغيير في الإصدار 4. كنت أرغب حقًا في تعلم Pixi لكن هذا أخذني.

المشكلة الرئيسية: بعد قراءة> 10 مشكلات ذات صلة (هنا وعلى الإنترنت) ما زلت لا أعرف كيفية حل هذا السلوك وإجبار الحاوية على الدوران حول مركزها في نقطة محددة من الفضاء.
وأنا لست بهذا الغباء بشكل خاص.

مرحبا!

لا تقلق يا رجل ، آسف إذا كنت قصيرًا بعض الشيء ، لقد أمسكت بي في نهاية يوم طويل!

من المفترض أن يتصرف Pivot كنقطة ارتساء غير طبيعية.

أسهل طريقة لإصلاحها هي إضافة الكائن إلى حاوية وتدوير الحاوية ، مع تحريك الكائن داخليًا.

امل ان يساعد!

ليس هناك أى مشكلة. ثانكس. سأحاول استخدام نصيحتك.

في رأيي ، أسهل طريقة لتدوير رسم (أو حاوية) حول نقطة مركزه هي حفظ إحداثيات النقطة المركزية ، حيث تم رسم الرسم. بعد ذلك ، عيّن الموضع ومحور الرسم إلى نقطة المركز.
هنا مثال:

إذا قمت على سبيل المثال بإنشاء كائن رسومي ، فيمكنك البدء في رسم العناصر الأولية عليه.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
يتم دائمًا رسم العنصر البدائي بالنسبة إلى موضع كائن الرسومات (وهو 0 افتراضيًا).
لذلك ، نحتاج إلى ضبط الموضع الجديد للكائن الرسومي على 200 ، لأنه نقطة المركز الحالية للبدائي.
test.position.x = 200; test.position.y = 200;
يمكننا الآن أن نرى أن العنصر البدائي قد تم إزاحته ، لذلك نحتاج إلى ضبط المحور على نفس الإحداثي وسيبقى في نفس الموضع ، حيث رسمناه.
test.pivot.x = 200; test.pivot.y = 200;

خاصية pivot ليست عربات التي تجرها الدواب ، إنها محيرة قليلاً لفهم كيفية عملها ولماذا "تؤثر على موضع الكائن". يدور الكائن دائمًا حول موضعه ويساعدنا المحور على تعيين نقطة جديدة من حيث يدور.

مرحبا يا شباب! هل يمكنني استخدام المحور مع الزوايا؟ أحاول تعديل زاوية كائن واحد (باستخدام المحور لتعديل موضع الدوران) لتتبع الماوس ، لكن لا يمكنني ذلك ، هل يمكنك مساعدتي ، من فضلك؟

تحقق من مثال codepen الخاص بي => http://codepen.io/jdnichollsc/pen/KgdRvV؟editors=0010
والخطأ => http://screencast.com/t/hSSaaTO4j0

شكرا مقدما ، نيكولز

منجز! فقط باستخدام pivot.y أو pivot.x hahaha! شكرا لجميع فريق Pixi! : +1:

في رأيي ، أسهل طريقة لتدوير رسم (أو حاوية) حول نقطة مركزه هي حفظ إحداثيات النقطة المركزية ، حيث تم رسم الرسم. بعد ذلك ، عيّن الموضع ومحور الرسم إلى نقطة المركز.
هنا مثال:

إذا قمت على سبيل المثال بإنشاء كائن رسومي ، فيمكنك البدء في رسم العناصر الأولية عليه.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
يتم دائمًا رسم العنصر البدائي بالنسبة إلى موضع كائن الرسومات (وهو 0 افتراضيًا).
لذلك ، نحتاج إلى ضبط الموضع الجديد للكائن الرسومي على 200 ، لأنه نقطة المركز الحالية للبدائي.
test.position.x = 200; test.position.y = 200;
يمكننا الآن أن نرى أن العنصر البدائي قد تم إزاحته ، لذلك نحتاج إلى ضبط المحور على نفس الإحداثي وسيبقى في نفس الموضع ، حيث رسمناه.
test.pivot.x = 200; test.pivot.y = 200;

خاصية pivot ليست عربات التي تجرها الدواب ، إنها محيرة قليلاً لفهم كيفية عملها ولماذا "تؤثر على موضع الكائن". يدور الكائن دائمًا حول موضعه ويساعدنا المحور على تعيين نقطة جديدة من حيث يدور.

مرحبًا يا صاح ، أعتقد أن هذا كان اختراقًا ، لأنه كان له آثار جانبية: تم تغيير الموقف.

تم قفل سلسلة الرسائل هذه تلقائيًا نظرًا لعدم وجود أي نشاط حديث بعد إغلاقه. الرجاء فتح قضية جديدة للأخطاء ذات الصلة.

هل كانت هذه الصفحة مفيدة؟
1 / 5 - 1 التقييمات

القضايا ذات الصلة

courtneyvigo picture courtneyvigo  ·  3تعليقات

finscn picture finscn  ·  3تعليقات

samueller picture samueller  ·  3تعليقات

Darker picture Darker  ·  3تعليقات

SebastienFPRousseau picture SebastienFPRousseau  ·  3تعليقات