2013-04-21 12 views
16

Ich habe eine HTML5 Canvas. Ich muss den festen Teil davon im div zeigen (Div1). Wenn ich innerhalb Div1 wische, muss ich die Leinwand scrollen. Während ich scrolle, sehe ich einen entsprechenden Teil der Leinwand.Scrollbare Canvas in div

enter image description here

Ich habe versucht, so etwas wie dieses:

<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

+0

Was funktioniert nicht mit Ihrem Ansatz? –

+0

@ KonstantinD-Infragistics, gut, wenn ich wische, ich weiß nicht, wie Sie die Leinwand bewegen .. Auch ich muss scrollen, ohne die horizontale Bildlaufleiste zu zeigen "Div1" – benjamin54

+0

Wenn Sie scrollen ändern Sie die Marge-links entsprechend. –

Antwort

1
  1. "Blättern" in Leinwand, benötigen Sie 2 Fall behandeln:
    • bind event "mousedown-" in dieser Leinwand und binden Sie das Ereignis "mouseup" in die "mousedown" -Bindungsfunktion ein.
    • binden Ereignis "DOMmouseup" in dieser Leinwand. Benutzer kann Knopf in der Maus drehen, um zu rollen.
  2. Leinwand zu zeigen, wie eine Schriftrolle
    1. Leinwand
    2. Verwenden Clip Redraw() in Leinwand. Re-set das Rechteck dieses Clips, um Ihre Leinwand zu zeigen
  3. Bitte entfernen Sie "Position: absolute" in Ihrer CSS Canvas.Und setzen Höhe für Ihre „div“

Hoffe, es werde dir helfen

-1

Zuerst Sie nicht overflow:hidden verwenden sollten, wo Sie

tat

Sie müssen overflow-x: scroll;

verwenden 10

Im Grunde verstecken Sie die vertikale Bildlaufleiste und machen die Breite des Div größer als die Seite. Und verwenden Sie nicht canvas entweder. Verwenden Sie einfach einen verschachtelten div.

Darüber hinaus wird overflow-x:scroll wirklich nicht benötigt, da es standardmäßig angezeigt wird.

tun:

HTML

<html> 
<body> 
    <div id="container"> 
     <div id="inner"> 
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
     </div> 
    </div> 
</body> 
</html> 

CSS

#container { 
    width: 100%; 
    height: 100%; 
    background: #fff; 
} 
#inner { 
    width: 2000px; 
    height: 300px; 
    margin: 0; 
    padding: 10px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    background: #ccc; 
} 

Hier ist es in jsfiddle arbeiten: http://jsfiddle.net/mDr9r/

+2

Ist das ein Fehler, scheint Benutzer2284052 nicht zu existieren. –

+2

Die Frage bezieht sich speziell darauf, wie eine Leinwand geblättert wird. Eine Antwort, die sagt, benutze keine Leinwand, ist keine große Antwort! – pancake

6

es wird nicht funktionieren (Leinwand Scrollen von innen Div in einigen "Design" -Bedingungen), zuerst ist Ihr Überlauf versteckt. Versuchen Sie stattdessen, den Inhalt innerhalb der Zeichenfläche zu scrollen.

OR, versuchen Sie dies: 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>

0

Die Linien des div gezogen werden. Set-Zeilengröße auf 0:

DIVofCanvas { 
    line-height: 0px; 
} 
1

Hier ist eine Demo eines überdimensionalen Leinwand zu verwenden, und mit Mausbewegungen des Scrollen mit der CSS-Marge Anpassung: 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);