@jianghh/canvas-graffiti/es/tools/Rect.js

canvas涂鸦库，支持手写、笔写、鼠标，选中元素，并且移动、删除等功能。集成撤销重做操作。

import { genRectByTwoPoint as s, GraffitiEle as h } from "../element/index.js";
import { roundToNDecimalPlaces as o } from "../utils/index.js";
const f = {
  buffer: !0,
  pointerdown({ offsetX: t, offsetY: i }) {
    this.bufferCtx.moveTo(t, i), this.points.push({ x: o(t), y: o(i) });
  },
  pointermove({ offsetX: t, offsetY: i }) {
    this.bufferCtx.clearRect(0, 0, this.el.width, this.el.height), this.bufferCtx.beginPath(), this.bufferCtx.moveTo(this.beginPoint.x, this.beginPoint.y), this.bufferCtx.rect(this.beginPoint.x, this.beginPoint.y, t - this.beginPoint.x, i - this.beginPoint.y), this.endPoint = { x: t, y: i }, this.bufferCtx.stroke();
  },
  pointerup() {
    if (this.endPoint) {
      this.points.push({ x: o(this.endPoint.x), y: o(this.endPoint.y) });
      const t = this.points[0], i = this.points[1];
      this.ctx.beginPath(), this.ctx.moveTo(t.x, t.y), this.ctx.rect(t.x, t.y, i.x - t.x, i.y - t.y), this.ctx.stroke();
      const e = s(t, i);
      this.graffitiEleList.push(
        new h({
          tool: "Rect",
          ...e,
          points: this.points,
          shadowColor: this.shadowColor,
          lineWidth: this.lineWidth,
          shadowBlur: this.shadowBlur,
          strokeStyle: this.strokeStyle,
          fillStyle: this.fillStyle
        })
      );
    }
  },
  drawEle(t) {
    let i = t[0], e = t[1];
    this.ctx.beginPath(), this.ctx.moveTo(i.x, i.y), this.ctx.rect(i.x, i.y, e.x - i.x, e.y - i.y), this.ctx.stroke();
  }
};
export {
  f as Rect
};