KineticJS 이미지 확대

나는 hobby에서 축소하고자하는 이미지로 가득 찬 kineticJS 정다각형을 가진 프로젝트에서 작업하고 있습니다. 현재 축소를 위해KineticJS 이미지 확대

을 사용하고 있지만 배경 이미지의 크기가 약간 변경됩니다. 이 과정을 애니메이션 (CSS 및 전환 용이성 사용) 또는 급격한 전환보다 더 부드럽게 만드는 방법이 있습니까? 나는 증분 스케일링을 사용하고 모양을 다시 그리는 것에 대해 생각했지만 상당히 집중적 인 것처럼 보였고 이미 실행하기에는 꽤 느리다. 감사!

출처

2013-11-23 Brian

당신은 당신의 fillPattern을 확장하기 위해 Kinetic.Tween를 사용할 수 있습니다

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 이미지 확대

답변

관련 문제