3

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しました..どうすればこのスクロールバーの問題を解決できますか.

前もって感謝します...

4

2 に答える 2

4

スクロールバーをキャンバスに追加する

Canvas は他の HTML 要素とは異なります。Html スクロールバーは、キャンバスの css サイズよりも大きいキャンバス コンテンツを効果的にスクロールできません。

1 つのフォールバックは、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-13T12:38:10.043 に答える
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>
于 2013-10-22T20:37:22.680 に答える