JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<button id="myButton">Scale the blue image</button>
<div id="container"></div>

CSS

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

JavaScript

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

var group = new Kinetic.Group({});
layer.add(group);

var image = new Kinetic.Rect({
    x: 175,
    y: 150,
    width: 150,
    height: 100,
    fill: 'blue',
    offset: {
        x: 75,
        y: 50
    },
});
group.add(image);
layer.draw();

var rect = new Kinetic.Rect({
    x: 75,
    y: 85,
    width: 50,
    height: 30,
    fill: 'red',
});
group.add(rect);
layer.draw();

image.on("scaleXChange scaleYChange", function () {
    var imgX = this.x() - this.offsetX() * this.scaleX();
    var imgY = this.y() - this.offsetY() * this.scaleY();
    rect.position({
        x: imgX - rect.width() / 2,
        y: imgY - rect.height() / 2
    });
})


$("#myButton").click(function () {
    image.scale({
        x: 0.50,
        y: 0.50
    });
    layer.draw();
});