After some weeks of frantic marking and other administrative affairs, I finally had the chance to sit down this week and work on the Javascript-based app using Raphael.
I discovered that one can indeed access drawing objects with the JQuery Javascript library, provided one adds an "id" attribute and refers to the "original" object. So if, for example, one creates an object as follows:
var paper = Raphael("container", 640, 480);
var square = paper.rect(50, 50, 20, 20);
square.attr({
"fill":"#b34300",
"id":"square",
});...one can only access attributes of the object like this:
square.attr("x");...and not this (using Jquery):
$("#square").attr("x");I think this reflects the very complicated nature of Raphael and, in fact, SVG or VML drawing. (Take any comments about VML with a grain of salt though because I haven't got any of this to work in IE yet.) At least, the structure of SVG and its child objects seems to be very complex if the Firefox DOM Inspector tool provides any indication!
Anyway, I tried the tricks that I alluded to previously: that is, attaching mousemove and mouseup handlers to the "canvas" rather than the object being clicked and dragged. And it works a treat.
There is still the problem of rotating the object. It's probably more obvious in this example than in the previous one. Click on the "Rotate" button to rotate the square 45 degrees clockwise. When you drag the mouse straight up or down, the object moves diagonally. When "Unrotate" is clicked, it shifts position as its coordinate system is re-aligned with the canvas's. Rotating any object also rotates its coordinate system.
I don't know if this is a side-effect of Raphael or the underlying SVG or VML. Any ideas?
...href="http://spanspek.org/what-is-spanspek" title="What is spanspek?">What is spanspek? « Reliable dragging using Raphael ...