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