How to use dojox.gfx.Moveable

Submitted by jwcnmr on Wed, 04/30/2008 - 02:15.

The circles example creates each circle and then uses

new dojox.gfx.Moveable(shape3);

to make each circle draggable. How can find out where it has moved to?
If I intercept mouseup

var c3 = shape3.getShape();
var cx = c3.cx;

I find that cx (and cy) has the value of the original position, not the new dragged-to position

Login or register to post comments
Unsubscribe post

It is easy...

Submitted by eugene on Wed, 04/30/2008 - 02:35.

Moveable doesn't modify a shape, but updates a matrix on the shape. You can access matrix like that:

var matrix = shape.getTransform();

You can get new physical circle's center like that:

var matrix = circle._getRealMatrix(),

    shape  = circle.getShape(),

    center = dojox.gfx.matrix.multiplyPoint(matrix, shape.cx, shape.cy);

In simple cases when you know 100% that your application doesn't scale, skew, or rotate matrices you can simplify this code like that:

var matrix = circle._getRealMatrix(),

    shape  = circle.getShape(),

    center = {x: shape.cx + matrix.dx, y: shape.cy + matrix.dy};

If you know for sure that circle's parents (groups) don't use transformations, you can simplify it even more:

var matrix = circle.getTransform(),

    shape  = circle.getShape(),

    center = {x: shape.cx + matrix.dx, y: shape.cy + matrix.dy};

Bonus question: why Moveable doesn't modify a shape? Because it'll make it shape-specific ⇒ several versions of Moveable should be maintained ⇒ code bloat and support nightmare. Working with matrices makes it universal — you can use it to move groups simulating manipulations with complex objects.

Update: I added a description of _getRealMatrix() to dojox.gfx documentation.

how to set a limit??

Submitted by pascal8361 on Fri, 05/16/2008 - 19:20.

How can I set a limit, that shapes can only be moved within the surface?????????????? And do not "go lost" when dragged outside.

Create your own class baed

Submitted by eugene on Sat, 05/17/2008 - 00:05.

Create your own class based on dojox.gfx.Moveable, which overrides onMove() method, or just override this method directly on dojox.gfx.Moveable instances. In this method check the boundaries and modify "shift".

Search