Day 7 - 用 canvas 复刻 小画家 绘制矩形与圆角矩形

绘制矩形

核心

先来学习绘制矩形的方法

strokeRect 使用当前的绘画样式，描绘一个起点在 (x, y) 、宽度为 w 、高度为 h 的矩形的方法。

void ctx.strokeRect(x, y, width, height);

再来只要知道滑鼠移动的位置即可知道高宽

const handleDrawCanvas = (point: pointIF) => {
  ...
  case "rectangle":
      const width = point?.x - initialPoint?.x;
      const height = point?.y - initialPoint?.y;
      ctx.strokeRect(initialPoint?.x, initialPoint?.y, width, height);
  break;
  ...
}
 
const handleMouseDown = (event: any) => {
  ...
  case "rectangle":
    initialPoint = { x: point?.x, y: point?.y };
    break;
  ...
};

是不是似曾相似？
还记得，在上一篇我们学习到清空及复原上个画面完成直线，本篇章利用相同的原理来绘制矩形。

const handleDrawCanvas = (point: pointIF) => {
  ...
  case "rectangle": 
      clearCanvas(); // 补上
      restore(); // 补上
      const width = point?.x - initialPoint?.x;
      const height = point?.y - initialPoint?.y;
      ctx.strokeRect(initialPoint?.x, initialPoint?.y, width, height);
  break;
  ...
}
 
const handleMouseDown = (event: any) => {
  ...
  case "rectangle":
    initialPoint = { x: point?.x, y: point?.y };
    break;
  ...
};

const handleMouseDown = (event: any) => {
  ...
  case "rectangle":
    initialPoint = { x: point?.x, y: point?.y };
    saveCanvas(); // 补上
    break;
  ...
};

完成矩形啦！

补充

顺便补充其他矩形的相关参数

ctx.shadowColor = '#d53' // 光晕颜色
ctx.shadowBlur = 20; // 光晕粗度 

这两者通常会一起使用

圆角矩形

核心

先来学习绘制矩形的方法

arcTo 使用给定的控制点和半径将圆弧添加到当前子路径。 如果指定参数需要，圆弧会自动使用直线连接到路径的最新点。

void ctx.arcTo(x1, y1, x2, y2, radius);

给予各个点来绘制带有圆角的矩形

const handleMouseDown = (event: any) => {
  ...
 case "roundedRectangle":
  clearCanvas();
  restore();
  ctx.strokeStyle = activeColor;
  roundRect(ctx, initialPoint?.x, initialPoint?.y, width, height, 10); // 绘制圆角矩形
  ctx.stroke();
  break;
  ...
};



const roundRect = (ctx ,x ,y ,w ,h , r:圆角的程度) => {
    if (w < 2 * r) r = w / 2;
    if (h < 2 * r) r = h / 2;
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
};

迅速地搞定！