Funktioniert „object-fit“ mit Canvas-Elementen?

Kann die Objektanpassung auf Leinwandelemente angewendet werden?

Trotz umfangreicher Forschung war es schwierig festzustellen, ob die Objektanpassung möglich ist Wird mit Leinwandelementen verwendet. Einige Experimente haben unerwartetes Verhalten gezeigt, was Entwickler hinsichtlich seiner Funktionalität im Unklaren lässt.

Objektanpassung definieren

Objektanpassung bestimmt, wie ein Objekt auf Änderungen seines Seitenverhältnisses reagiert . Wenn sich die Abmessungen eines übergeordneten Elements ändern, passt die Eigenschaft „Objektanpassung“ das enthaltene Objekt an, um seine Integrität zu wahren. Diese Eigenschaft gilt ausschließlich für ersetzte Elemente, zu denen auch Canvas-Elemente gehören.

Auswirkung auf Canvas-Elemente

Objektanpassung wird nur wirksam, wenn sich das Verhältnis ändert, d. h. wenn das Seitenverhältnis des Canvas-Elements geändert wird. In solchen Szenarien wendet die object-fit-Eigenschaft die folgenden Transformationen an:

• Object-fit: cover: Streckt das enthaltene Bild so aus, dass es das gesamte übergeordnete Element abdeckt, wodurch das Bild möglicherweise verzerrt wird .
• Objektanpassung: enthält: Behält das Seitenverhältnis des Bildes innerhalb des übergeordneten Elements bei und lässt bei Bedarf leeren Raum.

Beispiel

Der folgende Code demonstriert die Auswirkung der Objektanpassung auf Canvas-Elemente:

<code class="html"><div class="box">
  <canvas width="200" height="200"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="object-fit:contain;"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="object-fit:cover;"></canvas>
</div></code>

In diesem Fall wird das Element ohne Objektanpassung verzerrt, während das Element mit Objekt -fit: CONTAIN behält sein ursprüngliches Seitenverhältnis bei. Das Element mit object-fit: cover streckt das Bild, um die Abmessungen des übergeordneten Elements auszufüllen.

Das obige ist der detaillierte Inhalt vonFunktioniert „object-fit“ mit Canvas-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!