KineticJS image zoom

Question

I'm working on a project where I have kineticJS regular polygons fillpatterned with images that I would like to zoom out on hover. Currently I'm using

    this.setFillPatternScale(zoom)

in order to zoom out, but this simply changes the background image size rather abruptly. Is there any way to make this process more of an animation (like using css and transition ease) or simply more smooth than an abrupt switch. I thought about using incremental scaling and redrawing the shape but that seemed pretty intensive and it is already pretty slow to run as is. Thanks!

score 2 · Accepted Answer · answered Nov 23 '13 at 22:16

You can use a Kinetic.Tween to scale your fillPattern:

tween = new Kinetic.Tween({
  node:image, 
  fillPatternScaleX:(1+scaleFactor*2),
  fillPatternScaleY:(1+scaleFactor*2),
  fillPatternOffsetX:0,
  fillPatternOffsetY:0,
  duration: .25,
  onFinish:function(){ this.reverse(); }
});
tween.play();

enter image description here

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/NHZAV/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

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

    var tween;
    var scaleFactor=.25;

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

        var image=new Kinetic.Rect({
            x:50,
            y:50,
            width:img.width*(1+scaleFactor*2),
            height:img.height*(1+scaleFactor*2),
            stroke:"red",
            strokeWidth:3,
            fillPatternImage:img,
            fillPatternRepeat:"no-repeat",
            fillPatternOffsetX:-img.width*scaleFactor,
            fillPatternOffsetY:-img.height*scaleFactor,
        });
        layer.add(image);
        layer.draw();

        tween = new Kinetic.Tween({
          node:image, 
          fillPatternScaleX:(1+scaleFactor*2),
          fillPatternScaleY:(1+scaleFactor*2),
          fillPatternOffsetX:0,
          fillPatternOffsetY:0,
          duration: .25,
          onFinish:function(){ this.reverse(); }
        });
        tween.play();

    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png";

    $("#myButton").click(function(){
        tween.play();
    });

}); // end $(function(){});

</script>       
</head>

<body>
    <button id="myButton">Again</button>
    <div id="container"></div>
</body>
</html>ml>

KineticJS image zoom

1 Answers1