在本教程中，我們將學(xué)習(xí)如何為克隆圖像啟用視網(wǎng)膜縮放
使用 FabricJS。我們可以通過創(chuàng)建fabric.Image的實(shí)例來創(chuàng)建一個(gè)Image對(duì)象。
由于它是FabricJS的基本元素之一，我們也可以輕松地自定義它
應(yīng)用角度、不透明度等屬性。為了使克隆的視網(wǎng)膜縮放
圖像，我們使用 enableRetinaScaling 屬性。在這種情況下，克隆圖像被縮放
通過 devicePixelRatio 提高，以便在視網(wǎng)膜屏幕上獲得更好的渲染效果。將沒有
改變圖像的外觀。
語法
cloneAsImage( callback: function, { enableRetinaScaling : Boolean }: Object): fabric.Object
登錄后復(fù)制
參數(shù)
回調(diào)（可選） – 此參數(shù)是一個(gè)函數(shù)，將使用克隆圖像調(diào)用實(shí)例作為第一個(gè)參數(shù)。
選項(xiàng)（可選） – 此參數(shù)是一個(gè)可選對(duì)象，它為我們的克隆圖像提供額外的自定義。使用此參數(shù)，我們可以設(shè)置乘數(shù)、裁剪克隆圖像、刪除當(dāng)前對(duì)象變換或可以更改許多其他屬性，其中 enableRetinaScaling 是一個(gè)屬性。
選項(xiàng)鍵
enableRetinaScaling – 此屬性接受一個(gè) Boolean 值，該值允許我們
為克隆圖像啟用視網(wǎng)膜縮放。
使用enableRetinaScaling屬性并為其傳遞一個(gè)“false”值
示例
讓我們看一個(gè)代碼示例，了解當(dāng)
使用 enableRetinaScaling 屬性并向其傳遞“false”值。在這種情況下，
將不會(huì)啟用視網(wǎng)膜縮放。
<!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>
登錄后復(fù)制
使用 enableRetinaScaling 屬性并向其傳遞一個(gè)“true”值
示例
在此示例中，我們使用了 enableRetinaScaling 屬性并為其傳遞了“true”
價(jià)值。因此，將為我們的克隆圖像啟用視網(wǎng)膜縮放。
<!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>
登錄后復(fù)制
以上就是如何使用 FabricJS 為克隆圖像啟用視網(wǎng)膜縮放？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
