hujung hadapan web
tutorial js
FabricJS - Bagaimana untuk membuang bayang objek semasa dalam imej klon?
FabricJS - Bagaimana untuk membuang bayang objek semasa dalam imej klon?
Dalam tutorial ini, kita akan belajar cara mengalih keluar bayang objek semasa dalam imej klon menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh fabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mengalih keluar bayang objek semasa dalam imej klon, kami menggunakan atribut withoutShadow.
tatabahasa
cloneAsImage( callback: function, { withoutShadow: Boolean }: Object): fabric.Object
parameter
Panggil Balik (pilihan) - Parameter ini ialah fungsi yang akan menggunakan contoh imej klon Yang pertama memanggil hujah.
options (pilihan) - Parameter ini ialah objek pilihan yang memberikan kami imej Klon tambahan penyesuaian. Menggunakan parameter ini kita boleh menetapkan pengganda, memangkas imej yang diklon, mengalih keluar transformasi objek semasa atau boleh menukar banyak sifat lain, yang mana tanpaBayang ialah harta.
Kunci pilihan
withoutShadow - Sifat ini menerima Boolean nilai yang menentukan sama ada untuk mengalih keluar objek semasa Atribut ini adalah pilihan.
Gunakan atribut withoutShadow dan berikan nilai "benar"
Contoh
Mari lihat contoh kod untuk melihat cara objek Imej yang diklonkan dipaparkan apabila menggunakan sifat withoutShadow dan menghantar nilai "benar" kepadanya. Di sini, objek imej telah diberikan sifat bayang-bayang. Walau bagaimanapun, memandangkan kami memberikan nilai "benar" kepada harta withoutShadow, bayang objek akan dialih keluar dan imej klon kami tidak akan mempunyai bayang-bayang lagi.
<!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 withoutShadow property and passing it a ‘true’ value</h2>
<p>You can see that clone image does not have a shadow</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);
},
{
withoutShadow: true,
}
);
</script>
</body>
</html>
Gunakan atribut withoutShadow dan berikan nilai "palsu"
Contoh
Dalam contoh ini, kami menggunakan atribut withoutShadow dan memberikannya nilai "palsu". Oleh itu, bayang objek klon kami tidak akan dialih keluar.
<!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 withoutShadow property and passing it a ‘false’ value</h2>
<p>You can see that clone image contains a shadow</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);
},
{
withoutShadow: false,
}
);
</script>
</body>
</html>
Atas ialah kandungan terperinci FabricJS - Bagaimana untuk membuang bayang objek semasa dalam imej klon?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Ganti aksara rentetan dalam javascript
Mar 11, 2025 am 12:07 AM
Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi
periksa jQuery jika tarikh sah
Mar 01, 2025 am 08:51 AM
Fungsi JavaScript mudah digunakan untuk memeriksa sama ada tarikh sah. fungsi isvaliddate (s) { var bits = s.split ('/'); var d = tarikh baru (bit [2] '/' bits [1] '/' bits [0]); kembali !! (d && (d.getmonth () 1) == bit [1] && d.getdate () == nombor (bit [0])); } // ujian var
jQuery mendapatkan padding/margin elemen
Mar 01, 2025 am 08:53 AM
Artikel ini membincangkan cara menggunakan jQuery untuk mendapatkan dan menetapkan margin dalaman dan nilai margin elemen DOM, terutama lokasi tertentu margin luar dan margin dalaman elemen. Walaupun ada kemungkinan untuk menetapkan margin dalaman dan luar elemen menggunakan CSS, nilai yang tepat boleh menjadi rumit. // Sediakan $ ("div.header"). css ("margin", "10px"); $ ("div.header"). css ("padding", "10px"); Anda mungkin menganggap kod ini
10 Tab Accordion JQuery
Mar 01, 2025 am 01:34 AM
Artikel ini meneroka sepuluh tab jQuery yang luar biasa dan akordion. Perbezaan utama antara tab dan akordion terletak pada bagaimana panel kandungan mereka dipaparkan dan tersembunyi. Mari kita menyelidiki sepuluh contoh ini. Artikel Berkaitan: 10 JQuery Tab Plugin
10 patut diperiksa plugin jQuery
Mar 01, 2025 am 01:29 AM
Temui sepuluh plugin jQuery yang luar biasa untuk meningkatkan dinamisme dan daya tarikan visual laman web anda! Koleksi ini menawarkan pelbagai fungsi, dari animasi imej ke galeri interaktif. Mari kita meneroka alat yang berkuasa ini: Posting Berkaitan: 1
HTTP Debugging dengan Node dan HTTP-Console
Mar 01, 2025 am 01:37 AM
HTTP-CONSOLE adalah modul nod yang memberi anda antara muka baris arahan untuk melaksanakan arahan HTTP. Ia bagus untuk menyahpepijat dan melihat apa yang sedang berlaku dengan permintaan HTTP anda, tanpa mengira sama ada mereka dibuat terhadap pelayan web, Serv Web
Tutorial Persediaan API Carian Google Custom
Mar 04, 2025 am 01:06 AM
Tutorial ini menunjukkan kepada anda bagaimana untuk mengintegrasikan API carian Google tersuai ke dalam blog atau laman web anda, menawarkan pengalaman carian yang lebih halus daripada fungsi carian tema WordPress standard. Ia menghairankan mudah! Anda akan dapat menyekat carian ke y
jQuery tambah bar scroll ke div
Mar 01, 2025 am 01:30 AM
Coretan kod jQuery berikut boleh digunakan untuk menambah bar skrol apabila kandungan div melebihi kawasan elemen kontena. (Tiada demonstrasi, sila salin terus ke Firebug) // d = dokumen // w = tetingkap // $ = jQuery var contentArea = $ (ini), Wintop = contentArea.scrollTop (), docheight = $ (d) .height (), winheight = $ (w) .height (), Divheight = $ ('#c
