Rumah > Artikel > hujung hadapan web > Bagaimana untuk membalikkan bulatan secara menegak menggunakan FabricJS?
Bagaimana untuk membalikkan bulatan secara menegak menggunakan FabricJS?
- WBOYke hadapan
- 2023-08-24 12:29:02955semak imbas
Dalam tutorial ini, kita akan belajar cara membalikkan objek Bulatan secara menegak menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kita mesti mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Kita boleh membalikkan objek bulat secara menegak menggunakan sifat flipY.
Syntax
new fabric.Circle({ flipY: Boolean }: Object)Parameter
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak lagi sifat lain yang dikaitkan dengan objek yang flipY ialah sifatnya.
ul>flipY - Hartanah ini menerima nilai Boolean. Ia membolehkan kita membalikkan objek secara menegak.
Kunci Pilihan
Contoh 1
Melepasi flipY sebagai kunci dengan nilai 'palsu'
Mari kita lihat contoh yang menunjukkan kepada kita orientasi lalai objek bulat dalam FabricJS. Memandangkan kami memberikan nilai palsu kepada sifat flipY, objek bulat tidak akan terbalik secara menegak.
<!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>How to flip a Circle vertically using FabricJS?</h2>
<p>This is the default orientation of the object. We have set <b>flipY</b> as False, but even if we don't use it, <b>flipY</b> will be by default set to False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 50,
fill: "green",
radius: 80,
stroke: "#228b22",
strokeWidth: 2,
flipY: false
});
// Create gradient fill
circle.set("fill", new fabric.Gradient({
type: "linear",
coords: {
x1: 0,
y1: 0,
x2: 0,
y2: 50
},
colorStops: [{
offset: 0,
color: "red"
}, {
offset: 1,
color: "green"
}, ],
}));
// Adding them to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Contoh 2
Melalui sifat FlipY sebagai kunci dengan nilai "benar"
Dalam contoh ini kita mempunyai objek bulat dengan jejari 80px dengan isian kecerunan linear menegak. Apabila kita menggunakan sifat flipY pada objek bulatan, ia terbalik secara menegak, jadi kita melihat kecerunan terbalik juga.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk membalikkan bulatan secara menegak menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!