bgorkem · November 15, 2013 12:51
diff --git a/jsbin.ObipUBAK.html b/jsbin.ObipUBAK.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>JS Bin</title>
      <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
 </head>
 <body>
 <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <script defer="defer">
      
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 400
      });
      
      function writeMessage(message) {
        text.setText(message);
        layer.draw();
      }
      

      var layer = new Kinetic.Layer();

       var text = new Kinetic.Text({
        x: 10,
        y: 10,
        fontFamily: 'Calibri',
        fontSize: 24,
        text: '',
        fill: 'black'
      });
      
      var star = new Kinetic.Star({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        numPoints: 7,
        innerRadius: 50,
        outerRadius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        drawHitFunc: function(context) {
          context.beginPath();
          context.arc(0, 0, this.getOuterRadius() + 10, 0, Math.PI * 2, true);
          context.closePath();
          context.fillStrokeShape(this);
        }
      });
 
       var group = new Kinetic.Group({
        x: 20,
        y: 40,
        rotationDeg: 2
      });

      group.on('mouseover', function() {
        writeMessage('Mouseover star');
      });
      group.on('mouseout', function() {
        writeMessage('Mouseout star');
      });
      group.on('mousedown', function() {
        writeMessage('Mousedown star');
      });
      group.on('mouseup', function() {
        writeMessage('Mouseup star');
      });
      
     
      
      
      var imageObj = new Image();
      imageObj.onload = function() {
        
        var yoda = new Kinetic.Image({
          x: 255,
          y: 160,
          image: imageObj,
          width: 70,
          height: 80
        });
        
         // add the shape to the layer
          group.add(star);
          group.add(yoda);
          group.add(text);
          layer.add(group);     
          stage.add(layer);
        
         star.tween = new Kinetic.Tween({
          node: star,
          scaleX: 1.2,
          scaleY: 1.2,
          easing: Kinetic.Easings.EaseIn,
          duration: 0.1
         	});
        
         // use event delegation
          star.on('mouseover touchstart', function(evt) {
            evt.targetNode.tween.play();
          });
        
        // use event delegation
          star.on('mouseout touchend', function(evt) {
            evt.targetNode.tween.reverse();
          });
       
      };
      
      
      
      
     
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
        
      

      
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
	</head>
	<body>
	<div id="container"></div>
	<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
	<script defer="defer">

	var stage = new Kinetic.Stage({
	container: 'container',
	width: 578,
	height: 400
	});

	function writeMessage(message) {
	text.setText(message);
	layer.draw();
	}


	var layer = new Kinetic.Layer();

	var text = new Kinetic.Text({
	x: 10,
	y: 10,
	fontFamily: 'Calibri',
	fontSize: 24,
	text: '',
	fill: 'black'
	});

	var star = new Kinetic.Star({
	x: stage.getWidth() / 2,
	y: stage.getHeight() / 2,
	numPoints: 7,
	innerRadius: 50,
	outerRadius: 70,
	fill: 'red',
	stroke: 'black',
	strokeWidth: 4,
	drawHitFunc: function(context) {
	context.beginPath();
	context.arc(0, 0, this.getOuterRadius() + 10, 0, Math.PI * 2, true);
	context.closePath();
	context.fillStrokeShape(this);
	}
	});

	var group = new Kinetic.Group({
	x: 20,
	y: 40,
	rotationDeg: 2
	});

	group.on('mouseover', function() {
	writeMessage('Mouseover star');
	});
	group.on('mouseout', function() {
	writeMessage('Mouseout star');
	});
	group.on('mousedown', function() {
	writeMessage('Mousedown star');
	});
	group.on('mouseup', function() {
	writeMessage('Mouseup star');
	});




	var imageObj = new Image();
	imageObj.onload = function() {

	var yoda = new Kinetic.Image({
	x: 255,
	y: 160,
	image: imageObj,
	width: 70,
	height: 80
	});

	// add the shape to the layer
	group.add(star);
	group.add(yoda);
	group.add(text);
	layer.add(group);
	stage.add(layer);

	star.tween = new Kinetic.Tween({
	node: star,
	scaleX: 1.2,
	scaleY: 1.2,
	easing: Kinetic.Easings.EaseIn,
	duration: 0.1
	});

	// use event delegation
	star.on('mouseover touchstart', function(evt) {
	evt.targetNode.tween.play();
	});

	// use event delegation
	star.on('mouseout touchend', function(evt) {
	evt.targetNode.tween.reverse();
	});

	};





	imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';




	</script>
	</body>
	</html>