Day 10 - 用 canvas 复刻 小画家 放大镜

动手写看看

目前只能做到放大...

  const [magnifier, setMagnifier] = useState(false); //是否放大中
  const [initScale, setInitScale] = useState(1); // 缩放尺寸

const dramImageByScale = (scale: number) => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    let imgWidth = canvas.width;
    let imgHeight = canvas.height;
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    const width = imgWidth * scale;
    const height = imgHeight * scale;
    const sx = canvas.width / 2 - width / 2; //x坐标
    const sy = canvas.height / 2 - height / 2; //y坐标
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(savedData, sx, sy, width, height);
  };

 const handleMouseUp = (event: any) => {
 ...
   case "magnifier":
      dramImageByScale(initScale);
      break;
  };

 const handleMouseDown = (event: any) => {
 ...
    switch (tool) {
...
      case "magnifier":
        if (magnifier) {
          setInitScale((prev) => (prev -= 0.1));
        } else {
          setInitScale((prev) => (prev += 0.1));
        }
        setMagnifier(!magnifier);
        saveCanvas();
        break;
      default:
        break;
    }
  };