KineticJS 1

by Alvin Olavarrieta

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<input id="rotate" type="button" value="Rotate" />
<div id="canvas"></div>

JavaScript

$(function() {
    var stage = new Kinetic.Stage({
        container: 'canvas',
        width: 640,
        height: 480
    });
    var layer = new Kinetic.Layer();
    
    // I would like to rotate this group around an arbitrary point
    // this group contains a rectangle and four circles
    var group = new Kinetic.Group({
        x: 100,
        y: 50
    });
    
    // draws a rectangle
    var rect = new Kinetic.Rect({
        width: 320,
        height: 240,
        stroke: 'blue',
        strokeWidth: 3
    });
    group.add(rect);
    
    // draws the center of the rectangle
    var center = new Kinetic.Circle({
        x: rect.getX() + rect.getWidth() / 2,
        y: rect.getY() + rect.getHeight() / 2,
        radius: 5,
        fill: 'black'
    });
    group.add(center);
    
    // draws the corners
    var rectX = rect.getX();
    var rectY = rect.getY();
    var rectWidth = rect.getWidth();
    var rectHeight = rect.getHeight();
    var corners = [
        {x: rectX, y: rectY},                          // top left
        {x: rectX + rectWidth, y: rectY},              // top right
        {x: rectX + rectWidth, y: rectY + rectHeight}, // bottom right
        {x: rectX, y: rectY + rectHeight},             // bottom left
    ];
    var circles = [];
    $.each(corners, function(i) {
        var corner = corners[i];
        var circle = new Kinetic.Circle({
            x: corner.x,
            y: corner.y,
            radius: 5,
            fill: 'blue',
            draggable: true
        });
        circle.on('mouseenter', function() {
            $('body').css('cursor', 'pointer');
        });
        circle.on('mouseleave', function() {
            $('body').css('cursor', 'default');
        });
        circle.on('dragmove', function() {
            var index = circles.indexOf(this);
            var index1 = index > 0? (index - 1) % 4 : (3 + index) % 4;
            var index0 = (index + 1) % 4;
            var corner0 = index % 2 > 0?...