1

divで定義されたキャンバスがあります。divのoveflowオプションをスクロールするオプションに設定しました。キャンバスにコンテンツを設定したとき。スクロールできました。KineticJS を使用して同じ効果を得るにはどうすればよいですか?

4

1 に答える 1

3

KineticJS のスクロールバー

本当に同じコンセプト！

ラッパー div で kineticJS コンテナーをラップします。

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

次に、ラッパー div を目的の小さいサイズに設定します (overflow:scroll を使用):

#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-28T20:17:16.163 に答える