滾動條 - KineticJS

我有一個在div中定義的畫布。我在div中設置了選項oveflow選項來滾動。當我在畫布上設置任何內容時。我可以滾動。如何使用KineticJS獲得同樣的效果？滾動條 - KineticJS

2013-03-28 allthenutsandbolts

滾動條在KineticJS

相同的概念真的！

包裝在包裝DIV的kineticJS容器：

<div id="wrapper"> 
    <div id="container"></div> 
</div>

下一組包裝的div到你想要的尺寸較小（與溢出：滾動）：

#wrapper{ overflow:scroll; width:300px; height:350px;}

然後就是設置你的動能舞臺大小，以你的大生命尺寸：

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 740, 
    height: 463 
});

這是代碼和小提琴：http://jsfiddle.net/m1erickson/j4RGL/

<!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://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
} 
#wrapper{ overflow:scroll; width:300px; height:350px; border:2px solid blue; } 
</style>   
<script> 
$(function(){ 

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

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

      var kImg=new Kinetic.Image({ 
       image:image, 
       id:99, 
       x:0, 
       y:0, 
       width:740, 
       height:463, 
       draggable:false 
      }); 
      layer.add(kImg);   
      layer.draw(); 
     } 
     image.src="http://www.mrwallpaper.com/wallpapers/Colorful-New-York-City.jpg"; 


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

</script>  
</head> 

<body> 
<div id="wrapper"> 
    <div id="container"></div> 
</div> 
</body> 
</html>

來源

2013-03-28 20:17:16 markE

不錯！謝謝！ – GobSmack

滾動條 - KineticJS

回答

相關問題