html5-canvascreatejs

Drag to resize a bitmap with createJS & Canvas


I'm working on a basic design app where the user can upload images to a canvas, drag them around and resize them. The problem I have is resizing the image with a mouse drag. I'd like the user to position the mouse pointer on either corner of the bitmap image and drag either towards or away from the bitmap to resize it proportionally. I'd be grateful for any code or suggestions.


Solution

  • Lanny mentioned that you had this question here. ZIM, which is based on CreateJS has this functionality built in - it is called transform(). We also have an uploader built in called Loader().

    Here is the code that you would use inside the ZIM template available on the code page at 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();
    });
    

    Below is an image that has been loaded. You can try it here https://zimjs.com/explore/uploadresize.html. The transform interface will go away when the user clicks off the image and then comes back when they click on the image. There are various options for all of this that you can read about in the Docs available on the ZIM site.

    All your regular CreateJS will work and you will find that ZIM is helpful in many other ways too! Aside from transform() there is drag() for normal dragging, and gesture() for pinch zoom and rotate - you would use one or the other of these not combined.

    enter image description here