图形编辑器基于Paper.js教程07：鼠标画直线或移动路径

拿我格子衫来

发布于 2024-07-15 16:00:08

1240

发布于 2024-07-15 16:00:08

文章被收录于专栏：TopFE

探索Paper.js: 使用鼠标绘制直线和轨迹

在数字图形设计和Web应用开发中，提供一个直观和互动的界面供用户绘制图形是极为重要的。Paper.js是一款功能强大的JavaScript库，它使得在HTML5 Canvas上绘制矢量图形变得简单快捷。本文将介绍如何使用Paper.js实现一个基本的图形绘制工具，允许用户用鼠标画出直线和自由曲线（轨迹）。

演示效果

初始化环境和工具

首先，我们需要设置Paper.js环境，并创建一个Tool对象，该对象将用于处理鼠标事件。通过在Canvas元素上设置paper.setup，我们初始化了Paper.js的画布。

paper.setup('myCanvas');
const tool = new paper.Tool();

鼠标按下事件

在用户按下鼠标时，我们记录鼠标的起始点，并开始一个新的路径。这个路径将用来绘制用户的鼠标轨迹或直线。

tool.onMouseDown = (event) => {
  startPoint = event.point;
  linePath = new paper.Path({
    segments: [event.point],
    strokeColor: "red",
    strokeWidth: 1,
    strokeScaling: false
  });
};

鼠标拖动事件

在onMouseDrag事件中，我们根据用户是否按下了Shift键来决定是绘制直线还是轨迹。如果按下了Shift键，工具将只绘制一个从起始点到当前鼠标位置的直线，反映了一种控制和精确度；如果没有按下Shift键，路径将随着鼠标的移动而扩展，创建一条平滑的曲线。

tool.onMouseDrag = (event) => {
  if (!linePath || !startPoint) return;

  if (event.modifiers.shift) {
    linePath.removeSegments();
    linePath.addSegments([startPoint, event.point]);
  } else {
    linePath.add(event.point);
  }
};

功能与应用

这种绘图工具的实现不仅有助于艺术创作、设计图形界面或游戏开发，也可用于教育和科学研究中，例如在教学中演示物理轨迹或在数据可视化中绘制图表。通过简单地切换Shift键，用户可以在自由绘图和精确直线绘制之间灵活切换，增加了应用的多功能性。

部分代码

paper.setup('myCanvas');
const tool = new paper.Tool();
let linePath = null;
let startPoint = null;
let strokeColor = "red";

tool.onMouseDown = (event) => {
  // 记录起点并创建新路径
  startPoint = event.point;
  linePath = new paper.Path({
    name: "fizzPath",
    segments: [event.point],
    strokeColor,
    strokeWidth: 1,
    strokeScaling: false,
    data: {
      isLaserItem: true,
    },
  });
};

tool.onMouseDrag = (event) => {
  if (!linePath || !startPoint) return;

  if (event.modifiers.shift) {
    // 如果按下了 Shift 键，保持直线：清除路径后重新从起点到当前点绘制
    linePath.removeSegments();
    linePath.addSegments([startPoint, event.point]);
  } else {
    // 如果没有按下 Shift 键，根据鼠标移动的轨迹绘制
    linePath.add(event.point);
  }
};