it-swarm.com.de

Scrollbare Leinwand in div

Ich habe eine HTML5-Leinwand. Ich muss den festen Teil davon im div (Div1) anzeigen. Wenn ich in Div1 wische, muss ich die Leinwand scrollen. Beim Scrollen sehe ich den entsprechenden Teil der Leinwand. 

enter image description here

Ich habe so etwas ausprobiert:

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

20
benjamin54
  1. "Blättern" in der Leinwand, müssen Sie 2 Fall behandeln:
    • binden Sie das Ereignis "mousedown" in dieser Zeichenfläche und binden Sie das Ereignis "mouseup" in der Bindungsfunktion "mousedown".
    • binden Sie das Ereignis "DOMmouseup" in dieser Leinwand. Der Benutzer kann die Taste in der Maus bewegen, um einen Bildlauf durchzuführen.
  2. So zeigen Sie die Leinwand wie eine Schriftrolle an
    1. Leinwand neu zeichnen 
    2. Verwenden Sie clip () in der Leinwand. Stellen Sie das Rechteck dieses Clips so ein, dass Ihre Leinwand angezeigt wird
  3. Bitte entfernen Sie "Position: Absolut" in Ihrer Css der Leinwand. Und setze die Höhe für dein "div"

Ich hoffe es hilft dir

0
LogPi

es funktioniert nicht (Scrollen der Leinwand von div in einigen 'Design'-Bedingungen), zuerst wird Ihr Überlauf ausgeblendet. Scrollen Sie stattdessen mit content innerhalb der Leinwand.

ODER probieren Sie folgendes: 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>

11
Milche Patern

Hier ist ein Beispiel für die Verwendung einer übergroßen Leinwand und das Scrollen mit Mausbewegungen durch Anpassen des CSS-Randes: 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);
3
pancake

Es ist besser, innerhalb der Leinwand zu scrollen. Dieses Phaser-Plugin enthält folgende Informationen. https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

2
jdnichollsc

Die Zeilen des div werden gezeichnet. Liniengröße auf 0 setzen:

DIVofCanvas {
    line-height: 0px;
}
0
PeterFochs