1
我有一个在div中定义的画布。我在div中设置了选项oveflow选项来滚动。当我在画布上设置任何内容时。我可以滚动。如何使用KineticJS获得同样的效果?滚动条 - KineticJS
我有一个在div中定义的画布。我在div中设置了选项oveflow选项来滚动。当我在画布上设置任何内容时。我可以滚动。如何使用KineticJS获得同样的效果?滚动条 - KineticJS
滚动条在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>
不错!谢谢! – GobSmack