JSFiddle - React, Tailwind, and code Playground

by tctruckscience

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<p>Blue group will recenter after scaling</p>
<button id="wider">Wider</button>
<button id="narrower">Narrower</button>
<div id="container"></div>

CSS

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

JavaScript

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

// objects used in jquery events
var drawingGroup;
var rect, circle;
var stageWidth = stage.getWidth();
var stageHeight = stage.getHeight();


drawingGroup = new Kinetic.Group({
    x: 20,
    y: stageHeight / 2 - 50,
    width: 260,
    height: 100,
});
drawingGroup.offsetX = 0;
drawingGroup.offsetY = 0;
drawingGroup.scalePtX = 0;
drawingGroup.scalePtY = 0;
drawingGroup.scaleFactor = 1.00;
drawingGroup.scaleBy = function (scaleChange) {

    // undo previous offset
    //this.offsetX += this.scalePtX / this.scaleFactor;
    //this.offsetY += this.scalePtY / this.scaleFactor;

    // calc new scaling factor
    //var newScaleFactor = this.scaleFactor * (1 + scaleChange);
    //alert(newScaleFactor);

    // create new offset
    //this.offsetX -= this.scalePtX / newScaleFactor;
    //this.offsetY -= this.scalePtY / newScaleFactor;

    // set new scale factor
    //this.scaleFactor = newScaleFactor;
    this.scaleFactor = scaleChange;

    // do the new offset
    //this.setOffset(this.offsetX, this.offsetY);

    // do the new scale
    //this.setScale(this.scaleFactor);
    this.setScale(scaleChange);

    layer.draw();

};
layer.add(drawingGroup);

var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 260,
    height: 100,
    stroke: "lightgray",
    fill: "skyblue"
});
drawingGroup.add(rect);

var circle = new Kinetic.Circle({
    x: 50,
    y: 50,
    radius: 20,
    fill: "blue"
});
drawingGroup.add(circle);

var status = new Kinetic.Text({
    x: 15,
    y: 15,
    text: "width=240, scale=1.00",
    fontSize: 18,
    fill: "red"
});
layer.add(status);

setStatus();

layer.draw();

function setStatus() {
    var width = drawingGroup.getWidth();
    var scale = Math.round(drawingGroup.scaleFactor * 100);
    status.setText("Width: " + width + ", Scale: " + scale + "%");
}


// widen by 20px and scale down...