27

私はhtml5キャンバスを持っています。その固定部分を div( Div1) で表示する必要があります。内部をスワイプDiv1すると、キャンバスをスクロールする必要があります。スクロールすると、キャンバスの対応する部分が表示されます。

ここに画像の説明を入力

私はこのようなことを試しました：

<div id="Div1" style=" float: left; width: 50px; overflow:hidden; ">
   <canvas id="myCanvas1" width="200px" style="border: 1px solid #ff0000; position: absolute;">
   </canvas>
</div>

jsFiddled here

4

5 に答える 5

11

機能しません（一部の「デザイン」条件でdiv内からキャンバスをスクロールする）。最初にオーバーフローが非表示になります。代わりに、キャンバス内のコンテンツをスクロールしてみてください。

または、これを試してください: http://jsfiddle.net/9g3GG/2/

<div id="Div1" style=" float: left; width: 150px; overflow:scroll; ">
        <canvas id="myCanvas1" width="200" style="border:1px solid #ff0000;">asdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdf</canvas>
    </div>

于 2013-04-21T06:47:47.547 に答える
9

これは、特大のキャンバスを使用し、CSS マージンを調整してマウスの動きに合わせてスクロールするデモです: https://jsfiddle.net/ax7n8944/

HTML:

<div id="canvasdiv" style="width: 500px; height: 250px; overflow: hidden">
    <canvas id="canvas" width="10000px" height="250px"></canvas>
</div>

JS:

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var dragging = false;
var lastX;
var marginLeft = 0;

for (var i = 0; i < 1000; i++) {
    context.beginPath();
    context.arc(Math.random() * 10000, Math.random() * 250, 20.0, 0, 2 * Math.PI, false);
    context.stroke();
} 

canvas.addEventListener('mousedown', function(e) {
    var evt = e || event;
    dragging = true;
    lastX = evt.clientX;
    e.preventDefault();
}, false);

window.addEventListener('mousemove', function(e) {
    var evt = e || event;
    if (dragging) {
        var delta = evt.clientX - lastX;
        lastX = evt.clientX;
        marginLeft += delta;
        canvas.style.marginLeft = marginLeft + "px";
    }
    e.preventDefault();
}, false);

window.addEventListener('mouseup', function() {
    dragging = false;
}, false);
于 2016-04-09T00:34:01.900 に答える
2

キャンバス内をスクロールすることをお勧めします。これを行うには、この Phaser プラグインを参照してください https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

于 2015-07-12T19:32:20.637 に答える
1
  1. canvas で「スクロール」するには、2 つのケースを処理する必要があります。
    • このキャンバスでイベント「mousedown」をバインドし、「mousedown」バインディング関数でイベント「mouseup」をバインドします。
    • このキャンバスでイベント「DOMmouseup」をバインドします。ユーザーはマウスのホイール ボタンでスクロールできます。
  2. キャンバスをスクロールのように表示するには
    1. キャンバスの再描画
    2. キャンバスで clip() を使用します。このクリップの長方形を再設定して、キャンバスを表示します
  3. canvas の css で「position:absolute」を削除してください。「div」の高さを設定します

それがあなたを助けることを願っています

于 2014-01-20T14:13:15.703 に答える
0

div の線が描画されます。線のサイズを 0 に設定:

DIVofCanvas {
    line-height: 0px;
}
于 2014-04-29T18:10:42.727 に答える