html5中动态添加内容的画布垂直滚动条答案

【问题标题】：Vertical scroll bar for canvas with dynamic added content in html5html5中动态添加内容的画布垂直滚动条
【发布时间】：2013-03-04 09:20:32
【问题描述】：

我有一个高度为 480 的画布。我正在使用 Easeljs 在 canvas 中加载图像。每行包含 3 张图像。加载超出画布（480）高度的图像被隐藏。我需要添加垂直滚动条来查看这些图像。我该如何实现。

谢谢，
沙迪亚

【问题讨论】：

标签： html scrollbar easeljs

【解决方案1】：

以下是如何在画布上添加垂直滚动条以允许在较大的图像上向上/向下滚动：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>

【讨论】：

【解决方案2】：

用div包裹画布，然后为div设置高度，最后将overflow-y:auto和overflow-x: hidden属性应用到div。

overflow-y:auto 在需要时显示垂直滚动条 overflow-x: hidden 隐藏水平滚动条

http://jsfiddle.net/V92Gn/3509/

   <div style="height:200px;width:480px; overflow-y:auto;overflow-x: hidden;">
      <canvas id="canvas" style="background:navy" width="480" height="820"></canvas>
    </div>

【讨论】：

【解决方案3】：

我不知道 EaselJS 的任何 ScrollBar-Solutions 并且不可能通过 HTML 做到这一点。所以你必须编写你自己的滚动条，如果你遇到问题，应该有相当多的教程可以在网上找到 ActionScript3 的教程，你可以很容易地为 EaselJS 调整这些教程。

另一种选择是扩展画布本身的高度并向其父容器添加滚动条，但我不确定这是否是一个很好的解决方案。

【讨论】：