1

我在 div 中定义了一个画布。我已将 div 中的 oveflow 选项设置为滚动。当我在画布中设置任何内容时。我可以滚动。我怎样才能使用 KineticJS 产生同样的效果？

4

1 回答 1

3

KineticJS 中的滚动条

真的是同一个概念！

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

<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-28T20:17:16.163 回答