Question

我正在开发一个项目，我在其中使用kineticJS常规多边形fillpatterned图像，我想在悬停时缩小。目前我正在使用

    this.setFillPatternScale(zoom)

为了缩小，但这只是突然改变了背景图像的大小。有没有办法让这个过程更像一个动画（比如使用css和过渡缓解）或者比一个突然的开关更简单。我考虑过使用增量缩放和重新绘制形状，但这看起来非常密集，而且运行起来已经很慢了。谢谢！

Answer 1

您可以使用Kinetic.Tween来扩展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

这是代码和小提琴：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图像变焦

1 个答案: