拉伸图像以适合任何四边形
应用程序 PhotoFiltre 具有拉伸部分图像的选项。您选择一个矩形形状，然后可以抓取顶点并将其移动到其他位置以形成任何四边形。您选择的图像部分将随之拉伸。希望这些图片能让我的观点更清楚一些：
是否有通用算法可以处理这个问题？我希望在 HTML5 画布上获得相同的效果 - 给定图像和生成的角点，我希望能够以整齐地填充新四边形的方式绘制拉伸图像。
不久前，我问了类似的事情，解决方案是分割图像形成三角形并拉伸每个三角形，使每三个点对应于原始图像上的三个点。事实证明这种技术相当昂贵，我希望是否有一种更通用的方法来实现这一点。
我想在 3D 渲染器中使用它，但我想使用 (2D) 四边形。
我不知道 PhotoFiltre 内部是否也使用三角形，或者它是否使用另一种（更便宜的）算法来拉伸这样的图像。
有人可能知道是否有更便宜或更通用的方法/算法来拉伸矩形图像，以便它填充给定四个点的四边形？
The application PhotoFiltre has an option to stretch part of an image. You select a rectangular shape and you can then grab and move the vertexes somewhere else to make any quadrangle. The image part which you selected will stretch along. Hopefully these images make my point a little clearer:
Is there a general algorithm which can handle this? I would like to obtain the same effect on HTML5 canvas - given an image and the resulting corner points, I would like to be able to draw the stretched image in such a way that it fills the new quadrangle neatly.
A while ago I asked something similar, where the solution was to divide the image up in triangles and stretch each triangle so that each three points correspond to the three points on the original image. This technique turned out to be rather exprensive and I would like if there is a more general method of accomplishing this.
I would like to use this in a 3D renderer, but I would like to work with a (2D) quadrangle.
I don't know whether PhotoFiltre internally also uses triangles, or whether it uses another (cheaper) algorithm to stretch an image like this.
Does someone perhaps know if there is a cheaper or more general method/algorithm to stretch a rectangular image, so that it fills a quadrangle given four points?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
正常的方法是从目标开始，选择适当的网格大小，然后为新形状中的每个点计算源图像中的对应点（可能根据您需要的质量进行插值）
The normal method is to start with the destination, pick an appropriate grid size and then for each point in the new shape calculate the corresponding point in the source image (possibly with interpolation depending on the quality you need)
仿射变换。
给定“拉伸”图形的四个点和它应该匹配的图形（例如矩形）的四个点，仿射变换可以提供您需要的空间映射。对于原始图像中的每个点 (x1,y1)，第二个“拉伸”图像中都有一个对应的点 (x2,y2)。
对于拉伸图像中的每个整数值像素 (x2, y2)，使用仿射变换找到原始图像中对应的实值点 (x1, y1)，并将其颜色应用于 (x2,y2)。
http://demonstrations.wolfram.com/AffineTransform/
您将找到 Java 和其他语言的示例代码在线语言。 .NET 有 Matrix 类。
Affine transform.
Given four points for the "stretched" figure and four points for the figure it should match (e.g. a rectangle), an affine transform provides the spatial mapping you need. For each point (x1,y1) in the original image there is a corresponding point (x2,y2) in the second, "stretched" image.
For each integer-valued pixel (x2, y2) in the stretched image, use the affine transform to find the corresponding real-valued point (x1, y1) in the original image and apply its color to (x2,y2).
http://demonstrations.wolfram.com/AffineTransform/
You'll find sample code for Java and other languages online. .NET has the Matrix class.