JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<h4>Click the rect stroke</h4>
<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 rect = new Kinetic.Rect({
    x: 30,
    y: 30,
    width: 60,
    height: 40,
    fill: 'skyblue',
    stroke: 'black',
    strokeWidth: 10,
});
rect.on("click", function () {
    var stroke = this.getStrokeWidth();
    var x = this.getX() + stroke / 2;
    var y = this.getY() + stroke / 2;
    var w = this.getWidth() - stroke;
    var h = this.getHeight() - stroke;
    var pos = stage.getMousePosition();
    var mx = pos.x;
    var my = pos.y;
    if (mx > x && mx < x + w && my > y && my < y + h) {
        return;
    }
    alert("clicked");
});
layer.add(rect);

layer.draw();