使用点的HTML5画布drawImage？

Question

我需要用4点画一个图像.我将这4个点存储在一个数组中,这些位置发生了变化.现在我需要绘制一个反映这些位置的图像.context.drawImage只接受1个位置.

它应该是这样的,4个职位:

x,y----------x,y
 |            |
 |            |
 |            |
 |            |
 |            |
x,y----------x,y

Answer 1

Quad Warping是您所需要的,没有复杂的3D

您要求将矩形图像渲染为可能的非矩形四边形.

正确的方法是计算变换矩阵,不需要渲染真正的3D内容.这是在计算Homography矩阵时完成的.为此,您需要了解转换矩阵并实现一些代码来解决某些方程式.

这个过程很好理解,并且需要原始的四个坐标和目标四个点,并且您拥有它们,因此您只需要一个过程来计算变换矩阵.该矩阵基本上通过高斯 - 乔丹消除来计算.

在矩阵求解器和一般程序上检查这一点.一旦你理解了转换,它就变得微不足道了.同时检查这一点以了解单应性是什么.而在这里它解释它是如何计算的,与JavaScript和CSS的样品.