Raphael - Drawing shapes with mouse

Question

What would be the best way to draw a rectangle or circle for that matter using your mouse ?

I just started looking at raphael and it seems I should use, drag? Or moused

Answer 1

Here's an updated version of fiddle (mentioned in the other article) that works with Raphael 2+ (no paper events).

This fiddle shows how a rectangle is dynamically drawn while you drag the mouse.

var mouseDownX = 0;
var mouseDownY = 0;
var elemClicked;
var rect;

$(document).ready(function() {
    var paper = Raphael("d1", 300, 200);

    // start, move, and up are the drag functions
    start = function() {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({
            opacity: 1
        });
        if (this.attr("y") < 60 && this.attr("x") < 60) this.attr({
            fill: "#000"
        });
    }, move = function(dx, dy) {

        // move will be called with dx and dy
        if (this.attr("y") > 200 || this.attr("x") > 300) this.attr({
            x: this.ox + dx,
            y: this.oy + dy
        });
        else {
            nowX = Math.min(300, this.ox + dx);
            nowY = Math.min(200, this.oy + dy);
            nowX = Math.max(0, nowX);
            nowY = Math.max(0, nowY);
            this.attr({
                x: nowX,
                y: nowY
            });
            if (this.attr("fill") != "#000") this.attr({
                fill: "#000"
            });
        }

    }, up = function() {
        // restoring state
        this.attr({
            opacity: .5
        });
        if (this.attr("y") < 60 && this.attr("x") < 60) this.attr({
            fill: "#AEAEAE"
        });
    };

    function DrawRectangle(x, y, w, h) {

        var element = paper.rect(x, y, w, h);
        element.attr({
            fill: "gray",
            opacity: .5,
            stroke: "#F00"
        });
        $(element.node).attr('id', 'rct' + x + y);
        console.log(element.attr('x'));

        element.drag(move, start, up);
        element.click(function(e) {

            elemClicked = $(element.node).attr('id');

        });

        return element;

    }

    $("#bind").click(function(e) {
        $('#d1').unbind('mousedown');
        $('#d1').unbind('mousemove');
        $('#d1').unbind('mouseup');

        $("#d1").mousedown(function(e) {
            // Prevent text edit cursor while dragging in webkit browsers
            e.originalEvent.preventDefault();

            var offset = $("#d1").offset();
            mouseDownX = e.pageX - offset.left;
            mouseDownY = e.pageY - offset.top;

            rect = DrawRectangle(mouseDownX, mouseDownY, 0, 0);

            $("#d1").mousemove(function(e) {
                var offset = $("#d1").offset();
                var upX = e.pageX - offset.left;
                var upY = e.pageY - offset.top;

                var width = upX - mouseDownX;
                var height = upY - mouseDownY;

                rect.attr( { "width": width > 0 ? width : 0,
                             "height": height > 0 ? height : 0 } );

            });

        });

        $("#d1").mouseup(function(e) {
            $('#d1').unbind('mousemove');

            var BBox = rect.getBBox();

            if ( BBox.width == 0 && BBox.height == 0 ) rect.remove();

        });

    });

    $("#unbind").click(function(e) {
        $('#d1').unbind('mouseup');
        $('#d1').unbind('mousemove');
        $('#d1').unbind('mousedown');
    });

    $("#clr").click(function(e) {
        $('#d1').find('rect').each(function(i, obj) {
            $(this).remove();
        });
    });

    $("#del").click(function(e) {
        $('#' + elemClicked).remove();
    });

});

​