جافاسكريبت - التحويل المنظوري لكائن مملوء بصورة في FabricJS

لدينا بعض الكائنات المملوءة بمصدر الصورة. هل من الممكن تحقيق تحويل منظور للصورة المملوءة مع تعديل مواقع الشبكة المستطيلة في Fabric JS؟

أنا أحاول تحقيق شيء مشابه للصورة أعلاه في Fabric JS....

الإجابة رقم 1

تشويهات المنظور الحقيقية غير ممكنة مع FabricJS أو مكتبات اللوحات الثنائية الأبعاد الأخرى.

سياق 2D في Canvas لن يقوم بالتحويلات المنظورية.

تستخدم معظم مكتبات الكانفاس، بما في ذلك fabricJS، السياقات ثنائية الأبعاد.

هناك سياق ثلاثي الأبعاد في اللوحة القماشية -- WebGL سيقوم بمحاكاة جيدة لتحويلات المنظور.

مكتبة threeJS التي أنشأها mrdoob هي مكتبة سياق ثلاثي الأبعاد جيدة:

http://mrdoob.github.io/three.js/

[ إضافة: التحريف غير المنظوري ممكن (النتائج دائمًا موازية للأصل) ]

في FabricJS لديك السيطرة الكاملة على مصفوفة التحويل.

يمكنك استخدام تلك المصفوفة لإجراء الإزاحة الموازية فقط.

إليك Fiddle: http://jsfiddle.net/m1erickson/Rq7hk/

كيف :

تأخذ fabricObject.transformMatrix مصفوفة من 6 عناصر، حيث يمثل كل عنصر جزءًا من مصفوفة التحويل الأفيني.

في تلك المصفوفة، العنصران الثاني والثالث يمثلان الإزاحة المائلة في المحور الصادي والإزاحة المائلة في المحور السيني.

لذلك لإنشاء skewY الخاص بك، يمكنك إنشاء مستطيل هكذا:

var rect = new fabric.Rect({
  left: 150,
  top: 150,
  width: 75,
  height: 50,
  fill: 'green',
  angle: 0,
  padding: 10,
  transformMatrix:[1,.30,0,1,0,0]
});

الإجابة رقم 2

لقد وجدت حلاً لـ fabricjs، باستخدام المضلع و php-imagemagick. يمكنك دمج الاثنين.