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

Question

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

Answer 1

兰尼提到你在这里有这个问题。基于 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 网站上的文档中阅读有关所有这些的各种选项。

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

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

Drag to resize a bitmap with createJS & Canvas

html5-canvas

createjs