Rumah > Artikel > hujung hadapan web > Bagaimana untuk meluruskan objek Imej menggunakan FabricJS?
Bagaimana untuk meluruskan objek Imej menggunakan FabricJS?
- WBOYke hadapan
- 2023-09-14 16:53:021401semak imbas
Dalam tutorial ini, kita akan belajar cara meluruskan objek imej menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta instance fabric.Image. Oleh kerana ia adalah satu Elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah melalui aplikasi Sifat seperti sudut, kelegapan, dsb. Untuk meluruskan objek imej yang kami gunakan MeluruskanKaedah.
Tatabahasa
straighten(): fabric.Object
Pas nilai kepada sifat sudut tanpa menggunakan luruskan Kaedah
Contoh
Mari kita lihat contoh kod untuk melihat rupa objek Imej kita apabila luruskan Kaedah tidak digunakan. Kaedah luruskan luruskan berfungsi dengan memutarkan objek dari kedudukannya Sudut semasa ialah 0, 90, 180, atau 270, dsb., bergantung pada sudut mana yang lebih dekat. sudut Harta menetapkan sudut putaran objek dalam darjah. Di sini kami nyatakan Sudutnya ialah 45. Tetapi kerana kami tidak menggunakan atribut luruskan, sudut putaran Ia akan kekal 45 darjah.
<!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>
Passing the angle property a value without using the straighten method
</h2>
<p>You can see that the Image object has an angle of 45 degrees</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,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Menggunakan kaedah luruskan
Contoh
Mari kita lihat contoh kod untuk melihat rupa objek Imej apabila luruskan Kaedah yang digunakan bersama dengan sifat sudut. Walaupun kita telah menetapkan sudut Diputar kepada 45 darjah, objek imej kita akan diluruskan dengan memutarkannya kembali kepada 0 ijazah kerana kami telah menggunakan kaedah meluruskan.
<!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 straighten method</h2>
<p>
You can see that the angle of rotation is 0 degree for the image object
</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,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
// Using the straighten method
image.straighten();
</script>
</body>
</html>
Atas ialah kandungan terperinci Bagaimana untuk meluruskan objek Imej menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!