FabricJS – 在被点击的多边形对象上找到当前光标位置

我们可以通过创建一个fabric.Polygon的实例来创建一个Polygon对象。一个多边形对象可以被描述为由一组连接的直线段组成的任何封闭形状。由于它是FabricJS的基本元素之一，我们也可以通过应用角度、不透明度等属性来轻松定制它。为了找到点击的多边形对象的当前光标位置，我们使用getLocalPointer方法。

语法

getLocalPointer( e, pointer ): Object

参数

e – 这个参数接受一个事件，表示要操作的事件。
pointer (可选) – 这个参数是一个Object，表示要操作的指针。这个参数是可选的。

例1：使用getLocalPointer方法

让我们看一个代码例子，说明我们如何通过使用getLocalPointer方法找到指针相对于多边形对象的坐标。只要我们点击多边形，就会触发一个鼠标下降事件，这使我们能够检索到当前点击的多边形实例的左和上位置。

<!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 the getLocalPointer method</h2>
   <p>
      You can click on the polygon object while the console from dev tools is opened to see that the logged output contains the x and y coordinates
   </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 polygon instance
      var polygon = new fabric.Polygon(
         [
            { x: 500, y: 20 },
            { x: 550, y: 60 },
            { x: 550, y: 200 },
            { x: 350, y: 200 },
            { x: 350, y: 60 },
            { x: 500, y: 20 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
         }
      );

      // Add it to the canvas
      canvas.add(polygon);

      // Using getLocalPointer method
      polygon.on("mousedown", function (options) {
         var pointer = this.getLocalPointer(options.e);
         console.log("Coordinates of the pointer relative to the object are: ", pointer);
      });
   </script> 
</body>
</html>

例2：使用getLocalPointer方法并使用不同的事件监听器

让我们看一个代码例子，以了解我们如何通过使用不同的事件监听器仍然可以检索到当前光标位置的x和y坐标。在这里，我们传递的值是 “skewing”，这确保了在水平或垂直方向上倾斜对象时，事件被触发。

按shift键，然后沿水平或垂直方向拖动，歪斜是可行的。你可以打开控制台，看到事件被触发，而对象正在从控件中倾斜。

<!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 the getLocalPointer method and using a different event listener
   </h2>
   <p>
      You can press the shift-key and drag the middle edge along the x or yaxis to skew the object while the console from dev tools is opened to see that the logged output contains the x and y coordinates
   </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 polygon instance
      var polygon = new fabric.Polygon( 
         [
            { x: 500, y: 20 },
            { x: 550, y: 60 },
            { x: 550, y: 200 },
            { x: 350, y: 200 },
            { x: 350, y: 60 },
            { x: 500, y: 20 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
            lockMovementX: true,
            lockMovementY: true,
         }
      );

      // Add it to the canvas
      canvas.add(polygon);

      // Using getLocalPointer method
      polygon.on("skewing", function (options) {
         var pointer = this.getLocalPointer(options.e);
         console.log(
            "Coordinates of the pointer relative to the object are: ", 
            pointer
         );
      });
   </script>
</body>
</html>