可弯曲的canvas箭头绘制工具介绍：自由绘制路径效果

2024-01-20 22:51:33

无论你是设计师、工程师还是爱好者，相信都会感受到canvas在创意开发中的巨大作用。不久前，有许多人询问如何利用canvas绘制高德地图中经常出现的导航箭头线效果。这看起来似乎不难，所以我率先尝试了canvas。然后我将canvas的成果集成到mapbox中，并且将结果迁入到其他地图库中，只需要应用相应的地理转屏幕坐标函数即可。

在canvas应用中，我们会常常遇到各种线样式的绘制，比如虚线、渐变线和图案线。现在，我们将逐步介绍如何在canvas中实现可弯曲的箭头路径效果。

1. 构建canvas画布

第一步，你需要创建一个canvas元素，设置好它的宽高，并用适当的样式来填充。canvas的坐标系从左上角开始，向右和向下延伸。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置canvas宽高
canvas.width = 600;
canvas.height = 400;

// 填充canvas的背景
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);

2. 创建可弯曲箭头

为了创建可弯曲的箭头，我们需要借助一条由点组成的路径，再在这个路径上绘制箭头。

// 定义锚点数组
const points = [];

// 创建并定义路径
const path = new Path2D();

// 为路径添加锚点
path.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
  path.lineTo(points[i].x, points[i].y);
}

// 绘制路径
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.stroke(path);

3. 添加交互式元素

可弯曲箭头的关键在于能够通过交互式元素来调整其形状。为了实现这一目的，我们将利用几个小圆形来作为锚点。用户可以通过拖动这些锚点来改变箭头的形状。

// 创建锚点元素
const anchors = [];
for (let i = 0; i < points.length; i++) {
  const anchor = document.createElement('div');
  anchor.style.position = 'absolute';
  anchor.style.left = `${points[i].x}px`;
  anchor.style.top = `${points[i].y}px`;
  anchor.style.width = '10px';
  anchor.style.height = '10px';
  anchor.style.borderRadius = '50%';
  anchor.style.backgroundColor = '#000';
  document.body.appendChild(anchor);

  // 添加拖动事件监听器
  anchor.addEventListener('mousedown', (e) => {
    const index = anchors.indexOf(anchor);
    const initialX = e.clientX;
    const initialY = e.clientY;

    // 鼠标移动时更新锚点位置
    document.addEventListener('mousemove', (e) => {
      const dx = e.clientX - initialX;
      const dy = e.clientY - initialY;

      points[index].x += dx;
      points[index].y += dy;

      // 更新路径
      path.moveTo(points[0].x, points[0].y);
      for (let i = 1; i < points.length; i++) {
        path.lineTo(points[i].x, points[i].y);
      }

      // 更新锚点位置
      anchor.style.left = `${points[index].x}px`;
      anchor.style.top = `${points[index].y}px`;

      // 重新绘制箭头
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#fff';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.strokeStyle = '#000';
      ctx.lineWidth = 2;
      ctx.stroke(path);
    });

    // 鼠标松开时移除事件监听器
    document.addEventListener('mouseup', () => {
      document.removeEventListener('mousemove');
    });
  });

  anchors.push(anchor);
}