Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk mencipta contoh fabric.Imej daripada perwakilan objeknya?
FabricJS - Bagaimana untuk mencipta contoh fabric.Imej daripada perwakilan objeknya?
- WBOYke hadapan
- 2023-08-25 21:17:14718semak imbas
Dalam tutorial ini kami akan menunjukkan kepada anda cara membuat contoh Fabric.Image Diperolehi daripada perwakilan objeknya menggunakan FabricJS. Kita boleh mencipta objek Imej dengan Buat contoh fabrik.Imej. Oleh kerana ia adalah salah satu elemen asas FabricJS, Kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mencipta contoh fabrik.Imej daripada perwakilan objeknya, kami gunakan kaedah fromObject.
Tatabahasa
fromObject(object: Object, callback: function)
Parameter
objek - Parameter ini menerima objek yang mewakili objek yang akan diperolehi daripada Imej akan dibuat.
panggilan balik - Parameter ini ialah fungsi apabila imej Contoh dibuat.
Jangan gunakan fromObjectkaedah
Contoh
Mari kita lihat contoh kod untuk memahami cara objek Imej muncul apabila fromObject Kaedah tidak digunakan. Dalam kes ini, kita hanya perlu mencipta contoh fabrik.Imej dan Tambahkan ini pada kanvas kami.
<!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 fromObject method</h2>
<p>You can see that the image object has been added to the canvas</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 an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Gunakan fromObjectkaedah
Contoh
Dalam contoh ini, kami menggunakan kaedah fromObject untuk menunjukkan bahawa kami boleh Objek imej boleh dibuat walaupun kita tidak mempunyai elemen imej. Dalam kes ini kita Objek dari mana contoh imej perlu dibuat. selepas Panggil fungsi panggil balik dan tambahkannya pada kanvas.
<!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 fromObject method</h2>
<p>You can see that the image has been added</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Using fromObject method
fabric.Image.fromObject({
type: "image",
version: "5.1.0",
originX: "left",
originY: "top",
left: 110,
src: "https://www.tutorialspoint.com/images/logo.png",
},
function(oImg) {
oImg.set("top", 50);
canvas.add(oImg);
}
);
</script>
</body>
</html>
Kesimpulan
Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara mencipta tika Dapatkan Fabric.Image daripada perwakilan objeknya menggunakan FabricJS.
Atas ialah kandungan terperinci FabricJS - Bagaimana untuk mencipta contoh fabric.Imej daripada perwakilan objeknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!