Question

我在div中定义了一个画布。我在div中设置了选项oveflow选项来滚动。当我在画布中设置任何内容时。我能够滚动。如何使用KineticJS获得相同的效果？

Answer 1

KineticJS中的滚动条

真的相同的概念！

将kineticJS容器包装在包装器div中：

<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>

滚动条 - KineticJS

1 个答案: