画布图像调整大小/扭曲/拖放

Question

7

我正在尝试构建一个应用程序，人们可以上传图片，我希望能够使人们拖动图像的角并扭曲它。但是我不知道从哪里开始，也找不到任何示例。

我有一个flash示例：http://configurator.cando.eu/popup.html - 点击“Cando Stijlkamer” - 单击其中一种背景 - 在顶部选择步骤2“Kies uw deur” - 双击门，并再次在底部双击 - 现在您可以拖动角落。

示例图像：

有谁知道如何实现这个功能吗？

更新：开始使用ThreeJS进行WebGL，目前我已经得到了一个立方体，并且可以透视，缩放和偏斜它。但是角落不灵活。

更新2：创建了一个具有可拖动角落的自定义几何形状。

- Niels

6

做实时的扭曲效果，看起来更适合使用WebGL技术。 - Philipp

@Philipp：点赞，因为它指向了远离画布或SVG，因为它们的3x3变换矩阵不支持非平行扭曲。 - markE

就像@Philipp所说，这是WebGL的一个问题。你的问题看起来和这个很相似：https://dev59.com/xWTVa4cB1Zd3GeqP-wL2 请检查一下。 - MarkSmits

我已开始使用ThreeJS，许多事情都变得可能了，除了几何体，我需要在渲染时创建自己的几何体吗？ - Niels

@Niels，你能分享一下你的解决方案的例子吗？或者指点我一下方向？我也在寻找同样的东西。 - user2424495

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Panayotoff · Accepted Answer

我可以向您展示如何在Flash中轻松实现此效果。但是，如果您需要使用HTML5，我建议使用https://github.com/edankwan/PerspectiveTransform.js而不是Canvas元素。