Raphael JS Demo

Raphael JS demo for rectangle, arrow and moving rect objects.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://gabelerner.github.io/canvg/canvg.js"></script>
<script src="https://interferome.googlecode.com/svn-history/r93/branches/nar/webcontent/js/raphael.export.js"></script>
<input id="freeline" value="Freeline" type="button" />
<input id="unbind" value="UnBind" type="button" />
<input id="editor_save" value="Save" type="button" />
<div class="paper" id="svg_paper" style="background-image:url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg);" />
<hr />

<div id="raphaelDiv" style="display:none;"></div>
<canvas id="myCanvas" style="display:none;"></canvas>

<img id="myImg" src="">

CSS

.paper {
        margin: 5px auto;
        width: 500px;
        height: 400px;
        position: absolute;
        border: outset 1px #000;
        cursor: crosshair;
        z-index: -1;
    }

JavaScript

var mouseDownX = 0;
var mouseDownY = 0;
var arrow;

var painter = {};
var shapes = [];
painter.brush = function () {};

var paper = Raphael("svg_paper", 600, 450);
var $paper = $("#svg_paper");


$("#freeline").click(function (e) {

    pathStringM = "";
    freeLineArray = [];

    clearCanvas();

    var canvas = document.getElementById('svg_paper'),
        mousedown = false,
        lastX, lastY, path, pathString;

    $(canvas).mousedown(function (e) {
        mousedown = true;

        var x = e.offsetX,
            y = e.offsetY;

        pathString = 'M' + x + ', ' + y + 'l0 0';
        pathString2 = 'M' + x + ",";
        path = paper.path(pathString);

        path.attr({
            'stroke': 'yellow',
                'stroke-linecap': 'round',
                'stroke-linejoin': 'round',
                'stroke-width': 3 // Width in pixels
        });

        lastX = x;
        lastY = y;

        pathStringM = pathString2;

    });


    $(canvas).mouseup(function () {

        freeLineArray.length = 0;
        mousedown = false;
    });

    $(canvas).mousemove(function (e) {

        if (!mousedown) {
            return;
        }

        var x = e.offsetX,
            y = e.offsetY;

        pathString += 'l' + (x - lastX) + ' ' + (y - lastY);
        path.attr('path', pathString);

        lastX = x;
        lastY = y;

        console.clear();
        freeLineArray[freeLineArray.length] = x + 'L' + y;
        //lineinfo += "L" + x + ', ' + y;
        // console.log("L" + x + ', ' + y);

        freeLineJson = {
            messageType: "annotation",
            id: Math.floor((Math.random() * 1000) + 1),
            localId: Math.floor((Math.random() * 2000) + 2),
            type: "o-path",
            data: pathStringM + freeLineArray.join(","),
            hexColor: "#FFFF00",
            strokeWidth: 2.0
        }

        console.log(freeLineJson);

    });
});

// Unbind events
$("#unbind").click(function (e) {
    clearCanvas();
});

//...