Raphael 2 - Draw Line on Mousedown

Question

Note: The fiddle/code below works as required with Raphael 1.5.2 but fails in Raphael 2.1.0.

I'd like to create a line in Raphael 2 which is initiated by the mousedown event on a rectangle and terminated on mouseup at any location on the paper. The fiddle below works for Raphael 1.5.2 (in Chrome).

http://jsfiddle.net/sKVHk/

function Line(endX, endY, thisPaper) {    
    var end = { x: endX, y: endY };    
    var getPath = function() { return "M 15 15 L" + end.x + " " + end.y; };    
    var thisLine = thisPaper.path(getPath());    
    var redraw = function() { thisLine.attr("path", getPath()); }

    return { updateEnd: function(x, y) { end.x = x; end.y = y; redraw(); } };
};

var paper = Raphael("my-canvas",0, 0, 300, 400);
var origin = paper.rect(10, 10, 10, 10).attr({fill: "white"});

origin.mousedown(function(e) {
    line = Line(e.offsetX, e.offsetY, paper);
    $("#my-canvas").bind('mousemove', function(e) {line.updateEnd(e.offsetX, e.offsetY);    
});
});

$("#my-canvas").mouseup(function(e) { $("#my-canvas").unbind('mousemove'); });

The following errors are generated in the JavaScript console when running Raphael 2.1.0:

• body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode.
• body.scrollLeft is deprecated in strict mode. Please use 'documentElement.scrollLeft' if in strict mode and 'body.scrollLeft' only if in quirks mode.

What modifications are required for this to function in Raphael 2.1.0 as it does in 1.5.2? Please note that you can readily toggle between these two version in the JSFiddle.

Answer 1

I don't think the problem was with Raphael 2.1 per say

I used dev-tools inspector to see the actual outputted html

Upon further inspection your svg seems to be in one place and your <div id="my-canvas"><div> was empty

I fixed it by using the paper object to reference the canvas instead of reselecting using jQuery, which selected the still empty div tag.

var paper = Raphael("my-canvas",0, 0, 300, 400);
var origin = paper.rect(10, 10, 10, 10).attr({fill: "white"});
origin.mousedown(function(e) {
    line = Line(e.offsetX, e.offsetY, paper);
    $(paper.canvas).mousemove( function(e) {line.updateEnd(e.offsetX, e.offsetY);});
});

$(paper.canvas).mouseup(function(e) {$(paper.canvas).unbind('mousemove'); });

see JSFiddle

Now my fix aside this is somewhat weird behavior you would expect the canvas to be inside the div tag.

The behavior itself is similar to another Raphael behavior, which is what happens when you create the paper object without a div like so (see JSFiddle).

var paper = Raphael(0, 0, 300, 400);

I also noticed one more thing and that now the height is properly drawn at 400px vs. before when it was the opposite. 400 width 300 height

So maybe in Rapahel 2.1 they changed the constructor.

I go visit the documentation and sure enough

This is how you they initialize the paper with a div now

// Each of the following examples create a canvas
// that is 320px wide by 200px high.
// Canvas is created at the viewport’s 10,50 coordinate.
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);

So if you wanna create a canvas on a div you need to only include the width and height now (see fiddle).

I kept my reference of paper.canvas instead of reselecting the div just because it's more efficient and is sure to work either way.

I hope this fully answers your question have a sunny day.