图形编辑器基于Paper.js教程06：鼠标画圆与椭圆

拿我格子衫来

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

820

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

文章被收录于专栏：TopFE

绘制椭圆与圆形：利用Paper.js进行交互式图形设计

在Web应用中实现交互式图形绘制功能，对于提高用户体验至关重要，尤其是在设计和艺术相关的应用中。Paper.js是一款强大的JavaScript库，专门用于处理矢量图形，它提供了一套简洁的API来操作HTML5的Canvas元素。本文通过一个实际例子，探讨如何使用Paper.js来实现椭圆和圆形的绘制。

在我们的示例中，用户可以使用鼠标在画布上绘制椭圆或圆形。首先，我们设置了Paper.js的工作环境并初始化了tool对象，这个对象将用来处理鼠标的相关事件。

演示效果

初始化工具和事件处理

在onMouseDown事件处理函数中，我们记录鼠标按下时的位置作为椭圆的起始点，并初始化一个很小的椭圆。这个初始椭圆仅仅是为了在开始拖拽时有一个图形的基础，其大小几乎为零。

tool.onMouseDown = function (event) {
  startPoint = event.point; // 记录起始点
  toolShape = new paper.Path.Ellipse({
    point: [event.point.x - 1, event.point.y - 1],
    size: [1, 1],
    strokeColor,
    strokeScaling: false
  });
};

处理鼠标拖拽事件

在onMouseDrag中，我们根据鼠标当前的位置与起始点计算出椭圆的最小外接矩形。通过计算鼠标按下点和当前点的最小和最大坐标值，我们能确定椭圆的边界。

const currentPoint = event.point;
const topLeft = new paper.Point(Math.min(startPoint.x, currentPoint.x), Math.min(startPoint.y, currentPoint.y));
const bottomRight = new paper.Point(Math.max(startPoint.x, currentPoint.x), Math.max(startPoint.y, currentPoint.y));
const rect = new paper.Rectangle(topLeft, bottomRight);

如果用户在拖拽时按下了Shift键，我们通过调整矩形的宽度和高度为相同的值，确保椭圆变为一个完美的圆形。

更新图形

每次拖拽时，我们首先移除之前的椭圆，然后基于新计算出的矩形绘制一个新的椭圆。

toolShape.remove();
toolShape = new paper.Path.Ellipse({
  from: rect.topLeft,
  to: rect.bottomRight,
  strokeColor,
  strokeScaling: false
});

部分代码

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

tool.onMouseDown = function (event) {
  startPoint = event.point; // 记录起始点
  // 初始化时创建一个很小的圆作为基础形状
  toolShape = new paper.Path.Ellipse({
    name: "fizzEllipse",
    point: [event.point.x - 1, event.point.y - 1], // 使其非常小
    size: [1, 1], // 很小的尺寸
    strokeColor,
    strokeScaling: false,
    data: {
      isLaserItem: true,
    },
  });
};

tool.onMouseDrag = function (event) {
  // 根据鼠标按下的位置和当前位置计算椭圆的bounds
  const currentPoint = event.point;
  const { x: startPx, y: startPy } = startPoint
  const topLeft = new paper.Point(
    Math.min(startPx, currentPoint.x),
    Math.min(startPy, currentPoint.y)
  );
  const bottomRight = new paper.Point(
    Math.max(startPx, currentPoint.x),
    Math.max(startPy, currentPoint.y)
  );
  const rect = new paper.Rectangle(topLeft, bottomRight);

  // 如果按下Shift键，保持宽高比为1:1，即绘制圆形
  if (event.modifiers.shift) {
    const maxSize = Math.max(rect.width, rect.height);
    rect.width = maxSize;
    rect.height = maxSize;
    // 重新定位以保持中心不变
    const center = rect.center;
    rect.center = center;
  }

  // 更新toolShape的形状为新的矩形区域
  toolShape.remove(); // 移除旧的形状
  toolShape = new paper.Path.Ellipse({
    from: rect.topLeft,
    to: rect.bottomRight,
    strokeColor,
    strokeScaling: false,
    data: {
      isLaserItem: true,
    },
  });
};

总结

通过这个简单的示例，我们展示了如何使用Paper.js来处理复杂的图形绘制需求。这种方式不仅允许用户灵活地绘制椭圆，还能通过简单的修改（如按下Shift键）快速地切换到圆形绘制模式。这种灵活性和易用性使得Paper.js成为处理在线图形设计的理想选择，无论是用于艺术创作、游戏设计还是任何需要图形绘制的应用。通过优化这些基本操作，开发者可以创建出更加丰富和互动的Web应用。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-07-15，如有侵权请联系 cloudcommunity@tencent.com 删除

设计