Canvas Scrollbar not working

2019-01-20 12:32发布

站内问答 / Html5
1492 2 6

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...

2条回答
小情绪 Triste *
2楼-- · 2019-01-20 13:00

That seems a lot of extra code to do something that seems simple using css and normal html. However, as was stated above, you'll have to size your canvas via code for each image loaded. We're doing the same thing setting the canvas to the image size via jQuery.

You need to account for the scrollbar width when you set the width of your wrapper div. You should also set this width in your code based on browser. The only issue is the scrollbar width is different between different browser rendering engines.

Here's a link talking about that: http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/

Here's code that simplifies scrolling using just html and 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>
查看更多
0人赞 添加讨论(0) 举报
狗以群分
3楼-- · 2019-01-20 13:03

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)