hujung hadapan web
tutorial js
Bagaimana untuk membuat segitiga dengan sempadan corak putus-putus menggunakan FabricJS?
Bagaimana untuk membuat segitiga dengan sempadan corak putus-putus menggunakan FabricJS?
Dalam tutorial ini, kami akan mencipta segitiga dengan sempadan corak bertitik menggunakan FabricJS. Segitiga adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi tiga, kita mesti mencipta contoh kelas Fabric.Triangle dan menambahkannya pada kanvas.
Kita boleh menukar rupa sempang sempadan dengan menggunakan sifat borderDashArray. Walau bagaimanapun, objek segi tiga kami mesti mempunyai sempadan untuk sifat ini berfungsi. Harta ini tidak akan mempunyai kesan jika nilai yang salah dinyatakan untuk harta hasBorders.
Syntax
new fabric.Triangle({ borderDashArray: Array }: Object)Parameter
Pilihan (pilihan) - Parameter ini ialah objek< /em> yang menyediakan penyesuaian tambahan kepada segi tiga kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek yang borderDashArray ialah sifat, seperti warna, kursor, lebar lejang dan banyak lagi sifat lain
harta ini menerima sempadanDashArray sempang yang ditentukan ArrayIsytiharkan corak selang melalui tatasusunan.
Kekunci Pilihan
Contoh 1
Melalui borderDashArray sebagai kunci dengan nilai tersuai
Mari kita lihat contoh kod yang mencipta sempadan corak putus-putus menggunakan sifat borderDashArrayS dalam FabricJS. Dalam contoh ini, kami menggunakan tatasusunan [7,10], yang memberitahu kami bahawa corak akan dibuat dengan melukis garisan panjang 7px, diikuti dengan jurang 10px dan mengulangi corak yang sama ini berulang kali.
<!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 borderDashArray as key with a custom value</h2>
<p>Select the triangle to see the dash pattern</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 60,
width: 100,
height: 70,
fill: "#deb887",
borderColor: "red",
borderDashArray: [7, 10],
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Contoh 2
Melalui kunci hasBorders dengan nilai "false"
Seperti yang dapat kita lihat dalam contoh ini, walaupun kita telah menetapkan sifat borderColor dan nilai sempadan berfungsi dengan betul. berfungsi kerana sifat hasBorders telah ditetapkan kepada palsu. Apabila ditetapkan kepada False, kotak sempadan objek tidak diberikan.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk membuat segitiga dengan sempadan corak putus-putus menggunakan FabricJS?. 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
Ganti aksara rentetan dalam javascript
jQuery mendapatkan padding/margin elemen
Mar 01, 2025 am 08:53 AM
jQuery mendapatkan padding/margin elemen
HTTP Debugging dengan Node dan HTTP-Console
Mar 01, 2025 am 01:37 AM
HTTP Debugging dengan Node dan HTTP-Console
Tutorial Persediaan API Carian Google Custom
Mar 04, 2025 am 01:06 AM
Tutorial Persediaan API Carian Google Custom
