画布滚动条不起作用

我在div标签内创建了画布，并将背景图像添加到画布上。这里是代码：画布滚动条不起作用

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

输出是，滚动条显示在画布上，但无法滚动它。我在Chrome上进行了测试。尝试将滚动功能应用于div，它的工作正常，但是，unable to draw on scroll area。因此，我将overflow: scroll功能仅应用于画布。如何解决此滚动条问题。

在此先感谢...

来源

2013-03-13 Lokesh

添加滚动条，而以帆布

帆布并不像其他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>

来源

2013-03-13 12:38:10 markE

这似乎是很多额外的代码做一些看似简单使用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>

来源

2013-10-22 20:37:22 Bob

画布滚动条不起作用

回答

相关问题