Lets walk through how to use dojox.gfx to make drawings embedded in web pages that users can manipulate by dragging them around with their mouse (using dojo version 1.0.0).
In the page <HEAD> are the required includes to load the relevant dojo resources. At a minimum for these drawings are dojo.js and dojox.gfx. (Other dojo code may need additional dojo.require statments especially dojo.parser, and may need dojo.css as well):
<HEAD>
<script type='text/javascript'
src='../dojo/1.0.0/dojo/dojo.js'
djConfig='parseOnLoad: true'>
</script>
<script type='text/javascript'>
dojo.require('dojox.gfx'); // omit this and the rectangle doesn't draw
</script>
</HEAD>
In the <BODY>, create a DOM node that can be used as a drawing surface. Then in a script create a drawing surface (a canvas), and draw the rectangle on that surface.
<body>
<div id='drawing_surface'></div>
<script type='text/javascript'>
// createSurface(parentNode, width, height);
surface = dojox.gfx.createSurface(dojo.byId('drawing_surface'),'640px', '110px');
// draw rectangle on the surface
// createRect({}) parameters
// x: horizontal offset from left side of surface
// y: vertical offset from top of surface
// height, width: dimensions of rectangle
rectangle = surface.createRect({ x: 20, y: 5, height: 100, width: 150})
.setFill([0,0,255,0.3])
.setStroke({ color: "blue", width: 2})
;
</script>
</body>
Simply add dojox.gfx.move to the includes in the <HEAD>
<style type='text/css'>
@import '../dojo/1.0.0/dojo/resources/dojo.css';
</style>
<script type='text/javascript'
src='../dojo/1.0.0/dojo/dojo.js'
djConfig='parseOnLoad: true'>
</script>
<script type='text/javascript'>
dojo.require('dojox.gfx'); // omit this and the rectangle doesn't draw
dojo.require('dojox.gfx.move'); // omit this and the rectangle doesn't move
dojo.require('dojo.parser'); // parser and dojo.css aren't required
</script>
And make the rectangle movable by using the Movable constructor:
<div id='drawing_surface'></div>
<script type='text/javascript'>
surface = dojox.gfx.createSurface(dojo.byId('drawing_surface'),'500px', '300px');
rectangle = surface.createRect({ x: 20, y: 10, height: 100, width: 100})
.setFill([0,0,255,0.3])
.setStroke({ color: "blue", width: 2})
;
// make the rectangle draggable
new dojox.gfx.Moveable(rectangle);
</script>
The <HEAD> contains the same set of included resources.
<style type='text/css'>
@import '../dojo/1.0.0/dojo/resources/dojo.css';
</style>
<script type='text/javascript'
src='../dojo/1.0.0/dojo/dojo.js'
djConfig='parseOnLoad: true'>
</script>
<script type='text/javascript'>
dojo.require('dojox.gfx'); // omit this and the rectangle doesn't draw
dojo.require('dojox.gfx.move'); // omit this and the rectangle does't move
dojo.require('dojo.parser');
</script>
Now things get more complex. We want to make the rectangle dragabble only to the edges of the drawing surface (so that it stops moving rather than vanishing at the edge of the surrface). We will do this by using a custom Mover class rather than the default dojox.gfx.Mover. We will declare a subclass of dojox.gfx.Mover that overrides the onMouseMove method of dojox.gfx.Mover. This overridden method will need to be aware of both the limits of motion on the drawing surface and the boundaries of the rectangle. We then just need to make this rectangle movable using the custom mover:
<div id='drawing_surface'></div>
<script type='text/javascript'>
// Create a drawing surface 640 by 140 pixels in size.
surface = dojox.gfx.createSurface(dojo.byId('drawing_surface'),'640px', '150px');
// Create a rectangle on the drawing surface.
areaofinterest = surface.createRect({ x: 20, y: 10, height: 100, width: 100})
.setFill([0,0,255,0.3])
.setStroke({ color: "blue", width: 2})
;
// define limits to motion - in this case, the entire drawing surface.
var limits = { xmin: 0, xmax: 640, ymin: 0, ymax: 150};
// Extend mover with a class that overwites onMouseMove.
// We will call the class net.aa3sd.surfaceMover to prevent naming
// conflicts with any existing dojo classes
dojo.declare("net.aa3sd.surfaceMover",dojox.gfx.Mover, {
// Mover has several methods, we only need to overwrite onMouseMove.
onMouseMove: function(event) {
// getTransform() will tell us how far the shape has been moved
// from its initial position
transform = this.shape.getTransform();
// If this.shape hasn't been transformed yet
// getTransform() will return null, so we
// need to handle the special case of the first mouse movement.
if (transform==null) {
// We aren't dealing with rotations here, so we will
// just define initial values for the translations dx and dy.
transform = { dx: 0, dy: 0 };
}
// event.layerX is the mouse position in the coordinate system of the
// layer that was clicked on, the rectangle in this case
var layerx = event.layerX;
var layery = event.layerY;
if (this.click_on_rectangle==null) {
// we need to find where in the rectangle the mouse pointer is
// otherwise the rectangle will drag untill the mouse pointer
// hits the limits, rather than when the rectangel hits
// the limits.
this.click_on_rectangle = {
x: layerx - this.shape.shape.x - transform.dx,
y: layery - this.shape.shape.y - transform.dy
} // x,y of initial mouse click in coordinate system of rectangle
}
var click_on_surface = {
x: layerx - this.click_on_rectangle.x,
y: layery - this.click_on_rectangle.y
}; // x,y of mouse click in coordinate system of drawing surface
var x = event.clientX;
var y = event.clientY;
// check to see if the edges of the rectangle are within the
// limits of movement, if so, allow the rectangle to be moved
if (click_on_surface.x > limits.xmin
& click_on_surface.y > limits.ymin
& click_on_surface.x < limits.xmax - areaofinterest.shape.width
& click_on_surface.y < limits.ymax - areaofinterest.shape.height
) {
// move the rectangle by applying a translation
this.shape.applyLeftTransform({
dx: x - this.lastX,
dy: y - this.lastY
});
// store the last position of the rectangle
this.lastX = x;
this.lastY = y;
}
dojo.stopEvent(event);
}
});
// now we simply make the rectangle movable using the custom mover.
new dojox.gfx.Moveable(areaofinterest, { mover: net.aa3sd.surfaceMover });
</script>
Debugging javascript code can be complex, and trying to understand what different coordinate systems are being used by the drawing and the mouse movements can be challenging. A technique to help here is to display the coordinates on the page as the mouse moves. We can use this technique to get feedback on coordinates displayed in the page or to update form elements to store the transformation:
We will just add a div tag on the page where we want the feedback to appear, and then in the onMouseMove method replace the content of that div with some information about the current coordinates:
<div id='drawing_surface'></div>
<script type='text/javascript'>
....
dojo.declare("net.aa3sd.surfaceMover",dojox.gfx.Mover, {
onMouseMove: function(event) {
...
dojo.byId('temp').innerHTML = "event.layerX=" + layerx
+ ", event.layerY=" + layery + " event.clientX="
+ x + ", event.clientY="+ y + " transform.dx="
+ transform.dx + ", transform.dy=" transform.dy ;
dojo.stopEvent(event);
}
});
new dojox.gfx.Moveable(rectangle_d, { mover: net.aa3sd.surfaceMover_d });
</script>
<div id=temp></div>