画布滚动条不起作用 [英] Canvas Scrollbar not working
问题描述
我在div标签内创建了画布并将背景图像添加到画布。以下是代码：
< div id =containerstyle =width：740px; height：420px>
< canvas id =canvas_draw>< / canvas>
< / div>
#container
{
position：relative;
}
#canvas_draw
{
border：1px dashed #CCCCCC;
margin：5px;
border-style：虚线;
border-width：1px;
背景颜色：#FFFFFF;
overflow：scroll！important;
background-image：url（'Images / sample.jpg'）;
背景重复：不重复;
background-size：900px 600px;
vertical-align：top;
$ b 输出是，滚动条显示在画布上，但无法滚动它。我在Chrome上测试过它。
尝试将滚动功能应用于div，它工作正常，但无法在滚动区域上绘图。因此，我应用了溢出：滚动功能到画布只..我怎样才能解决这个滚动条问题。
感谢提前...
解决方案 将滚动条添加到画布
Canvas是不像其他的html元素。 Html滚动条无法有效滚动大于画布CSS尺寸的画布内容。
一个后退是使用jquery-ui绘制滚动条。
以下是如何向画布添加垂直滚动条，允许在更大的图像上向上/向下滚动： http://jsfiddle.net/m1erickson/a9KDB/
您可以用同样的方式添加水平滚动条。
以下是代码：
<！doctype html>
< html>
< head>
< link rel =stylesheettype =text / cssmedia =allhref =css / reset.css/> <！ - 重置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;
边框：2px纯黑色;
margin：30px 0 2;
溢出：隐藏;
background-color：green;
}
.vertical-scroll {
left：320px;
top：10px;
border：1px纯绿色;
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;
$ b $（。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图像）;
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 =wrapperid =wrap1>
< canvas id =mycanvaswidth =300pxheight =300px/>
< / div>
< div class =vertical-scrollid =vscroll>
< div class =barid =vbar>< / div>
< / div>
< / body>
< / html>
I created canvas inside the div tag and add background image to the canvas. Here is the code:
<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, Scroll-bar displayed on the canvas , but unable to scroll it. I tested it on the Chrome.
Tried with applying the scroll functionality to the div, it's works fine but, unable to draw on scroll area.So, I applied overflow: scroll functionality to the canvas only.. How can I solve this scroll-bar issue.
Thanks in Advance...
解决方案 Add scrollbars to canvas
Canvas is not like other html elements. Html scrollbars cannot effectively scroll through canvas content that is larger than the canvas's css size.
One fallback is to use jquery-ui to draw the scrollbars.
Here is how to add a vertical scrollbar to canvas that allows scrolling up/down over a larger image: http://jsfiddle.net/m1erickson/a9KDB/
You can add a horizontal scrollbar the same way.
Here is the code:
<!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>
这篇关于画布滚动条不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
