拖拽调整曲线控制点巧绘粽子：解锁您的画图潜能

2023-09-29 08:22:12

前言

在看到 @岛上码农的文章《拖拽调整曲线控制点画粽子》后，我被深深吸引了。作为一名专注于界面的开发者，我很少有机会参与绘画方面的工作。然而，这篇博文激发了我探索拖拽曲线控制点技术的好奇心，它可以用来创建复杂而富有表现力的图形。

我立刻动手重写了这篇文章的代码，却发现原始代码仅提供了一半的功能。为了填补这一空白，我决定完善代码，允许用户通过拖拽曲线控制点来调整粽子的形状和尺寸。

代码示例

<canvas id="canvas" width="500" height="500"></canvas>

// 获取画布和上下文
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 定义粽子的初始形状
const points = [
  {x: 100, y: 200},
  {x: 200, y: 100},
  {x: 300, y: 200},
  {x: 200, y: 300},
];

// 绘制粽子
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  for (let i = 1; i < points.length; i++) {
    ctx.quadraticCurveTo(points[i - 1].x, points[i - 1].y, points[i].x, points[i].y);
  }
  ctx.closePath();
  ctx.fill();
}

// 启用拖拽功能
for (let i = 0; i < points.length; i++) {
  const point = points[i];

  point.handle = document.createElement("div");
  point.handle.style.position = "absolute";
  point.handle.style.width = "10px";
  point.handle.style.height = "10px";
  point.handle.style.backgroundColor = "red";
  point.handle.style.cursor = "move";

  canvas.appendChild(point.handle);

  point.handle.addEventListener("mousedown", (e) => {
    e.preventDefault();

    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    point.offset = {
      x: point.x - mouseX,
      y: point.y - mouseY,
    };

    document.addEventListener("mousemove", movePoint);
    document.addEventListener("mouseup", stopMoving);
  });
}

// 移动控制点
function movePoint(e) {
  e.preventDefault();

  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;

  point.x = mouseX + point.offset.x;
  point.y = mouseY + point.offset.y;

  draw();
}

// 停止移动
function stopMoving() {
  document.removeEventListener("mousemove", movePoint);
  document.removeEventListener("mouseup", stopMoving);
}

// 初始绘制
draw();