| home / programming / javascript / gr / column21 / 1 |   [previous] |
The Canvas is now a View
The Canvas class has changed slightly since the last article.
Now, nested within the Doodle namespace, the Canvas class now operates on a document object (given as an argument in its constructor).
The mouse events now gain a little sophistication as they coordinate together to generate line objects.
The onMouseDown records the mouse down position and creates a line object using the graphics code.
The onMouseMove records the new mouse position, removes the previous line and creates a new one using the new positions.
The onMouseUp handler uses the two recorded end points to create a new document line object, then removes the stored properties.
Here we've extended the application by laying the foundations of a document-view architecture. The entire Doodle code-base is nested within the Doodle namespace which apart from isolating the code from any other application that may be running, will also make class naming simpler since it's no longer necessary to conjure up names that won't be used elsewhere.
We've not seen the complete benefits of document-view; all that's been done is to record the mouse events on the canvas as line objects within the document. In the next part in this series the Canvas will enable selection and the opportunity for the user to modify and delete objects after they have been drawn.
| Right click the links below and select "Save Target As" to download copies of the demo code. | |
| core.js | Core utilities and functions. |
| graphics.js | Object Oriented JavaScript graphics package |
| doodle_canvas.js | Canvas class |
| doodle_doc.js | Canvas class |
| doodle.js | Doodle application class |
| doodle.html | Simple demonstration HTML page |
While I have endeavoured to make this code as browser compatible as possible, I've only tested it with Internet Explorer (6.0), Firefox (1.5.0.4) and Netscape (7.1) as this represents of a large proportion of users.
Guyon Roche is a freelance web developer in London, Great Britain. He specializes in Windows platforms with an interest in bridging the gaps between different technologies, visit www.silver-daggers.co.uk for more details. He can be reached via e-mail at guyonroche@silver-daggers.co.uk.
| home / programming / javascript / gr / column21 / 1 | [previous] |
| ||||||||||||||||||||
Created: March 27, 2003
Revised: Sept 27, 2006
URL: http://webreference.com/programming/javascript/gr/column21/1
