我在div标签内创建了canvas,并将背景图像添加到画布中。这是代码:
<div id="container" style="width: 740px; height: 420px">
<canvas id="canvas_draw"></canvas>
</div>
#container
{
position: relative;
}
#canvas_draw
{
border: 1px dashed #CCCCCC;
margin: 5px;
border-style: dotted;
border-width: 1px;
background-color: #FFFFFF;
overflow:scroll !important;
background-image:url('Images/sample.jpg');
background-repeat: no-repeat;
background-size: 900px 600px;
vertical-align: top;
}
Out put is,滚动条显示在画布上,但无法滚动它。我在Chrome上测试过它。
尝试将滚动功能应用于div,它可以正常工作,但unable to draw on scroll area
。所以,我只将overflow: scroll
功能应用于画布..如何解决此滚动条问题。
提前致谢...
答案 0 :(得分:4)
将滚动条添加到画布
Canvas与其他html元素不同。 Html滚动条无法有效滚动大于画布css大小的画布内容。
一个后备是使用jquery-ui绘制滚动条。
以下是如何向画布添加垂直滚动条,以允许在较大的图像上向上/向下滚动:http://jsfiddle.net/m1erickson/a9KDB/
您可以用同样的方式添加水平滚动条。
以下是代码:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
body{ background-color: ivory; }
div, canvas {
position:absolute;
}
.wrapper {
top:10px;
left:10px;
width: 300px;
height: 300px;
border: 2px solid black;
margin:30px 0 2;
overflow: hidden;
background-color:green;
}
.vertical-scroll {
left:320px;
top:10px;
border: 1px solid green;
width: 20px;
height: 300px;
}
.vertical-scroll div.bar {
left:0px;
top:0px;
width: 20px;
background-color: blue;
height: 20px;
}
#mycanvas {
left:0px;
top:0px;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var wrapper;
var canvasHeight;
var vScrollHeight;
var canvasWrapperHeight=300;
$(".bar").draggable({
containment: "parent"
});
$(".bar").on("drag", function (event, ui) {
var ctop=(-ui.position.top * canvasHeight / canvasWrapperHeight);
canvas.style.top = ctop + "px"
});
var img=new Image();
img.onload=function(){
canvas.width=this.width;
canvas.height=this.height;
canvasHeight=this.height;
vbarHeight=canvasWrapperHeight*canvasWrapperHeight/canvasHeight;
document.getElementById("vbar").style.height=vbarHeight+"px";
ctx.drawImage(this,260,0,300,this.height,0,0,300,this.height);
}
img.src="http://sciencedude.blog.ocregister.com/files/2008/02/zot1-copy.jpg";
}); // end $(function(){});
</script>
</head>
<body>
<div class="wrapper" id="wrap1">
<canvas id="mycanvas" width="300px" height="300px" />
</div>
<div class="vertical-scroll" id="vscroll">
<div class="bar" id="vbar"></div>
</div>
</body>
</html>
答案 1 :(得分:2)
这似乎是很多额外的代码,可以使用css和普通的html做一些看似简单的事情。但是,如上所述,您必须通过代码为每个加载的图像调整画布大小。我们正在通过jQuery将画布设置为图像大小。
设置包装器div的宽度时,需要考虑滚动条的宽度。您还应该根据浏览器在代码中设置此宽度。唯一的问题是不同浏览器渲染引擎之间的滚动条宽度是不同的。
以下是关于此问题的链接:http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/
这是使用html和css简化滚动的代码。
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
body{ background-color: ivory; }
div, canvas {
position:absolute;
}
.wrapper {
top:10px;
left:10px;
width: 318px; /* adjusted hard-coded scrollbar width; you should set this with js */
height: 300px;
border: 2px solid black;
margin:30px 0 2;
overflow-y: scroll; /* scrolling vertical only */
overflow-x: hidden; /* hiding horizontal scrollbar */
background-color: green;
}
#mycanvas {
left:0px;
top:0px;
}
</style>
<script>
$(function(){
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var wrapper;
var canvasHeight;
var img = new Image();
img.onload = function () {
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(this, 260, 0, 300, this.height, 0, 0, 300, this.height);
}
img.src = "http://sciencedude.blog.ocregister.com/files/2008/02/zot1-copy.jpg";
}); // end $(function(){});
</script>
</head>
<div class="wrapper" id="canvaswrapper">
<canvas id="mycanvas" width="300px" height="300px" />
</div>
</body>
</html>