JSFiddle - React, Tailwind, and code Playground

by peteng

HTML

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

JavaScript

(function ($) {
    $.fn.polygonExpander = function (options) {
        options = $.extend({
            width: 400,
            height: 200,
            changeWidth: 50,
            changeSpeed: 10,
            strokeColour: 'white',
            strokeWidth: 1,
            polyArrays: new Array()
        }, options);

        return $(this).each(function () {
            var stage = new Kinetic.Stage({
                container: this.id,
                width: options.width,
                height: options.height
            }),
                bottomLayer = new Kinetic.Layer(),
                topLayer = new Kinetic.Layer(),
                context = bottomLayer.getContext(),
                currentSize = 0,
                interval,
                selectedIndex = -1;

            function makePolygon(polyArray, layer) {
                var poly = new Kinetic.Polygon({
                    points: [polyArray[0], 0, polyArray[1], 0, polyArray[2], 200, polyArray[3], 200],
                    name: 'poly',
                    draggable: false,
                    stroke: options.strokeColour,
                    strokeWidth: options.strokeWidth
                });

                var imageObj = new Image();
                imageObj.src = polyArray[4];
                imageObj.onload = function () {
                    poly.setFillPatternImage(imageObj);
                    stage.draw();
                }

                layer.add(poly);
            }

            function expand(polyPoints) {
                if (currentSize >= options.changeWidth) {
                    window.clearInterval(interval);
                } else {
                    topLayer.removeChildren();

                    currentSize++;
                    var topLeft = polyPoints[0] - currentSize,
                        topRight = polyPoints[1] + currentSize,
                        bottomRight = polyPoints[2] + currentSize,
                        bottomLeft = polyPoints[3] - currentSize,
...