.NET MAUI中基于鼠标移动在画布绘制线条的实现方案咨询

下面是基于HTML5 Canvas的具体实现步骤，逻辑贴近原生Paint的交互逻辑：

1. 基础页面结构 #

先搭建工具栏与画布的HTML结构：

<div class="toolbar">
  <button id="pencilBtn">✏️ 铅笔</button>
</div>
<canvas id="paintCanvas" width="800" height="600" style="border:1px solid #ccc;"></canvas>

2. 核心JavaScript实现 #

初始化状态与绘图上下文 #

先定义控制绘制的关键变量，获取Canvas的绘图上下文：

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

// 核心状态变量
let isPencilActive = false; // 铅笔工具是否激活
let isDrawing = false; // 是否处于绘制中（鼠标按住状态）
let lastPoint = { x: 0, y: 0 }; // 上一个绘制点的坐标

绑定铅笔按钮激活逻辑 #

点击按钮切换激活状态，给按钮添加视觉反馈：

pencilBtn.addEventListener('click', () => {
  isPencilActive = !isPencilActive;
  pencilBtn.classList.toggle('active', isPencilActive);
  // 可配合CSS给.active状态设置背景色，明确当前激活工具
});

绑定画布鼠标事件 #

鼠标按下：启动绘制流程

只有铅笔激活时才响应，记录初始绘制点：

canvas.addEventListener('mousedown', (e) => {
  if (!isPencilActive) return;
  
  isDrawing = true;
  // 修正画布偏移，获取鼠标在画布内的真实坐标
  const rect = canvas.getBoundingClientRect();
  lastPoint.x = e.clientX - rect.left;
  lastPoint.y = e.clientY - rect.top;
});

鼠标移动：绘制连续线条

按住鼠标移动时，不断连接上一个点与当前点：

canvas.addEventListener('mousemove', (e) => {
  if (!isPencilActive || !isDrawing) return;
  
  const rect = canvas.getBoundingClientRect();
  const currentPoint = {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
  
  // 绘制两点间的线条
  drawLine(lastPoint, currentPoint);
  
  // 更新上一个点坐标，为下一段绘制做准备
  lastPoint = currentPoint;
});

鼠标抬起/离开：结束绘制

松开鼠标或移出画布时，终止绘制状态：

// 鼠标抬起
canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

// 鼠标移出画布范围
canvas.addEventListener('mouseout', () => {
  isDrawing = false;
});

线条绘制核心函数 #

用Canvas API实现贴近真实铅笔的圆润线条效果：

function drawLine(from, to) {
  ctx.beginPath();
  ctx.moveTo(from.x, from.y);
  ctx.lineTo(to.x, to.y);
  ctx.lineWidth = 2; // 可调整线条粗细
  ctx.lineCap = 'round'; // 端点圆润，避免生硬转角
  ctx.strokeStyle = '#000'; // 可替换为颜色选择器的输入值
  ctx.stroke();
}

3. 可选优化点 #

• 给铅笔按钮添加CSS样式，比如.active类设置背景色，让用户清晰感知当前激活工具
• 新增线条粗细、颜色配置项，动态修改ctx.lineWidth和ctx.strokeStyle
• 支持移动端触摸：添加touchstart、touchmove、touchend事件，逻辑与鼠标事件一致，注意用e.touches[0]获取触摸坐标
• 记录绘制历史，实现撤销功能：每次绘制前保存Canvas图像数据到数组，撤销时恢复对应数据

内容的提问来源于stack exchange，提问作者Nelson Nebre