Raphael JS IE

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

by JQ Purfect

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>
<button id="freeline">Freeline</button>
<button id="circle">Circle</button>
<button id="arrow">Arrow</button>
<button id="simpleText">Text</button>
<button id="clr">Clear</button>
<hr />
<div class="pull-left webRTC" id="webRTC">
    <div>
        <video width="400" autoplay id="remoteVideo" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    </div>
    <div class="paper" id="svg_paper"></div>
</div>

CSS

.paper {
        margin: 5px auto;
        width: 500px;
        
        background:#000;
        opacity: 0.25;
    
        height: 400px;
        position: absolute;
        border: outset 1px #000;
        cursor: crosshair;
    }
    /** { */
    /* -webkit-border-radius: 0 !important;
    */
    /* -moz-border-radius: 0 !important;
    */
    /* border-radius: 0 !important;
    */
    /*
}
*/
    html {
        overflow: auto;
    }
    *:focus {
        outline: 0;
    }
    .preload {
        height: 454px;
        position: fixed;
        background: url('../images/ge-progress.png') right no-repeat #fff;
    }
    .preload img {
        width: 64px;
        height: 64px;
        float: right;
    }
    .preload h1 {
        padding-top: 10px;
    }
    .preload #progress {
        padding-top: 15%;
    }
    .expert {
        background: #fff;
        min-width: 1200px
    }
    #viewSnapshot {
        display: none;
    }
    .chat-area {
        margin-left: 10px;
    }
    .chat {
        background: #ebecee;
        border: solid 1px #e1e2e5;
        width: 305px;
        height: 420px;
        overflow-y: scroll;
        margin-right: 5pt;
        font-family:"Helvetica Neue";
    }
    ::-webkit-scrollbar {
        width: 7px;
    }
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: rgba(155, 155, 155, 0.80);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(233, 234, 238, 0.40);
    }
    #msg {
        background: #e9eaee;
        width: 237px;
        height: 35px;
        padding: 8px;
        resize: none;
        margin-top: 4px;
        margin-bottom: 2px;
        border: 1px solid #ddd;
        word-wrap: break-word;
    ...

JavaScript

var mouseDownX = 0;
var mouseDownY = 0;
var arrow;
var deviceW = 800;
var deviceH = 600;
var deviceW1024 = 1024;

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

var paper = Raphael("svg_paper", deviceW, deviceH);
var $paper = $("#svg_paper");

//--------------------------------------------------------
//--------------------------------------------------------
//Arrow click events
//--------------------------------------------------------
//--------------------------------------------------------

function findArrowCoordinates(x0, y0, x1, y1) {
    var arrowP1, arrowP2, arrowP3, arrowPath, d, fLength, ta, th, theta, vecLeft, vecLine;
    vecLine = [];
    vecLeft = [];
    vecLine[0] = x1 - x0;
    vecLine[1] = y1 - y0;
    vecLeft[0] = -vecLine[1];
    vecLeft[1] = vecLine[0];
    fLength = getDistance(x0, y0, x1, y1);
    d = 0.1 * fLength;
    th = d / (2.0 * fLength);
    theta = Math.PI * 30.0 / 180;
    ta = d / (2.0 * (Math.tan(theta) / 2.0) * fLength);
    arrowP1 = [];
    arrowP2 = [];
    arrowP3 = [];
    arrowP3[0] = x1 + (-ta * vecLine[0]);
    arrowP3[1] = y1 + (-ta * vecLine[1]);
    arrowP1[0] = arrowP3[0] + (th * vecLeft[0]);
    arrowP1[1] = arrowP3[1] + (th * vecLeft[1]);
    arrowP2[0] = arrowP3[0] + (-th * vecLeft[0]);
    arrowP2[1] = arrowP3[1] + (-th * vecLeft[1]);
    arrowPath = "M" + x0 + "," + y0 + "L" + x1 + "," + y1 + "L" + arrowP2[0] + "," + arrowP2[1] + "M" + x1 + "," + y1 + "L" + arrowP1[0] + "," + arrowP1[1];
    return arrowPath;
}

function getDistance(x0, y0, x1, y1) {
    var dx, dy;
    dx = Math.abs(x1 - x0);
    dy = Math.abs(y1 - y0);
    return Math.sqrt((dx * dx) + (dy * dy));
}

function DrawArrow(x, y) {
    var element = paper.path("M" + x + " " + y);
    element.attr({
        // stroke: Raphael.getColor(),
        stroke: "yellow",
            "stroke-width": 4,
            "arrow-end": "classic-medium-medium"
    });
    return element;
}

$("#arrow").click(function (e) {
    clearCanvas();
  ...