utils.ts

/**
 * 绘制网格
 * @param color 网格颜色
 * @param w canvas画布宽
 * @param h canvas画布高
 * @param pen canvas 画笔
 * @param status 默认true，保存画布状态
 */
export function drawGrid(
  color: string,
  w: number,
  h: number,
  pen: any,
  status = true
) {
  const step = 100;
  const w_l = w / step;
  const h_l = h / step;

  if (status) {
    pen.save();
  }
  // 横着的线
  for (let i = 0; i <= h_l; i++) {
    pen.beginPath();
    pen.strokeStyle = color;
    pen.moveTo(0, i * step);
    pen.lineTo(w, i * step);
    pen.stroke();
  }
  // 竖着的线
  for (let i = 0; i <= w_l; i++) {
    pen.beginPath();
    pen.moveTo(i * step, 0);
    pen.lineTo(i * step, h);
    pen.stroke();
  }
  if (status) {
    pen.restore();
  }
}

/**
 * canvas旋转中心偏移值
 * @param width canvas宽
 * @param center 中心坐标点 center:{x:100,y:100}
 * @param arc 旋转的弧度值
 */
export function rotateOriginOffset(
  width: number,
  center: { x: number; y: number },
  arc: any
) {
  const r1 = width - center.x;
  const xRes1 = Math.cos(arc) * r1;
  const yRes1 = Math.sin(arc) * r1;
  const x1 = center.x + xRes1;
  const y1 = center.y + yRes1;

  const x0 = width;
  const y0 = center.y;
  const c0 = Math.sqrt(Math.pow(x0, 2) + Math.pow(y0, 2));
  const arc0 = Math.atan2(y0, x0);
  const arc_0 = arc0 + arc;
  const y2 = Math.sin(arc_0) * c0;
  const x2 = y2 / Math.tan(arc_0);

  const xLength = x1 - x2;
  const yLength = y1 - y2;
  return {
    x: xLength,
    y: yLength,
  };
}

/**
 * 角度值转弧度值
 * @param degree 角度值
 */
export function toArc(degree: number) {
  return (degree * Math.PI) / 180;
}