mouse event

by kzhdev

HTML

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/805914/kinetic.js"></script>
<div id="canvasDiv"></div>
<img id="hit" src=""/>

JavaScript

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

var layer = new Kinetic.Layer();    

var group = new Kinetic.Group({
    x: 100,
    y: 100, scale: 4.0
});

var border = new Kinetic.Rect({
    width: 8,
    height: 8,
    stroke: 'grey',
    strokeWidth: 1,
    fill: 'red',
    /*
    drawHitFunc: function(context) {
        context.beginPath();
        context.rect(-3, -3, 14, 14);
        context.closePath();
        context.fillStrokeShape(this);
    },
    */
});
group.add(border);
group.add(new Kinetic.Rect({
    x: 3,
    y: 3,
    width: 2,
    height: 2,
    fill: 'white',
    id: 'inside'
}));

group.on('mouseenter', function(e) {
    console.log('mouseenter');
    document.body.style.cursor = 'pointer';
    group.find('#inside')[0].setFill('blue');
    layer.draw();
});

group.on('mouseleave', function(e) {
    document.body.style.cursor = 'default';
    group.find('#inside')[0].setFill('white');
    layer.draw();
});

layer.add(group);
stage.add(layer);

document.getElementById("hit").src = layer.getHitCanvas().toDataURL();