我需要使用 4 个点绘制图像。我将这 4 个点存储在一个数组中，这些位置会发生变化。现在我需要绘制一个反映这些位置的图像。context.drawImage 只接受 1 个位置。
应该是这样的，4个位置：
x,y----------x,y
| |
| |
| |
| |
| |
x,y----------x,y
问问题
2108 次
2 回答
6
Quad Warping 是您所需要的，没有复杂的 3D
您要求将矩形图像渲染为可能的非矩形四边形。
正确的做法是计算变换矩阵，无需渲染真实的 3D 内容。这是通过计算单应矩阵来完成的。为此，您需要了解变换矩阵并实现一些代码来解决一些方程。
这个过程很好理解，需要原始的四个坐标和目标的四个点你有，所以你只需要一个计算变换矩阵的过程。这个矩阵基本上是通过 Gauss-Jordan 消元法计算出来的。
检查矩阵求解器和一般程序。一旦你理解了转换，它就变得微不足道了。还要检查这个以了解什么是单应性。这里解释了它是如何计算的，带有 javascript 和 CSS 的示例。
演示
这是一个很棒的演示，带有源代码和解释。
于 2015-06-15T20:21:56.403 回答
4
您正在寻找的是用 3D 渲染语言绘制四边形。
您通常将您的形状拆分为 2 个三角形（面）并使用纹理填充单独绘制它们。
这是该问题的（复杂）解决方案：https ://github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js#L838 Three.js 3D引擎使用2D<canvas>作为渲染引擎。
由于事情不是那么简单，我建议您使用 Three.js 或类似的包装器，它提供了对纹理面部操作的高级抽象。查看其他 Three.js 2D<canvas>示例，您就会了解它的工作原理：
于 2012-05-19T07:14:06.083 回答