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
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);
© 2024 OneMinuteCode. All rights reserved.