KineticJS圖像縮放

我正在開發一個項目，其中我有kineticJS正多邊形fillpatterned圖像，我想縮小懸停。目前我正在使用KineticJS圖像縮放

this.setFillPatternScale(zoom)

爲了縮小，但這只是簡單地改變背景圖像的大小。有沒有什麼辦法讓這個過程更像是一個動畫（比如使用css和轉換緩動），或者比一個突變開關更簡單。我想過使用增量縮放和重新繪製形狀，但看起來非常密集，而且按原樣運行已經很慢了。謝謝！

來源

2013-11-23 Brian

可以使用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>

來源

2013-11-23 22:16:05 markE

真棒！很確定這適合我的需求。非常感謝！ – Brian

KineticJS圖像縮放

回答

相關問題