如何创建矩形，通过鼠标拖动其角来创建四边形，并用图像填充它

Question

我有一个朋友，他打算建立一个网站，需要的是：

他希望用户能够绘制四边形（无论是逐点还是创建矩形，然后通过拖动变换每个角落），然后用任何图像填充它。图像必须包含通过绘制四边形获得的相同变换。

HTML5上有可能吗？也许有些JS带库？

感谢您的帮助。

注意：这是我所说的example ..

PS - 找到解决方案 - http://www.html5.jp/test/perspective_canvas/demo1_en.html

Answer 1

是的，有可能。是的，你需要使用一些JavaScript库。

Answer 2

这是一个好的起点（靠近页面末尾）：

http://www.w3schools.com/html/html5_canvas.asp

有点不清楚他究竟想做什么。我不知道有任何方法裁剪或修改（实际更改）只有HTML5和Javascript的图像。但仅出于显示目的，您可以使用HTML5和JS在网站上使它看起来不同。

Answer 3

看看https://github.com/edankwan/PerspectiveTransform.js。我认为这正是你所需要的

Answer 4

您要找的是projective transformation。

  

点A，B，C，D和A'，B'，C'，D'与透视相关，这是一种投射变换。

Martin von Gagern已在此处作出了很好的解释：https://math.stackexchange.com/a/339033/332080

基本上你只需要这些辅助函数和一点时间来阅读Martin已写的内容：

• Mat3#transform
• Mat3#adjugate
• Mat3#multiply