FabricJS 如何找到点击的Polyline对象上的当前光标位置

我们可以通过创建一个 fabric.Polyline 的实例来创建一个Polyline对象。一个折线对象可以由一组连接的直线段来描述。由于它是FabricJS的基本元素之一，我们也可以通过应用角度、不透明度等属性来轻松定制它。

为了找到点击的多段线对象上的当前光标位置，我们使用 getLocalPointer 方法。

语法

getLocalPointer( e, pointer ): Object

参数

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

例1：使用getLocalPointer方法

让我们看一个代码例子，看看我们如何通过使用 getLocalPointer 方法找到指针相对于折线对象的坐标。当我们点击多段线时，一个mousedown事件被触发，这使我们能够检索到当前点击的多段线实例的左边和顶部位置。

<!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 polyline 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 polyline instance
   var polyline = new fabric.Polyline(
      [
         { x: 500, y: 20 },
         { x: 550, y: 60 },
         { x: 550, y: 200 },
         { x: 350, y: 200 },
         { x: 350, y: 60 },
      ],
      {
         fill: "green",
         stroke: "blue",
         strokeWidth: 20,
      }
   );

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

   // Using getLocalPointer method
   polyline.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 “坐标。在这里，我们传递的值是 “倾斜”，这确保了在水平或垂直方向上倾斜对象时，事件被触发。

按 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 polyline instance
      var polyline = new fabric.Polyline(
         [
            { x: 500, y: 20 },
            {x: 550, y: 60 },
            { x: 550, y: 200 },
            { x: 350, y: 200 },
            { x: 350, y: 60 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
            lockMovementX: true,
            lockMovementY: true,
         }
      );

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

      // Using getLocalPointer method
      polyline.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>