When implementing the drawing tool in canvas, I have a question about how to change the size of the figure.

Asked 2 months ago, Updated 2 months ago, 4 views

I would like to create this kind of drawing tool on the web browser.
https://dl.dropboxusercontent.com/u/429437/html5/seminar/05-draw-tool1.html

I understand that this is done using the canvas tag.
Beforehand, I understood how to draw when the coordinate axis is known (the user does not set the coordinate axis).

http://tsukinihinikeni.blogspot.jp/2012/02/canvas_05.html

I think the following two points are the key points of the drawing tool I want to do this time.

1) Users can draw whatever size they want in the position they want
2) Real-time size changes are visible when changing sizes

However, I am at a loss as to how to implement them.

As for 1) I have a vague understanding of whether I should obtain the coordinate axis of the user and draw a figure based on the starting point and the ending point.
You can also find out how to get coordinates.

However, I didn't know how to do it so that I could see how the size of 2) was changing.
If the drawing method is done after the start and end points are determined, it will be easy to implement, but since the size has changed to real-time?, how
I don't know if I should implement it.

Could someone lend me some wisdom?

Thank you for your cooperation.

javascript html5 html5-canvas

2022-09-30 11:33

1 Answers

You have a page to refer to, so why don't you check the source?

https://dl.dropboxusercontent.com/u/429437/html5/seminar/05-draw-tool1.html

For example, you can see that the following techniques are used to redraw the mouse in real time.

//mousemove handling
    canvas.addEventListener("mousemove", function(e){
        var bcr, x, y, dx, dy;
        bcr=e.target.getBoundingClientRect();
        x = e.clientX-bcr.left;
        y = e.clientY-bcr.top;
        dx = x-pre.x;
        dy = y-pre.y;
        pre.x = x;
        pre.y = y;
        If(drawing) {//Drawing figure
            shapeList.draw(context);
            shape.resize(dx,dy);
            shape.draw(context);
        } else if(moving) {//Moving figure
            shapeList.move(dx,dy);
            shapeList.draw(context);
        } else if (resizing) {// Resize figure
            shapeList.resize(dx,dy);
            shapeList.draw(context);
        }
    }, true);


2022-09-30 11:33

If you have any answers or tips


© 2022 OneMinuteCode. All rights reserved.