Circle Cache

by kzhdev

HTML

<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.min.js"></script>
<div id="canvasDiv"></div>

JavaScript

var stage = new Kinetic.Stage({
    container: 'canvasDiv',
    width: 500,
    height: 300,
    draggable: false,
    pixelRatio: 2
});

var layer = new Kinetic.Layer();    
var circle = new Kinetic.Circle({
    x: 50,
    y: 50,
    radius: 25,
    fill: 'green',
    stroke: 'gray',
    strokeWidth: 1
});

var circleCache1 = circle.clone();
circleCache1.setX(100);
circleCache1.cache();

var circleCache2 = circle.clone();
circleCache2.setX(150);
circleCache2.cache({
    x: -25,
    y: -25
});

var circleCache3 = circle.clone();
circleCache3.setX(200);
circleCache3.cache({
    x: -26,
    y: -26,
    width: circleCache2.getWidth() + 2,
    height: circleCache2.getHeight() + 2
});

layer.add(circle);
layer.add(circleCache1);
layer.add(circleCache2);
layer.add(circleCache3);

stage.add(layer);