JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
<button id="larger">Larger</button>
<button id="smaller">Smaller</button>
<button id="rotateCW">Rotate clockwise</button>
<button id="rotateCCW">Rotate CCW</button>
<div id="container"></div>

CSS

body {
    padding:15px;
}
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:400px;
    height:400px;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 400,
    height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);


// parentGroup is used in jquery events
// so make it global
var parentGroup;

// load the image and then start the app
var image = new Image();
image.onload = function () {
    start();
}
image.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";

// build everything, wire events
function start() {

    parentGroup = new Kinetic.Group({
        x: image.width / 2,
        y: image.height / 2,
        width: image.width,
        height: image.height,
        draggable: true
    });
    parentGroup.setOffset(parentGroup.getWidth() / 2, parentGroup.getHeight() / 2);
    layer.add(parentGroup);

    var kImage = new Kinetic.Image({
        image: image,
        x: 0,
        y: 0,
        width: image.width,
        height: image.height
    });
    parentGroup.add(kImage);

    var childGroup = new Kinetic.Group({
        x: 0,
        y: 0,
        width: 100,
        height: 50
    });
    parentGroup.add(childGroup);

    // this outline rect is just for illustration
    var boundingRect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: parentGroup.getWidth(),
        height: parentGroup.getHeight(),
        stroke: "black",
        strokeWidth: .75
    });
    parentGroup.add(boundingRect);

    var childRect = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 105,
        height: 25,
        stroke: "lightgray",
        fill: "skyblue"
    });
    childGroup.add(childRect);

    var childText = new Kinetic.Text({
        x: 5,
        y: 3,
        fontSize: 18,
        text: "Hello, World",
        fill: "blue"
    });
    childGroup.add(childText);


    layer.draw();


    // scale up by +0.10 at parentGroup scalePtX/scalePtY
    $("#larger").click(function () {
        parentGroup.setScale(parentGroup.getScale().x + 0.10);
        layer.draw();
    });

 ...