@jianghh/canvas-graffiti
Version:
canvas涂鸦库，支持手写、笔写、鼠标，选中元素，并且移动、删除等功能。集成撤销重做操作。
43 lines (42 loc) • 1.71 kB
JavaScript
import { genRectByTwoPoint as l, isRectIntersect as n } from "../element/index.js";
const b = {
buffer: !0,
pointerdown({ offsetX: e, offsetY: i }) {
i += 12, this.bufferCtx.moveTo(e, i), this.points.push({ x: e >> 0, y: i >> 0 }), this.bufferCtx.lineJoin = "round", this.bufferCtx.lineWidth = 4, this.bufferCtx.strokeStyle = this.fillStyle, this.bufferCtx.shadowColor = this.shadowColor, this.bufferCtx.shadowBlur = 6, r.call(this, {
left: e,
top: i,
right: e,
bottom: i
});
},
pointermove({ offsetX: e, offsetY: i }) {
if (i += 12, this.points.push({ x: e >> 0, y: i >> 0 }), this.points.length < 4)
return;
const t = this.points.slice(-4);
this.bufferCtx.clearRect(0, 0, this.el.width, this.el.height);
const f = {
x: (t[2].x + t[3].x) / 2,
y: (t[2].y + t[3].y) / 2
}, s = l(t[1], t[3]);
r.call(this, s), this.bufferCtx.beginPath(), this.bufferCtx.moveTo(this.beginPoint.x, this.beginPoint.y), this.bufferCtx.lineTo(t[0].x, t[0].y), this.bufferCtx.lineTo(t[1].x, t[1].y), this.bufferCtx.lineTo(t[2].x, t[2].y), this.bufferCtx.lineTo(t[3].x, t[3].y), this.bufferCtx.stroke(), this.beginPoint = f;
}
};
function r(e) {
let i = !1;
this.graffitiEleList.forEach((t) => {
n(t, e) && ["Marker", "Pen"].includes(t.tool) && t.points.some((s, u) => {
const h = t.points[u + 1] || null;
let o;
if (h ? o = l(s, h) : o = {
left: s.x - this.lineWidth,
top: s.y - this.lineWidth,
right: s.x + this.lineWidth,
bottom: s.y + this.lineWidth
}, n(o, e))
return !0;
}) && (i = !0, t.deleteEle());
}), i && (this.flush(), this.drawEles());
}
export {
b as Erase
};