In diesem Tutorial erfahren Sie, wie Sie die Retina-Skalierung für geklonte Bilder aktivieren Verwenden Sie FabricJS. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. Da es eines der Grundelemente von FabricJS ist, können wir es auch problemlos anpassen Wenden Sie Eigenschaften wie Winkel, Deckkraft usw. an. Um die Skalierung der geklonten Netzhaut zu aktivieren Für Bilder verwenden wir das Attribut enableRetinaScaling. In diesem Fall wird das geklonte Bild skaliert Erhöhen Sie das DevicePixelRatio für eine bessere Darstellung auf Retina-Bildschirmen. es wird keine geben Ändern Sie das Erscheinungsbild des Bildes.
cloneAsImage( callback: function, { enableRetinaScaling : Boolean }: Object): fabric.Object
Callback(optional) – Dieser Parameter ist eine Funktion, die mit der geklonten Bildinstanz als erstes Argument aufgerufen wird.
Optionen (optional) – Dieser Parameter ist ein optionales Objekt, das unserem geklonten Bild zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können wir einen Multiplikator festlegen, das geklonte Bild zuschneiden, die aktuelle Objekttransformation entfernen oder viele andere Eigenschaften ändern, von denen enableRetinaScaling eine Eigenschaft ist.
enableRetinaScaling – Diese Eigenschaft akzeptiert einen Boolean-Wert, der uns erlaubt Aktivieren Sie die Retina-Skalierung für geklonte Bilder.
Schauen wir uns ein Codebeispiel an, um zu verstehen, wann
Verwenden Sie das Attribut „enableRetinaScaling“ und übergeben Sie ihm einen „falschen“ Wert. in diesem Fall,
Die Retina-Skalierung wird nicht aktiviert.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>
Using the enableRetinaScaling property and passing it a ‘false’ value
</h2>
<p>You can see the cloned image with retina scaling disabled</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate a shadow object
var shadow = new fabric.Shadow({
color: "black",
blur: 12,
});
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
skewX: 20,
shadow: shadow,
});
// Using cloneAsImage method
image.cloneAsImage(
function(Img) {
Img.set("top", 150);
Img.set("left", 150);
canvas.add(Img);
}, {
enableRetinaScaling: false,
}
);
</script>
</body>
</html>
verwendet und es als „true“ übergeben.
Wert. Daher wird die Retina-Skalierung für unser geklontes Bild aktiviert.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>
Using the enableRetinaScaling property and passing it a ‘true’ value
</h2>
<p>You can see cloned image with retina scaling enabled</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate a shadow object
var shadow = new fabric.Shadow({
color: "black",
blur: 12,
});
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
skewX: 20,
shadow: shadow,
});
// Using cloneAsImage method
image.cloneAsImage(
function(Img) {
Img.set("top", 150);
Img.set("left", 150);
canvas.add(Img);
}, {
enableRetinaScaling: true,
}
);
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie aktiviere ich die Retina-Skalierung für geklonte Bilder mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
