Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan pengganda untuk menskalakan imej klon menggunakan FabricJS?
Bagaimana untuk menetapkan pengganda untuk menskalakan imej klon menggunakan FabricJS?
- 王林ke hadapan
- 2023-08-27 19:21:10588semak imbas
Dalam tutorial ini, kita akan belajar cara menetapkan pengganda untuk menskala imej klon menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta instance fabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk menetapkan pengganda kepada skala imej yang diklon, kami menggunakan atribut pengganda.
Tatabahasa
cloneAsImage( callback: function, { multiplier: Number}: Object): fabric.Object
Parameter
Panggil balik (pilihan) - Parameter ini ialah fungsi yang akan menggunakan contoh imej klon sebagai hujah panggilan pertama.
Pilihan (pilihan) - Parameter ini ialah objek pilihan yang menyediakan penyesuaian tambahan kepada imej klon kami. Menggunakan parameter ini kita boleh menetapkan pengganda, memangkas imej yang diklon, mengalih keluar perubahan objek semasa atau boleh mengubah banyak sifat, yang mana Pendarab ialah harta.
Kunci pilihan
multiplier - Hartanah ini menerima nilai Nombor yang mewakili pengganda yang mana imej output akhir diskalakan. Nilai lalai ialah 1.
Jangan gunakan atribut multiplier
Contoh
Mari kita lihat contoh kod untuk melihat cara objek Imej yang diklonkan dipaparkan apabila sifat pengganda tidak digunakan. Dalam kes ini, nilai pengganda lalai 1 digunakan.
<!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>Without using the multiplier property</h2>
<p>You can see that the clone image uses the default multiplier</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: "#308080",
blur: 3,
});
// 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) {
canvas.add(Img);
});
</script>
</body>
</html>
Gunakan atribut Pengganda
Contoh
Dalam contoh ini, kami menggunakan atribut multiplier dan memberikannya nilai 2 untuk menunjukkan bahawa imej klon akhir akan diskalakan dua kali dalam arah x dan y.
<!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 multiplier property</h2>
<p>You can see that the clone image has been scaled</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: "#308080",
blur: 3,
});
// 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", 90);
canvas.add(Img);
},
{
multiplier: 2,
}
);
</script>
</body>
</html>
Atas ialah kandungan terperinci Bagaimana untuk menetapkan pengganda untuk menskalakan imej klon menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!