@jianghh/canvas-graffiti
Version:
canvas涂鸦库，支持手写、笔写、鼠标，选中元素，并且移动、删除等功能。集成撤销重做操作。
53 lines (52 loc) • 2.15 kB
JavaScript
import { GraffitiEle as x } from "../element/index.js";
import { roundToNDecimalPlaces as e } from "../utils/index.js";
const a = {
pointerdown({ offsetX: h, offsetY: s }) {
this.points.push({ x: e(h), y: e(s) }), this.ctx.beginPath(), this.ctx.moveTo(this.beginPoint.x, this.beginPoint.y), this.ctx.arc(this.beginPoint.x, this.beginPoint.y, this.lineWidth / 2, 0, 2 * Math.PI), this.ctx.fill();
},
pointermove({ offsetX: h, offsetY: s }) {
if (this.points.push({ x: e(h), y: e(s) }), this.points.length < 3)
return;
const t = this.points.slice(-2), o = t[0], i = {
x: (t[0].x + t[1].x) / 2,
y: (t[0].y + t[1].y) / 2
};
this.ctx.beginPath(), this.ctx.moveTo(this.beginPoint.x, this.beginPoint.y), this.ctx.quadraticCurveTo(o.x, o.y, i.x, i.y), this.ctx.stroke(), this.beginPoint = i;
},
pointerup() {
this.ctx.beginPath(), this.ctx.arc(this.beginPoint.x, this.beginPoint.y, this.lineWidth / 2, 0, 2 * Math.PI), this.ctx.fill();
let h = this.width, s = this.height, t = 0, o = 0;
this.points.forEach((i) => {
i.x < h && (h = i.x), i.x > t && (t = i.x), i.y < s && (s = i.y), i.y > o && (o = i.y);
}), this.graffitiEleList.push(
new x({
tool: "Marker",
left: h,
top: s,
right: t,
bottom: o,
points: this.points,
shadowColor: this.shadowColor,
lineWidth: this.lineWidth,
shadowBlur: this.shadowBlur,
strokeStyle: this.strokeStyle,
fillStyle: this.fillStyle
})
);
},
drawEle(h) {
let s = [], t = h[0];
this.ctx.beginPath(), this.ctx.moveTo(t.x, t.y), this.ctx.arc(t.x, t.y, this.lineWidth / 2, 0, 2 * Math.PI), this.ctx.fill(), h.forEach((o) => {
if (s.push(o), s.length < 3)
return;
const i = s.slice(-2), l = i[0], n = {
x: (i[0].x + i[1].x) / 2,
y: (i[0].y + i[1].y) / 2
};
this.ctx.beginPath(), this.ctx.moveTo(t.x, t.y), this.ctx.quadraticCurveTo(l.x, l.y, n.x, n.y), this.ctx.stroke(), t = n;
}), this.ctx.arc(t.x, t.y, this.lineWidth / 2, 0, 2 * Math.PI), this.ctx.fill(), s = [];
}
};
export {
a as Marker
};