Dalam tutorial ini kita akan belajar cara memangkas atasimbang dalam imej klon menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh fabric.Image. sejak Ia adalah salah satu elemen asas FabricJS dan kami juga boleh menyesuaikannya dengan mudah melalui aplikasi Sudut, kelegapan dan sifat lain. Untuk memangkas offset atas dalam imej klon, kami Gunakan atribut top.
cloneAsImage( callback: function, { top: Number}: Object): fabric.Object
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 pada imej klon kami. Menggunakan parameter ini, kita boleh menetapkan pengganda, memangkas imej yang diklon, mengalih keluar transformasi objek semasa atau boleh menukar banyak sifat, yang mana atas adalah satu sifat.
top - Hartanah ini menerima nilai Nombor, menunjukkan bahawa atas mesti diimbangi Dipotong. Atribut ini adalah pilihan.
Mari lihat contoh kod untuk memahami cara objek Imej klon muncul apabila atas Harta tidak digunakan. Dalam kes ini, imej klon tidak akan dipangkas.
<!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 top property</h2>
<p>You can see that no cropping has been applied to the clone image</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);
});
</script>
</body>
</html>
Dalam contoh ini kami menggunakan atribut top dan memberikannya nilai 30 iaitu atas mengimbangi imej klon yang dipangkas. Oleh itu, bahagian atas akan dipotong.
<!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 top property</h2>
<p>You can see that cropping has been applied to the clone image</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", 150);
canvas.add(Img);
}, {
top: 30,
}
);
</script>
</body>
</html>
Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara memangkas offset atas Klon imej menggunakan FabricJS.
Atas ialah kandungan terperinci Bagaimana untuk memotong offset atas dalam imej klon menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Antivirus telefon mudah alih Apple
Tutorial membeli dan menjual Bitcoin di Huobi.com
Apakah maksud memformat telefon mudah alih?
Apakah perpustakaan kecerdasan buatan python?
penyelesaian pengecualian mysql
Apakah format m4a?
Ringkasan pengetahuan asas java
Penyelesaian laporan ralat fail sql import MySQL
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
