PaperScript

by rushtonmd

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
<div style='height: 100%; width: 100%;'>
    <canvas id="myCanvas" resize keepalive="true" style='height: 100%; width: 100%; background-color:#DDDDDD;'></canvas>
</div>

JavaScript

//test
(function (mdr, $, undefined) {
    paper.install(window);

    var cursorBox;
    var view;

    $(function () {
        paper.setup('myCanvas');
        var text = new PointText(new Point(30, 30));

        // Create a cursor
        cursorBox = new Path.Circle(new Point(0, 0), 10);
        cursorBox.strokeColor = 'black';
        cursorBox.visible = false;

        view = paper.view;

        // Create a simple drawing tool:
        var tool = new Tool();

        // Define a mousedown and mousedrag handler
        tool.onMouseDown = function (event) {
            path = new Path();
            path.strokeColor = 'black';
            path.add(event.point);
        }

        tool.onMouseDrag = function (event) {
            path.add(event.point);
            cursorBox.position = event.point;
        }

        tool.onMouseMove = function (event) {
            cursorBox.position = event.point;
            text.content = event.point;
        };

        $('#myCanvas').mouseleave(function (event) {
            cursorBox.visible = true;
        });

        $('#myCanvas').mouseenter(function (event) {
            cursorBox.visible = true;
        });

        $('#myCanvas').mousewheel(function (event) {
            var mousePosition, newZoom, offset, viewPosition, _ref;
            if (event.shiftKey) {
                view.center = panAndZoom.changeCenter(view.center, event.deltaX, event.deltaY, event.deltaFactor);
                event.preventDefault();
            } else if (event.altKey) {
                mousePosition = new paper.Point(event.offsetX, event.offsetY);
                viewPosition = view.viewToProject(mousePosition);
                _ref = panAndZoom.changeZoom(view.zoom, event.deltaY, view.center, viewPosition), newZoom = _ref[0], offset = _ref[1];
                view.zoom = newZoom;
                view.center = view.center.add(offset);
                event.preventDefault();
            }

            view.draw();
        });

       ...