JSFiddle - React, Tailwind, and code Playground

by projeqht

HTML

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

JavaScript

//http://stackoverflow.com/questions/18886847/why-is-there-no-method-draw-in-kineticjs-documentation
var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
});

layer.add(rect);

var layer2 = new Kinetic.Layer();

var circle = new Kinetic.Circle({
    x: 50,
    y: 75,
    radius:20,
    fill: 'blue',
    stroke: 'black',
    strokeWidth: 4
});

layer2.add(circle);

stage.add(layer);
stage.add(layer2);

rect.on('click', function() {
    alert('Rectangle');
});

circle.on('click', function() {
    alert('Circle');
});

rect.setFill('#FF0000');
rect.setX(400);
circle.setFill('#FFF000');
circle.setY(150);

/* 
-Comment and uncomment each of the lines below to see the differences of each function.
-Or uncomment each draw method to see the progress of our Stage.
-There are 2 layers: layer includes a rectangle, layer 2 includes a circle
-Rectangle has a click event attached to it to alert the message "Rectangle"
-Circle has a click event attached to it to alert the message "Circle"
-The rectangle is moved to the right and changed color from green to red
-The circle is moved down and changed color from blue to yellow
*/

rect.drawScene();
//The rectangle is updated from green to red, but notice the green rectangle is still there, that is because the layer has not been updated yet. Notice that if we try to click on the red rectangle, nothing happens BUT if we click on the green Rectangle, the alert is fired. This is because we did not call rect.drawHit() yet.

//rect.drawHit();
//Now that we've called drawHit(), we can click on the red rectangle. IF drawScene is commented out (and not called), notice that the rectangle stays green and if we click on it nothing happens, but if we click in the white space where the red rectangle USED to be, we'll notice...