JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.5.js"></script>
<div id="canvas-wrapper"></div>
CSS
#canvas-wrapper {
width: 600px;
height: 600px;
}
JavaScript
$(function() {
initStage();
});
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'canvas-wrapper',
width: $('#canvas-wrapper').width(),
height: $('#canvas-wrapper').height(),
});
var layer = new Kinetic.Layer();
var thingGroup = new Kinetic.Group({
x: 140,
y: 100,
draggable: true
});
layer.add(thingGroup);
stage.add(layer);
var imageObj = new Image();
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
// Add image to group
var thing = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
name: 'image'
});
thingGroup.add(thing);
// Add anchors to group
addAnchor(thingGroup, 0, 0, "topLeft");
addAnchor(thingGroup, imageObj.width, 0, "topRight");
addAnchor(thingGroup, imageObj.width, imageObj.height, "bottomRight");
addAnchor(thingGroup, 0, imageObj.height, "bottomLeft");
stage.draw();
};
thingGroup.on("dragstart", function() {
this.moveToTop();
});
stage.draw();
}
function update(group, activeAnchor) {
var topLeft = group.get(".topLeft")[0];
var topRight = group.get(".topRight")[0];
var bottomRight = group.get(".bottomRight")[0];
var bottomLeft = group.get(".bottomLeft")[0];
var image = group.get(".image")[0];
// update anchor positions
switch(activeAnchor.getName()) {
case "topLeft":
topRight.attrs.y = activeAnchor.attrs.y;
topRight.attrs.x = activeAnchor.attrs.x + image.getWidth();
bottomLeft.attrs.x = activeAnchor.attrs.x;
bottomRight.attrs.x = activeAnchor.attrs.x + image.getWidth();
break;
case "topRight":
topLeft.attrs.y = activeAnchor.attrs.y;
bottomRight.attrs.x =...