Scale-2

by hiral

HTML

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.2.js"></script>
<div id="container"></div>

JavaScript

window.onload = function() {
    var stage = new Kinetic.Stage({
        container: "container",
        width: 578,
        height: 200
    });

    var layer = new Kinetic.Layer();
    var img = new Image();
    var img2 = new Image();
    var img3 = new Image();
    img3.src = 'http://www.html5canvastutorials.com/demos/assets/pixel-art.gif';

    var r = 22.5;
    var hexagon = new Kinetic.RegularPolygon({
        x: 100,
        y: 100,
        sides: 6,
        radius: r,
        stroke: '#6B2F00',
        strokeWidth: 0.5,
        fill: {
            start: {
                x: 0,
                y: 0,
                radius: 0
            },
            end: {
                x: 0,
                y: 0,
                radius: r + 25
            },
            colorStops: [0, '#FFF4A3', 1, '#E87F00']
        },
        shadow: {
            color: '#6B2F00',
            blur: 0.5,
            offset: [2, 2],
            alpha: 0.5
        }
    });

    layer.add(hexagon);
    stage.add(layer);

    function set_comb_images(hexagon) {
        var ax = hexagon.getX() + 25;
        setTimeout(function() {
            hexagon.transitionTo({
                x: ax,
                y: 120,
                alpha: 0.1,
                duration: 1,
                scale: {
                    x: 1.5,
                    y: 1.5
                },
                callback: function() {
                    load_image();
                }

            });
        }, 500);
    }

    set_comb_images(hexagon);

    function load_image() {
        setTimeout(function() {
            hexagon.transitionTo({
                x: 100,
                y: 100,
                alpha: 1,
                duration: 1,                
                scale: {
                    x: 1,
                    y: 1
                }
            });
        }, 500);
        hexagon.setAttrs({
            fill: {
                image: img3,
                offset: [-700, -300]
            }
...