Перспектива Преобразование объекта, заполненного изображением в fabricjs

Question

У нас есть некоторые объекты, заполненные источником изображения. Возможно ли достичь перспективного преобразования заполненного изображения с помощью регулировки прямоугольных позиций сетки в ткани js?

я пытаюсь добиться похож на изображении выше в ткани JS ....

Answer 1

Истинные перспективные искажения не представляется возможным с FabricJS или других 2d библиотек холст.

Контекст Canvas 2d не будет преобразовывать перспективы.

Большинство библиотек холста, включая fabricJS, используют 2d контекста.

Существует трехмерный контекст холста - webGL, который будет хорошо имитировать перспективные преобразования.

Библиотека threeJS от mrdoob является хорошим 3d контекста библиотеки:

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

[добавление: без перспективы перекос возможен (результаты всегда параллельны к оригиналу)]

В fabricJS у вас есть полный контроль над матрицей преобразования.

Вы можете использовать эту матрицу для параллельного перекоса.

Вот Фидл: http://jsfiddle.net/m1erickson/Rq7hk/

Как:

fabricObject.transformMatrix принимает массив из 6 элементов с каждым элементом, представляющим части аффинной матрицы преобразования.

В этой матрице 2-й и 3-й элементы представляют SkewY и SkewX.

Итак, чтобы создать свой 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] 
});