click text

by kzhdev

HTML

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

JavaScript

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

window.stage2 = new Kinetic.Stage({
    container: 'canvasDiv2',
    width: 400,
    height: 400,
    draggable: false,
    pixelRatio: 1
});

window.layer = new Kinetic.Layer({name: 'layer1'});
window.layer2 = new Kinetic.Layer({name: 'layer2'});

var group = new Kinetic.Group({
    x: 100,
    y: 100,
    width:50,
    height:50
});

var border = new Kinetic.Circle({
    radius: 25,
    offset: -25,
    
    fillPriority: 'radial-graident',
    fillRadialGradientStartPoint: 0,
    fillRadialGradientStartRadius: 0,
    fillRadialGradientEndPoint: 0,
    fillRadialGradientEndRadius: Math.sqrt(2) * 80 / 2,
    fillRadialGradientColorStops: [0, 'yellow', 1, 'orange'],
    
    shadowBlur: 2,
    shadowColor: 'grey',
    shadowOpacity: 0.5,
    shadowOffset: 3,
    shadowEnabled: false,
    
    stroke: 'grey',
    strokeWidth: 1.1,
});

group.add(border);
group.add(new Kinetic.Text({
    x: 12,
    y: 10,
    fontSize: 14,
    fontFamily: 'Calibri',
    fill: 'black',
    align: 'center',
    padding: 10,
    text: 0
}));

group.on('mouseover', function(e) {
    console.log(e.targetNode.getLayer());
    if (e.targetNode.getLayer().attrs.name === 'layer1') {
        group.setScale(1.5, 1.5);
        e.targetNode.getLayer().draw();
    }
});
         
group.on('mouseout', function(e) {
    if (e.targetNode.getLayer().attrs.name === 'layer1') {
        group.setScale(1, 1);
        e.targetNode.getLayer().draw();
    }
});

group.on('mousedown', function(e) {
    if (e.targetNode.getLayer().attrs.name === 'layer2') {
        e.targetNode.parent.children[0].setStroke('red');
        window.layer2.draw();
    }
});

var newGroup;
group.on('dblclick', function(e) {
    newGroup = group.clone({scale: 1});
    window.layer2.add(newGroup);
    window.layer2.draw();
});

window.stage2.on('contentMousedown', function(e) {
    if...