Flutter CustomPainter中如何获取画布上指定位置点的颜色？

以下是基于HTML5 Canvas的Web端实现方案，其他端实现逻辑通用，核心都是读取画布指定坐标的像素缓冲区数据得到颜色值。

实现核心逻辑 #

依赖Canvas原生API getImageData()，获取指定坐标位置1*1像素的RGBA数据，再按需转换成对应的颜色格式即可。

具体实现步骤 #

• 给canvas元素绑定点击事件监听器
• 计算点击位置相对于画布的真实坐标，需排除画布在视口的偏移量，同时适配canvas实际宽高和CSS显示宽高不一致的缩放场景
• 调用getImageData()读取对应坐标的像素值
• 把返回的RGBA数组转换成业务需要的格式（比如RGB字符串、十六进制色值等）

代码示例 #

// 替换为你的画布元素ID
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('click', (e) => {
  // 获取画布相对视口的偏移位置
  const rect = canvas.getBoundingClientRect();
  // 计算画布缩放比例，避免CSS缩放导致坐标偏移
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  // 转换得到画布上的真实坐标
  const realX = (e.clientX - rect.left) * scaleX;
  const realY = (e.clientY - rect.top) * scaleY;

  // 读取1*1像素的颜色数据，返回数组依次为R、G、B、A，取值范围0-255
  const pixelData = ctx.getImageData(realX, realY, 1, 1).data;
  const [r, g, b, a] = pixelData;

  // 转换为RGB格式
  const rgbColor = `rgb(${r}, ${g}, ${b})`;
  // 转换为十六进制格式
  const hexColor = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;

  // 此处替换为你的业务逻辑，比如赋值给画笔颜色、显示色值等
  console.log('取色结果：', rgbColor, hexColor, '透明度：', a/255);
});

注意事项 #

• 如果你的应用使用了多层Canvas叠加，需要先把所有层绘制到一个临时离屏Canvas上再取色，或者逐层计算像素值合并得到最终色值
• getImageData()存在跨域限制，如果画布上绘制了跨域图片资源，需要提前给图片配置跨域请求头，否则调用接口会抛出安全错误
• 单次取色性能消耗极低，即便做鼠标拖拽实时取色的需求也可以直接使用，不会出现明显卡顿

内容的提问来源于stack exchange，提问作者guirguis nashat