|
home / programming / javascript / gr / column20 / 1 |
   [previous][next] |
The demo shown on page one is made from a collection of JavaScript components that fall into three categories; core, graphics and canvas. Each category is represented by its own JavaScript file.
The core.js file contains useful utilities such as:
The graphics.js file contains an object oriented JavaScript graphics package that I presented about 2 years ago.
The canvas.js file contains a new class called Canvas that binds the mouse input from the use with the graphics package.
The bindEvent() function is an enhancement to the JavaScript Function object that allows a member function of an object to be used as a callback function. Like everything else in JavaScript, functions are objects, complete with prototypes. Calling bindEvent() on an object method creates a new function that encapsulates the object with the method and returns the new function so that it may be used as a callback.
The three mouse handlers work together to give the user the ability to make marks on the canvas element by clicking and dragging over the canvas.
The onMouseDown() and onMouseMove() functions both calculate the mouse position using the getMousePos() method to subtract the window coordinates of the top left corner of the canvas from the mouse position.
Note that this calculation must be done in full each time in case the position of the canvas changes between mouse events.
|
home / programming / javascript / gr / column20 / 1 |
[previous][next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
URL: http://webreference.com/programming/javascript/gr/column20/1
