كيف يمكنني التنافس على مصفوفة التحويل اللازمة لتحويل مستطيل إلى شبه منحرف؟

Question

أنا ألعب مع تحويلات CSS والمرشحات المكافئة في IE ، وأريد محاكاة المنظور عن طريق تحويل مستطيل ثنائي الأبعاد إلى شبه منحرف.

على وجه التحديد ، أريد أن يبقى الجانب الأيمن من المستطيل بنفس الارتفاع ، ويقول الجانب الأيسر 80 ٪ من الارتفاع ، بحيث تكون النقاط المتوسطة من كلا الجانبين تتماشى أفقياً مع بعضها البعض.

أنا على دراية بجبر المصفوفة ، لكن لا يمكنني التفكير في كيفية تحديد ما ستفعله المصفوفة.

Answer 1

للإسقاط ، سأستخدم مصفوفة 4x4:

1    0    0    0
0    1    0    0
0    0    0    0
0    0    1/d  1

يعمل هذا على الإحداثيات المتجانسة (D هي مسافة العين من مستوى الإسقاط ، في إعداد منظور قياسي).

بديل:

لتجنب العمل مع الإحداثيات المتجانسة (أو إذا لم تتمكن من استخدام مصفوفات 4x4 ، أو إذا لم تتمكن من استخدام تسريع الأجهزة لتحويل المصفوفة على أي حال), ، فقط استخدم هذا:

x' = (d*x)/(z+d)
y' = (d*y)/(z+d)
z' = 0 (it's always projected onto the projection plane)

راجع للشغل ، هذا أيضًا يجيب بشكل أساسي على سؤالك المنحرف. فقط ضع مستطيلك بشكل صحيح في الفضاء ثلاثي الأبعاد - ليس من الصعب معرفة كيف: فقط تخيل لوحة مستطيلة على الحائط على الجانب الأيمن. ثم خفض نقطة عينيك لتكون مستوية مع أسفل اللوحة. الآن سيتم عرضه باعتباره شبه منحرف.

Answer 2

آه - التفكير أكثر قليلاً ، 2D يمكن أن تحولات المصفوفة فقط تدوير أو تميل أو تحويل. هذا يعني أن الخطوط المتوازية قبل التحول متوازية بعد ذلك.

سأترك هذا السؤال هنا في حال وقع أي شخص آخر في نفس خط التفكير!

Answer 3

يمكنك تحقيق ذلك من خلال تحويل CSS3 الجديد Matrix3D والذي سيمنحك القدرة على استخدام مصفوفة 4x4 المذكورة.

Answer 4

هناك إجابات لهما في:

كيف تميل الصورة مثل هذا

واحد للتحول القائم على الشريط والذي يجب أن يكون جيدًا بما يكفي للسؤال الأصلي (تحويل مستطيل إلى شبه منحرف):

https://stackoverflow.com/a/10427836/6336464

والآخر أكثر تعقيدًا بعض الشيء ولكنه يسمح بتحويل مخصص يعتمد على البكسل استنادًا إلى مصفوفة 4x2 (تحويل مستطيل إلى رباعي محدب حيث يمكن تحديد كل ركن من أركان الرباعي مخصصًا):

https://stackoverflow.com/a/37236664/6336464