原生Canvas与React-konva的网格画法：拖动、放大缩小、00位置辅助线指南

2023-11-18 14:24:42

原生 Canvas 和 React-konva：打造灵活可定制的网格

在数据可视化和图像编辑等各种应用中，网格扮演着至关重要的角色。使用 HTML5 Canvas 或 React-konva 等强大工具，可以轻松创建交互式且可定制的网格。本文将深入探讨利用这些技术创建网格的步骤，并指导您如何添加拖动、缩放和坐标系原点辅助线等高级功能。

原生 Canvas 网格

创建 Canvas 元素

要使用原生 Canvas 绘制网格，首先需要创建一个 <canvas> 元素并为其指定宽度和高度。

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

获取 Canvas 上下文

接下来，通过 getContext("2d") 方法获取 Canvas 的 2D 上下文，从而能够操作画布。

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

设置画布样式

为了定义网格线的颜色和粗细，请设置以下 Canvas 上下文属性：

ctx.strokeStyle = "#000";
ctx.lineWidth = 1;

绘制网格线

使用循环绘制垂直和水平网格线，每次间隔 10 像素。

for (let i = 0; i <= canvas.width; i += 10) {
  ctx.beginPath();
  ctx.moveTo(i, 0);
  ctx.lineTo(i, canvas.height);
  ctx.stroke();
}

for (let j = 0; j <= canvas.height; j += 10) {
  ctx.beginPath();
  ctx.moveTo(0, j);
  ctx.lineTo(canvas.width, j);
  ctx.stroke();
}

React-konva 网格

安装 React-konva

要使用 React-konva 创建网格，请安装以下库：

npm install react-konva

导入 React-konva

在您的 React 组件中，导入 React-konva 库以使用其组件。

import { Stage, Layer, Line } from "react-konva";

创建网格组件

使用以下代码创建一个 React-konva 网格组件：

const Grid = () => {
  return (
    <Stage width={500} height={500}>
      <Layer>
        {Array.from(Array(50)).map((_, i) => (
          <Line
            key={i}
            x={10 * i}
            y={0}
            points={[0, 0, 0, 500]}
            stroke="#000"
            strokeWidth={1}
          />
        ))}
        {Array.from(Array(50)).map((_, i) => (
          <Line
            key={i}
            x={0}
            y={10 * i}
            points={[0, 0, 500, 0]}
            stroke="#000"
            strokeWidth={1}
          />
        ))}
      </Layer>
    </Stage>
  );
};

高级功能

拖动

要启用网格的拖动功能，请使用 Konva.Layer 的 dragstart 和 dragend 事件监听器。

const grid = new Konva.Layer();
stage.add(grid);

const dragHandler = (e) => {
  const { x, y } = e.target.position();
  grid.position({ x: x + e.dx, y: y + e.dy });
};

grid.on("dragstart", (e) => {
  e.target.setAttrs({ draggable: true });
});
grid.on("dragend", (e) => {
  e.target.setAttrs({ draggable: false });
});

缩放

使用 Konva.Stage 的 wheel 事件监听器来启用缩放功能。

stage.on("wheel", (e) => {
  const scale = e.evt.deltaY > 0 ? 1.1 : 0.9;
  stage.scaleX(scale);
  stage.scaleY(scale);
});

00 坐标系辅助线

在网格上添加坐标系原点的辅助线，使用 Konva.Line 组件。

const line = new Konva.Line({
  points: [0, 0, 500, 0],
  stroke: "#000",
  strokeWidth: 1,
});
grid.add(line);

const line2 = new Konva.Line({
  points: [0, 0, 0, 500],
  stroke: "#000",
  strokeWidth: 1,
});
grid.add(line2);