在本教學中,我們將學習如何使用 FabricJS 垂直翻轉 Circle 物件。圓形是 FabricJS 提供的各種形狀之一。為了創建一個圓圈,我們必須創建一個 Fabric.Circle 類別的實例並將其添加到畫布中。我們可以使用 flipY 屬性垂直翻轉圓形物件。
new fabric.Circle({ flipY: Boolean }: Object)
#選項(可選) - 此參數是一個物件 為我們的圈子提供額外的客製化。使用此參數,可以變更與 flipY 為屬性的物件相關的顏色、遊標、描邊寬度和許多其他屬性等屬性。
flipY - 此屬性接受布林值。它允許我們垂直翻轉物件。
將flipY 作為帶有' 的鍵傳遞false' 值
################################讓我們看一個範例,向我們展示FabricJS 中圓形物件的預設方向。由於我們向 ###flipY### 屬性傳遞了一個 false 值,因此圓形物件將不會垂直翻轉。 ###
<!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>###範例2#########將FlipY 屬性作為具有「true」值的鍵傳遞#########在此範例中,我們有一個半徑為80px的圓形物件具有垂直線性漸變填充。當我們將 ###flipY### 屬性套用到圓形物件時,它會垂直翻轉,因此我們看到漸層也翻轉了。 ###
<!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>Here observe that the circle has flipped vertically (see the gradient), as we have set <b>flipY</b> to True.</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: true }); // 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>###
以上是如何使用 FabricJS 垂直翻轉圓?的詳細內容。更多資訊請關注PHP中文網其他相關文章!