首頁 >web前端 >js教程 >如何使用 FabricJS 垂直翻轉圓?

如何使用 FabricJS 垂直翻轉圓?

WBOY
WBOY轉載
2023-08-24 12:29:021005瀏覽

如何使用 FabricJS 垂直翻转圆?

在本教學中,我們將學習如何使用 FabricJS 垂直翻轉 Circle 物件。圓形是 FabricJS 提供的各種形狀之一。為了創建一個圓圈,我們必須創建一個 Fabric.Circle 類別的實例並將其添加到畫布中。我們可以使用 flipY 屬性垂直翻轉圓形物件。

語法

new fabric.Circle({ flipY: Boolean }: Object)

參數

  • #選項(可選) - 此參數是一個物件 為我們的圈子提供額外的客製化。使用此參數,可以變更與 flipY 為屬性的物件相關的顏色、遊標、描邊寬度和許多其他屬性等屬性。

  • ul>

    選項鍵

    • flipY - 此屬性接受布林值。它允許我們垂直翻轉物件。

    範例1

    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&#39;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中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除