mouse events

avoid the semitransparent circle capture mouse event

by Gonzalo Chumillas

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<span id="text">&nbsp;</span>
<div id="canvas"></div>

JavaScript

var stage = new Kinetic.Stage({
    container: 'canvas',
    width: 800,
    height: 600
});
var layer = new Kinetic.Layer();

// adds a rectangle
var rect = new Kinetic.Rect({
    x: 100,
    y: 50,
    width: 200,
    height: 150,
    fill: 'yellow',
    stroke: 'black'
});
rect.on('mousedown', function() {
    $('#text').text('mouse down');
}).on('mouseup', function() {
    $('#text').text('mouse up');
}).on('mouseenter', function() {
    $('body').css('cursor', 'pointer');
    $('#text').text('mouse enter');
}).on('mouseleave', function() {
    $('body').css('cursor', 'default');
    $('#text').text('mouse leave');
});
layer.add(rect);

// adds a semitransparent circle
var circ = new Kinetic.Circle({
    x: 300,
    y: 125,
    radius: 60,
    fill: 'green',
    stroke: 'black',
    opacity: 0.2,
    locked: true
});
layer.add(circ);

stage.add(layer);