Rumah > Artikel > hujung hadapan web > Bagaimana untuk membalikkan segitiga secara mendatar menggunakan FabricJS?
Bagaimana untuk membalikkan segitiga secara mendatar menggunakan FabricJS?
- WBOYke hadapan
- 2023-09-14 18:09:061411semak imbas
Dalam tutorial ini, kita akan belajar cara membalikkan objek Segitiga secara mendatar 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 membalikkan objek segi tiga secara mendatar menggunakan sifat flipX.
Syntax
new fabric.Triangle({ flipX: Boolean }: Object)Parameter
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada segi tiga kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang flipX ialah atribut.
flipX − Sifat ini menerima nilai boolean yang membolehkan kita membalikkan objek secara mendatar.
Option Key
Contoh 1
Meluluskan flipX sebagai kunci dengan nilai "palsu"
Mari kita lihat contoh kod yang menunjukkan kepada kita orientasi lalai objek segi tiga dalam FabricJS. Memandangkan kami memberikan nilai False kepada sifat flipX, objek segi tiga tidak akan terbalik secara mendatar.
<!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 flipX as key with a 'False' value</h2>
<p>You can see that the triangle object has not been flipped horizontally</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: 75,
top: 45,
width: 180,
height: 109,
stroke: "#e3f988",
strokeWidth: 5,
flipX: false,
});
// Create gradient fill
triangle.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
colorStops: [
{ offset: 0, color: "#545a2c" },
{ offset: 1, color: "#6495ed" },
],
})
);
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Contoh 2
Melepasi atribut flipX sebagai kunci dengan nilai "Benar"
Dalam contoh ini, kita mempunyai objek segi tiga dengan lebar 180px dan ketinggian mendatar 109px isian kecerunan linear. Apabila kita menggunakan sifat flipX pada objek segi tiga, ia terbalik secara mendatar, jadi kita melihat kecerunan terbalik juga.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk membalikkan segitiga secara mendatar menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!