Javascript Line Drawing and Image Region Selection
What this code can do:
Draw lines on a
<div>
containing an
<img>
Incrementally draw a polygon on an image
Detect incomplete or tangled (edge crossed) "polygons"
Get a finished polygon description, as verticies or scan lines
Augment Object with beget method as per
this description
.
For more detail, see the module API at the beginning of
the module
, or view the source for this page (which uses it). This page contains an example of the rather picky business of connecting drawing functions to mouse events.
Download
Download the module
.
Try it
Click image to draw polygon verticies
Control-click to undo the last vertex
Show Verticies
Show Scan Lines
Output: