kinetic-Image

by bhupendra negi

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
<div id = "container"></div>

JavaScript

var stage = new Kinetic.Stage({
    container:'container',
    width:500,
    height:350
   
})

var layer = new Kinetic.Layer();

var ImageObj = new Image();
ImageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg";

ImageObj.onload = function() {
    
    var img = new Kinetic.Image({
        x:50,
        y:50,
        width:100,
        height:150,
        image:ImageObj
       }); 
    
//ADDING TEXT labels
    
     // tooltip
          
   // label container 
    var label = new Kinetic.Label({
        x:160, // x pos of label
        y:100, // y pos of label
        opacity:.50 })
    
    label.add(new Kinetic.Tag({
        fill:'orange', 
        pointerDirection : 'left',
        pointerWidth:10,
        pointerHeight:10,
        lineJoin:'round',
        shadowColor:'yellow',
        shadowBlur:10,
        shadowOffset:{x:10,y:20},
        shadowOpacity:0.5
    
       }));
    
    label.add(new Kinetic.Text({
        text:"Hello !!!",
        fontFamily:'Arial',
        fontSize:18,
        padding:5,
        fill:'green'
       
    }));
    
    
    // adding regular polygon
    
    var poly = new Kinetic.RegularPolygon({
        x:350,
        y:150,
        sides:6,
        fill:"orange",
        stroke:"green",
        lineWidth:5,
        radius:50
     })
    
    poly.on("mouseover", function () {
    
    this.stroke("green");
        this.opacity(.5)  
    this.strokeWidth(20);
   layer.draw();
    })
    
    
    poly.on("mouseout",function() {
    this.stroke("black");
     this.opacity(1)   
     this.strokeWidth(3);
         layer.draw();
    
    
    })
    
              
   layer.add(poly);       
   layer.add(label);  
   layer.add(img);
   stage.add(layer);
    
        
}