FabricJS – 查找单击的 Polygon 对象上的当前光标位置?

fabricjsjavascripthtml5 canvas更新于 2024/9/10 23:08:17

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

语法

getLocalPointer( e, pointer ): Object

参数

e − 此参数接受 Event，表示要操作的事件。
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>
      
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // 初始化一个多边形实例
      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,
         }
      );
      
      // 将其添加到画布
      canvas.add(polygon);
      
      // 使用 getLocalPointer 方法
      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>
      
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // 初始化一个多边形实例
      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,
         }
      );
      
      // 将其添加到画布
      canvas.add(polygon);
      
      // 使用 getLocalPointer 方法
      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>