Overlay Leinwand über Leinwand

Question

Ich habe folgenden Code unten, mit einer JavaScript-Bibliothek, kann ich in der ersten Leinwand zeichnen dann auf die zweite Leinwand zusammenführen.

Die Frage ist, wie mache ich die erste Leinwand statisch oder float, unabhängig davon, wo ich die zweite Leinwand scrollen.

#container { 
    position: relative; 
    border: 1px solid black; 
    overflow: auto; 
    width:400px; 
    height:200px; 
} 
#canvas1 { 
    position: absolute; 
    left: 0; 
    top: 0; 
    border: 3px solid green; 
    width:100%; 
    height:100%; 
} 
#canvas2 { 
    position: absolute; 
    left: 0; 
    top: 0; 
    border: 2px solid red; 
} 

<div id="container"> 
    <canvas id="canvas1"></canvas> 
    <canvas id="canvas2" height="1200" width="800"></canvas> 
</div> 

https://jsfiddle.net/wz2g8hwz/

Answer 1

Gerade jetzt scrollen Sie das Element, das sowohl der Leinwand enthält - so beide bewegen. Legen Sie also die zweite Arbeitsfläche in ein eigenes Containerelement, und legen Sie stattdessen einen Überlauf fest, sodass nur der Inhalt dieses Containers (der nur die zweite Arbeitsfläche ist) verschoben wird.

Das neue Containerelement muss auf die gleiche Weise positioniert werden wie die zweite Leinwand zuvor (absolut), und diese Leinwand selbst ist dann nicht mehr absolut.

Im folgenden Beispiel habe ich die leeren Leinwände durch Bilder ersetzt, so dass der Effekt sichtbar wird. (Leider sind die Bilder aus dem Platzhalter-Dienst scheinen nicht mehr über HTTPS zu arbeiten, das gestern gearbeitet. Aber hast du die allgemeine Idee, glaube ich.) https://jsfiddle.net/wz2g8hwz/4/

#container { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    width: 400px; 
 
    height: 200px; 
 
} 
 

 
#canvas1 { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    border: 3px solid green; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#innerContainer { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    border: 2px solid red; 
 
} 
 

 
#canvas2 { 
 
    opacity: .5; 
 
    width: 1200px; 
 
    height: 800px; 
 
}

<div id="container"> 
 
    <img id="canvas1" src="//via.placeholder.com/400x200"> 
 
    <div id="innerContainer"> 
 
    <img id="canvas2" src="//via.placeholder.com/1200x800"> 
 
    </div> 
 
</div>

Answer 2

Nur Fügen Sie width:100% und height:100% auf # canvas2 hinzu.

So.

#canvas2 { 
    position: absolute; 
    left: 0; 
    top: 0; 
    border: 2px solid red; 
    width: 100%; 
    height: 100%; 
}