图形编辑器基于Paper.js教程05：鼠标画矩形与正方形

拿我格子衫来

发布于 2024-07-15 15:59:17

1040

发布于 2024-07-15 15:59:17

文章被收录于专栏：TopFE

优化矩形绘制：在Paper.js中有效管理鼠标事件

在图形应用开发中，准确和高效地处理用户输入，如鼠标事件，是提升用户体验的关键。本文通过一个使用Paper.js的示例，展示如何优化矩形绘制过程，特别是处理不同方向的拖拽动作。

Paper.js是一个强大的矢量图形脚本框架，允许开发者通过JavaScript与Canvas元素交互。在此框架中，Tool对象用于处理鼠标事件，如点击和拖拽，可以用来绘制形状如矩形。

在常规做法中，开发者可能会在鼠标按下(onMouseDown)事件中创建一个矩形，并在拖拽(onMouseDrag)事件中重新创建矩形以调整大小。

我们可以在onMouseDown事件中初始化一个大小为零的矩形，并在onMouseDrag事件中调整这个矩形的边界，具体做法是记录鼠标按下时的初始位置，并在拖拽时实时计算矩形的左上角和右下角坐标，并重建它。使用Math.min和Math.max函数可以确保无论拖拽方向如何，矩形都能正确绘制。

const rectTopLeft = new paper.Point(
    Math.min(startPoint.x, endPoint.x),
    Math.min(startPoint.y, endPoint.y)
);
const rectBottomRight = new paper.Point(
    Math.max(startPoint.x, endPoint.x),
    Math.max(startPoint.y, endPoint.y)
);

此外，如果用户在拖拽时按下Shift键，我们通过调整计算逻辑，使矩形维持正方形的形状，进一步增加应用的交互性。

通过这种优化，我们不仅提升了应用的性能，减少了不必要的计算和内存使用，还保证了无论用户如何操作，界面都能流畅且准确地响应。这对于设计和绘图软件尤为重要，确保了用户体验的连贯性和响应速度。

这种方法的实施显示了在处理图形和用户交互时，如何通过优化逻辑和利用框架的特性来提升性能和用户体验。

演示效果

部分代码

paper.setup('myCanvas');
const tool = new paper.Tool();
let toolShape = null;
let strokeColor = 'red';
let startPoint = null;  // 记录鼠标按下时的起始点

tool.onMouseDown = function (event) {
  startPoint = event.point;  // 保存起始点
  toolShape = new paper.Path.Rectangle({
    name: "FizzRect",
    point: startPoint,
    size: [0, 0], // 初始大小设为0
    strokeColor,
    strokeScaling: false,
    data: {
      isLaserItem: true,
    },
  });
};

tool.onMouseDrag = function (event) {
  if (!toolShape || !startPoint) {
    return;
  }

  const endPoint = event.point;
  const rectTopLeft = new paper.Point(
    Math.min(startPoint.x, endPoint.x),
    Math.min(startPoint.y, endPoint.y)
  );
  const rectBottomRight = new paper.Point(
    Math.max(startPoint.x, endPoint.x),
    Math.max(startPoint.y, endPoint.y)
  );

  let width = rectBottomRight.x - rectTopLeft.x;
  let height = rectBottomRight.y - rectTopLeft.y;

  // 如果按下Shift键，则创建正方形
  if (event.modifiers.shift) {
    const maxSize = Math.max(width, height);
    width = height = maxSize;
    rectBottomRight.x = rectTopLeft.x + maxSize;
    rectBottomRight.y = rectTopLeft.y + maxSize;
  }

  // 更新矩形的坐标
  toolShape.remove();  // 移除旧矩形
  toolShape = new paper.Path.Rectangle({
    name: "拿我格子衫来Rect",
    from: rectTopLeft,
    to: rectBottomRight,
    strokeColor,
    strokeScaling: false,
    data: {
      isLaserItem: true,
    },
  });
};