Day 5 - 用 canvas 复刻 小画家 挑选颜色（颜色选取器）

选取器

选取器使用到 getImageData

ctx.getImageData(sx, sy, sw, sh);

利用 getImageData 可以得到指定范围内的数值

可以看到在 data 内的值即为色码，我们只需将它拼装成 rgba 就完成了！

关於事件

在上一篇章用铅笔绘画时，mouseMove会回传给我们
const point = { x: e.offsetX, y: e.offsetY }
但在做选取范围时，我们操作的判断，是做在 点击 事件，
并没有直接回传 offsetX 回来，所以我们需要自己进行计算，
利用 element的 位置与滑鼠所点击得 clientX 来计算。

来看看程序码吧

/**
* 提取颜色
*/
const pickColor = (e: any) => {
let rect = canvasRef.current.getBoundingClientRect();
    const point = {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
    };
    if (canvasRef.current) {
      const ctx = canvasRef.current.getContext("2d");
      const p = ctx.getImageData(point?.x, point?.y, 1, 1).data;
      const color = `rgba(${p[0]}, ${p[1]}, ${p[2]}, ${p[3]})`;
      setActiveColor(color);
    }
};

我们也对上一篇的点击滑鼠进行修改

// 滑鼠点下画布
const handleMouseDown = (event: any) => {
    setIsDrawing(true);
    switch (tool) {
      case "fillColor":
        fillCanvas();
        break;
      case "pickColor":
        pickColor(event);
        break;
      default:
        break;
    }
  };

看看效果

补充

在上周我们建立的 toolsMap.json 做些修改

toolsMap.js

import airbrush from "../images/cursors/airbrush.png";
import eyeDropper from "../images/cursors/eye-dropper.png";
import fillBucket from "../images/cursors/fill-bucket.png";
import precise from "../images/cursors/precise.png";
import pencil from "../images/cursors/pencil.png";
import preciseDotted from "../images/cursors/precise-dotted.png";
import magnifier from "../images/cursors/magnifier.png";

const toolsMap = [
  { name: "freeFormSelec", title: "选择任意范围", cursor: precise },
  { name: "selec", title: "选择", cursor: precise },
  { name: "eraser", title: "橡皮擦/彩色橡皮擦", cursor: precise },
  { name: "fillColor", title: "填入色彩", cursor: fillBucket },
  { name: "pickColor", title: "挑选颜色", cursor: eyeDropper },
  { name: "magnifier", title: "放大镜", cursor: magnifier },
  { name: "pencil", title: "铅笔", cursor: pencil },
  { name: "brush", title: "粉刷", cursor: preciseDotted },
  { name: "airbrush", title: "喷枪", cursor: airbrush },
  { name: "text", title: "文字", cursor: precise },
  { name: "line", title: "直线", cursor: precise },
  { name: "curve", title: "曲线", cursor: precise },
  { name: "rectangle", title: "矩形", cursor: precise },
  { name: "polygon", title: "多边形", cursor: precise },
  { name: "ellipse", title: "椭圆形", cursor: precise },
  { name: "roundedRectangle", title: "圆角矩形", cursor: precise },
];

export default toolsMap;

利用 cursor 可以在画布上指定对的游标图案

CanvasBox/index.tsx

...more
 <MainCanvas
       ...
        cursor={tool}
      ></MainCanvas>

CanvasBox/style.tsx

import find from "lodash/find";
...
const MainCanvas = styled("canvas")<{ cursor: any }>`
  background: #fff;
  cursor: ${(props: { cursor: string }) => {
    const active = find(toolsMap, { name: props?.cursor });
    return `url(${active?.cursor}) 9 22, crosshair`;
  }};
`;

Done!

明天教学如何绘制线条～！