亚洲精品一区在线观看,老司机午夜爽片,国产在AJ精品

在本教程中，我們將學習如何使用 FabricJS 將 Line 對象在繪制對象堆棧中向下移動一步。 Line 元素是 FabricJS 中提供的基本元素之一。它用于創建直線。由于線元素在幾何上是一維的并且不包含內部，因此它們永遠不會被填充。我們可以通過創建 fabric.Line 實例來創建線條對象，指定線條的 x 和 y 坐標并將其添加到畫布中。為了將 Line 對象在繪制對象堆棧中向下移動一步，我們使用 sendBackwards 方法。

語法

 sendBackwards(intersecting: Boolean): fabric.Object

登錄后復制

參數

相交 – 此參數接受布爾值當指定為“true”值時，會將對象發送到下一個較低的相交對象后面。如果值為“false”，它通常將對象發送到堆棧中下一個對象后面。該參數是可選的。

使用sendBackwards方法

示例

讓我們看一個代碼示例查看使用 sendBackwards 方法時的輸出。 sendBackwards 方法將對象在繪制對象堆棧中向下移動一步。在本例中，使用 sendBackwards 方法，line2 在 line1 之后發送。

<!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>Using sendBackwards method</h2>
   <p>
      You can see that line2 (red) has been moved down in the stack of drawn objects
   </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 Line object
      var line1 = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Initiate another Line object
      var line2 = new fabric.Line([200, 70, 70, 40], {
         stroke: "red",
         strokeWidth: 20,
      });
      
      // Add both to the canvas
      canvas.add(line1);
      canvas.add(line2);
      
      // Using sendBackwards method
      line2.sendBackwards();
   </script>
</body>
</html>

登錄后復制

使用 sendBackwards 方法并啟用三個對象并啟用交集鍵

示例

在此示例中，我們使用了三個線條對象，即 line1、line2 和 line3。盡管它們已按照數字順序添加到畫布中，但 line3 顯然位于 line1 后面。這是因為我們使用了啟用了交集鍵的 sendBackwards 方法，該方法將 line3 發送到其下一個較低的相交對象（即 line1）后面。 p>

<!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>Using sendBackwards method with three objects and intersection key enabled</h2>
   <p>
      You can see that the green line now lies behind the blue line which is line number 1
   </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 Line object
      var line1 = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Initiate another Line object
      var line2 = new fabric.Line([500, 70, 400, 40], {
         stroke: "red",
         strokeWidth: 20,
      });
      
      // Initiate another Line object
      var line3 = new fabric.Line([200, 30, 30, 90], {
         stroke: "green",
         strokeWidth: 20,
      });
      
      // Add them all to the canvas
      canvas.add(line1);
      canvas.add(line2);
      canvas.add(line3);
      
      // Using sendBackwards method
      line3.sendBackwards(true);
   </script>
</body>
</html>

登錄后復制

以上就是FabricJS – 如何將 Line 對象在繪制對象堆棧中向下移動一步？的詳細內容，更多請關注www.92cms.cn其它相關文章！