JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script>
<h4>Load draggable/resizable images dynamically</h4>

<div id="container"></div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#container {
    border:1px solid red;
    width:350px;
    height:350px;
}

JavaScript

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

// build a test fileInfos array
// width/height will be gotten from actual images, so leave width/height==0
var fileInfos = [];

function addFile(x, y, w, h, imgURL) {
    fileInfos.push([imgURL, [w, h],
        [x, y]
    ]);
}
addFile(30, 100, 102, 102, "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg");
addFile(200, 100, 102, 102, "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg");

// load all the images
var images = [];
loadAllImages();

function loadAllImages() {
    var imagesOK = 0;
    for (var i = 0; i < fileInfos.length; i++) {
        var img = new Image();
        images.push(img);
        img.onload = function () {
            if (++imagesOK == fileInfos.length) {

                // all images are loaded, so build the groups
                for (var i = 0; i < fileInfos.length; i++) {
                    var imgWidth = fileInfos[i][1][0];
                    var imgHeight = fileInfos[i][1][1];
                    var groupX = fileInfos[i][2][0];
                    var groupY = fileInfos[i][2][1];
                    addImageGroup(images[i], imgWidth, imgHeight, groupX, groupY);
                }
                layer.draw();
            }
        };
        img.src = fileInfos[i][0];
    }
}


function addImageGroup(image, imageWidth, imageHeight, groupX, groupY) {

    // width and height are based on the images width/height
    var w = imageWidth;
    var h = imageHeight;

    var kGroup = new Kinetic.Group({
        x: groupX,
        y: groupY,
        width: w + 20, // must allow 10+10=20 for anchors
        height: h + 20,
        draggable: true
    });
    layer.add(kGroup);

    kGroup.on('dragstart', function () {
        this.moveToTop();
    });

    var kImage = new Kinetic.Image({
        x: 0,
        y: 0,
       ...