@jianghh/canvas-graffiti
Version:
canvas涂鸦库,支持手写、笔写、鼠标,选中元素,并且移动、删除等功能。集成撤销重做操作。
42 lines (41 loc) • 1.54 kB
JavaScript
import { GraffitiEle as f } from "../element/index.js";
import { roundToNDecimalPlaces as o } from "../utils/index.js";
const a = {
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.arc(this.beginPoint.x, this.beginPoint.y, Math.abs(t - this.beginPoint.x), 0, 2 * Math.PI), 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) }), this.ctx.beginPath();
const t = this.points[0], i = this.points[1], s = Math.abs(i.x - t.x);
this.ctx.arc(t.x, t.y, s, 0, 2 * Math.PI), this.ctx.stroke();
const e = t.x < i.x ? t.x - s : i.x, h = t.y - s, n = t.x < i.x ? i.x : t.x + s, r = t.y + s;
this.graffitiEleList.push(
new f({
tool: "Arc",
left: e,
top: h,
right: n,
bottom: r,
points: this.points,
shadowColor: this.shadowColor,
lineWidth: this.lineWidth,
shadowBlur: this.shadowBlur,
strokeStyle: this.strokeStyle,
fillStyle: this.fillStyle
})
);
}
},
drawEle(t) {
let i = t[0], s = t[1];
this.ctx.beginPath(), this.ctx.arc(i.x, i.y, Math.abs(s.x - i.x), 0, 2 * Math.PI), this.ctx.stroke();
}
};
export {
a as Arc
};