使用 createJS 和 Canvas 拖动以调整位图大小

Posted 2023-03-25

【中文标题】使用 createJS 和 Canvas 拖动以调整位图大小

【英文标题】：Drag to resize a bitmap with createJS & Canvas

【发布时间】：2021-08-26 14:42:45

【问题描述】：

我正在开发一个基本的设计应用程序，用户可以将图像上传到画布，拖动它们并调整它们的大小。我遇到的问题是用鼠标拖动调整图像大小。我希望用户将鼠标指针放在位图图像的任一角上，然后向或远离位图拖动以按比例调整其大小。如有任何代码或建议，我将不胜感激。

【问题讨论】：

你已经尝试过什么？这不是一件小事，但是您可以监听 mousedown 以确定您按下的位置（即：它是在边缘还是角落），然后监听 mousemove (dragmove) 并根据您的拖动适当调整 scaleX/scaleY方向。我建议单独尝试此操作并发布具体问题。

【参考方案1】：

Lanny 提到你在这里有这个问题。基于 CreateJS 的 ZIM 内置了这个功能 - 它被称为 transform()。我们还内置了一个名为 Loader() 的上传器。

这是您将在 ZIM 模板中使用的代码，该模板位于 ZIM https://zimjs.com 的代码页上

const loader = new Loader().center();
loader.on("loaded", e=>
    e.bitmap.center().transform();
    // or if you want multiple files
    // loop(e.bitmaps, bitmap=> 
    //     bitmap.center().transform();
    // );
    loader.removeFrom();
    stage.update();
);

下面是已加载的图像。你可以在这里试试https://zimjs.com/explore/uploadresize.html。当用户单击图像时，变换界面将消失，然后在单击图像时返回。您可以在 ZIM 网站上的 Docs 中阅读所有这些选项的各种选项。

你所有的常规 CreateJS 都可以工作，你会发现 ZIM 在许多其他方面也很有帮助！除了 transform() 之外，还有用于正常拖动的 drag() 和用于缩放和旋转的手势 () - 您可以使用其中一个或另一个不组合。

【讨论】：

哇，这是我用过的最简单的库。非常感谢你的回复。使用您的库在阅读文档后几分钟内就解决了我的问题。我确实遇到了一个问题——在“转换”参数中将“customCursors”设置为 false 会导致一些错误行为。我正在使用 Adob​​e Animate 进行开发，所以想知道这是否与它有关。除此之外，我尝试过的一切都运作良好。谢谢。

谢谢 Rob - 很高兴它成功了。 ZIM 有 ZIM Shim for Animate - 您可以在网站zimjs.com/code 的代码部分找到它。我们还可以查看任何错误 - 我们在 Slack 频道（还有一个#animate 频道）上跟踪和讨论这些错误。 zimjs.com/slack