图形编辑器基于Paper.js教程16：在Paper.js canvas画布中实现花贝塞尔曲线的功能，创建并编辑贝塞尔曲线，包括添加、删除曲线的节点，以及调整曲线的控制柄

拿我格子衫来

发布于 2024-11-21 13:52:20

12100

代码可运行

文章被收录于专栏：TopFETopFE

运行总次数：0

代码可运行

使用 Paper.js 实现花贝塞尔曲线的交互工具

在图形编辑中，贝塞尔曲线因其灵活的曲线控制而被广泛应用，特别是在设计软件和矢量绘图工具中。在本文中，我将深入解析一个基于 Paper.js 的交互式贝塞尔曲线编辑工具。通过这个工具，你可以在画布上创建并编辑贝塞尔曲线，包括添加、删除曲线的节点（称为“段”），以及调整曲线的控制柄（称为 handleIn 和 handleOut）。

Paper.js 初始化

程序首先利用 paper.setup() 函数将 Paper.js 初始化到 HTML 中的一个 <canvas> 元素中：

paper.setup(document.getElementById('myCanvas'));

这一步会将 Paper.js 绑定到特定的 <canvas>，从而让后续的所有绘制和交互操作都可以在这个画布上进行。

基本变量的定义

在工具功能实现之前，定义了一些基本的全局变量用于保存当前的编辑状态和交互对象：

var options = {};
tool = new paper.Tool();
var path;
var currentSegment;
var mode;
var type;
var hoveredItem = null;

path：当前操作的贝塞尔曲线对象。
currentSegment：当前正在操作的曲线段。
mode 和 type：保存操作的类型和模式，比如添加、删除或者调整控制柄。
hoveredItem：鼠标悬停的对象，用于交互时提供即时反馈。

鼠标事件处理

接下来，我们来看核心的鼠标事件处理器，这些处理器负责用户的交互操作，如点击、拖动和松开鼠标时的响应。

`onMouseDown` - 创建和选择段

tool.onMouseDown 事件处理器负责在画布上添加新的贝塞尔曲线段或选中已有的段。

// 原创由CSDN@拿我格子衫来
tool.onMouseDown = function (event) {
  if (event.event.button > 0) return;

  if (currentSegment) {
    currentSegment.selected = false;
  }
  mode = type = currentSegment = null;

  if (!path) {
    if (!hoveredItem) {
      path = new paper.Path();
    } else {
      if (!hoveredItem.item.closed) {
        mode = 'continue';
        path = hoveredItem.item;
        currentSegment = hoveredItem.segment;
        if (hoveredItem.item.lastSegment !== hoveredItem.segment) {
          path.reverse();
        }
      } else {
        path = hoveredItem.item;
      }
    }
  }
  
  // 查找当前段并进行相应操作
  var result = findHandle(path, event.point);
  if (result && mode !== 'continue') {
    currentSegment = result.segment;
    type = result.type;
    if (result.type === 'point') {
      if (result.segment.index === 0 && path.segments.length > 1 && !path.closed) {
        mode = 'close';
        path.closed = true;
        path.firstSegment.selected = true;
      } else {
        mode = 'remove';
        result.segment.remove();
      }
    }
  }
  // 原创由CSDN@拿我格子衫来
  if (!currentSegment) {
    if (hoveredItem) {
      if (hoveredItem.type === 'segment' && !hoveredItem.item.closed) {
        var hoverPath = hoveredItem.item;
        if (hoverPath.firstSegment !== hoveredItem.segment) {
          hoverPath.reverse();
        }
        path.join(hoverPath);
        path = null;
      } else if (hoveredItem.type === 'curve' || hoveredItem.type === 'stroke') {
        mode = 'add';
        var location = hoveredItem.location;
        currentSegment = path.insert(location.index + 1, event.point);
        currentSegment.selected = true;
      }
    } else {
      mode = 'add';
      currentSegment = path.add(event.point);
      currentSegment.selected = true;
    }
  }
};

这个函数主要负责：

创建新路径：当用户点击空白区域时，会创建一条新的贝塞尔路径。
选中已有路径段：如果点击现有的曲线段，程序会选中该段，并允许用户进行编辑操作，如调整控制柄或删除该段。
连接路径：当点击另一个未闭合的路径时，工具会自动反转路径并将其连接到当前路径。

`onMouseMove` - 悬停检测

tool.onMouseMove 处理器负责检测用户当前的鼠标位置是否悬停在某个路径段上，并实时更新交互反馈：

// 原创由CSDN@拿我格子衫来
tool.onMouseMove = function (event) {
  var hitResult = paper.project.hitTest(event.point, hitOptions);
  if (hitResult && hitResult.item && hitResult.item.selected) {
    hoveredItem = hitResult;
  } else {
    hoveredItem = null;
  }
};

这里的 hitTest 函数是 Paper.js 提供的一个强大的检测工具，用于判断用户点击或悬停时是否命中了某个对象。hitOptions 设定了检测的范围和具体条件，例如是否检测线条、曲线或者段等。

`onMouseDrag` - 控制柄调整

当用户拖动鼠标时，tool.onMouseDrag 事件处理器会实时更新当前段的控制柄位置，从而改变曲线的形状。

tool.onMouseDrag = function (event) {
  if (event.event.button > 0) return;

  var delta = event.delta.clone();
  if (type === 'handleOut' || mode === 'add') {
    delta = new paper.Point(0, 0).subtract(delta);
  }
  currentSegment.handleIn = currentSegment.handleIn.add(delta);
  currentSegment.handleOut = currentSegment.handleOut.subtract(delta);
};

该函数通过更新 handleIn 和 handleOut 控制柄的坐标，使得用户能够对贝塞尔曲线的曲率进行细致调整。当拖动时，控制柄的移动方向会与鼠标的移动量 delta 同步，从而动态调整曲线的形状。

`onMouseUp` - 完成编辑

tool.onMouseUp 事件处理器用于在用户完成编辑操作时，重置一些状态并结束操作模式：

tool.onMouseUp = function (event) {
  if (event.event.button > 0) return;

  if (path && path.closed) {
    path = null;
  }
};

此函数简单但重要：当用户松开鼠标并且路径已经闭合时，重置 path，以便下次继续新的操作。

辅助函数：查找控制柄

一个关键的辅助函数 findHandle 用于判断用户当前点击的位置是否接近某个曲线段的控制柄或控制点：

function findHandle(path, point) {
  var types = ['point', 'handleIn', 'handleOut'];
  for (var i = 0, l = path.segments.length; i < l; i++) {
    for (var j = 0; j < 3; j++) {
      var type = types[j];
      var segment = path.segments[i];
      var segmentPoint = type === 'point'
        ? segment.point
        : segment.point.add(segment[type]);
      var distance = point.subtract(segmentPoint).length;
      if (distance < 6) {
        return {
          type: type,
          segment: segment
        };
      }
    }
  }
  // 原创由CSDN@拿我格子衫来
  return null;
}

这个函数遍历路径中的所有段，并检查鼠标点击点是否靠近某个控制点或控制柄（通过计算点与控制点之间的距离）。如果距离足够近（如小于 6 像素），则返回该控制点的信息，供后续处理使用。