i have a canvas and inside this canvas, i have images and other stuff, in addition to that, there is a measurement tool, to measure the length of smth inside the canvas. now i need the measurement tool to behave in two different modes:
- Line measurement:
this is triggered by two clicks, first click determine the first point of the line, and the second click determine the end point of the line.
- Area measurement: this is triggered by one click as follows:
a. mouseDown: determine the first point of the area.
b. mouseMove: selecting the area while mouse is down.
c. mouseUp: determine the end point of the area.
I tried to trigger both by different ways, but the best way still have some issues.
My approach: using YUI lib to define Events
Event.on(canvas,"mousedown", mousedown);
Event.on(canvas,"mousemove", mousemove);
Event.on(canvas,"mouseup", mouseup);
define these three event listeners.
- Mouse Down: in this function i store the Date.now() and set initially the area measurement. in addition to settimeout call back after 300ms, i check if the mouse still down, if so, set the mode to area measurement.
Mouse Move: draw the selected mode.
Mouse Up: here i check the Date.now(), if the click is less than 300ms, convert the mode to line and call MouseMove().
But this approach have some issues in the first 300ms, its ambiguous which mode the user wants. using my approach the code knows the mode after 300ms, but before 300ms, it can't be known.
So any helps to improve this approach or setting a new one?
