JSFiddle - React, Tailwind, and code Playground

by kien16

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js"></script>
<button id="plus">+</button>
<button id="min">-</button>
<div id="container"></div>

CSS

body { margin: 0px; padding: 0px;}
canvas {
     border: 1px solid blue;
}

JavaScript

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

	  
    var group = new Kinetic.Group({
          x: stage.getWidth()/2,
          y: stage.getHeight() / 2,      
          offset: {
              x:  stage.getWidth()/2,
              y:  stage.getHeight() / 2
          },
        draggable: true
    });

    var redLine = new Kinetic.Line({
        points: [973, 570, 340, 423, 450, 60, 500, 20],
        stroke: 'red',
        strokeWidth: 15,
        lineCap: 'round',
        lineJoin: 'round'
    });

	var imageObj = new Image();
    imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
    var yoda = new Kinetic.Image({
          width: 2357,
          height: 2083	  
    });

    imageObj.onload = function() {
        yoda.setImage(imageObj);
        layer.draw();
    };

	group.add(yoda);
	group.add(redLine);
	layer.add(group);
	stage.add(layer);
	
	document.getElementById('min').addEventListener('click', function() {
		scale(0.9);
	}, false);
	document.getElementById('plus').addEventListener('click', function() {
		scale(1.1);
	}, false);
	
	function scale(zoom) {
		var scale = group.getScale();
        //alert(scale.x);
		var newscale = scale.x * zoom;    
		group.setScale(newscale, newscale);
		group.draw();
	}