286 lines
11 KiB
JavaScript
286 lines
11 KiB
JavaScript
import EventEmitter from "@/utils/emitter";
|
||
|
||
/**
|
||
* Canvas绘图类，支持多种图形绘制和多人同步
|
||
* 使用百分比坐标系统确保跨设备一致性
|
||
*/
|
||
class Canvas extends EventEmitter {
|
||
constructor(canvasId) {
|
||
super();
|
||
this.canvas = document.getElementById(canvasId);
|
||
if (!this.canvas) {
|
||
throw new Error(`Canvas element with id ${canvasId} not found`);
|
||
}
|
||
|
||
this.ctx = this.canvas.getContext('2d');
|
||
this.shapes = []; // 所有已绘制形状
|
||
this.currentShape = null; // 当前正在绘制的形状
|
||
this.isDrawing = false;
|
||
this.drawingTool = 'pencil';
|
||
this.pathOptimizationEnabled = true;
|
||
this.optimizationThreshold = 0.005;
|
||
this.currentColor = '#ffcc00';
|
||
this.currentThickness = 2;
|
||
|
||
this.resize();
|
||
|
||
// 绑定事件
|
||
this.handleMouseDown = this.handleMouseDown.bind(this);
|
||
this.handleMouseMove = this.handleMouseMove.bind(this);
|
||
this.handleMouseUp = this.handleMouseUp.bind(this);
|
||
this.handleMouseLeave = this.handleMouseLeave.bind(this);
|
||
|
||
this.canvas.addEventListener('mousedown', this.handleMouseDown);
|
||
this.canvas.addEventListener('mousemove', this.handleMouseMove);
|
||
this.canvas.addEventListener('mouseup', this.handleMouseUp);
|
||
this.canvas.addEventListener('mouseleave', this.handleMouseLeave);
|
||
|
||
window.addEventListener('resize', () => this.resize());
|
||
}
|
||
|
||
resize() {
|
||
const parent = this.canvas.parentElement;
|
||
if (!parent) return;
|
||
|
||
const containerWidth = parent.offsetWidth;
|
||
const containerHeight = parent.offsetHeight;
|
||
|
||
let width = containerWidth;
|
||
let height = Math.floor((width * 9) / 16);
|
||
|
||
if (height > containerHeight) {
|
||
height = containerHeight;
|
||
width = Math.floor((height * 16) / 9);
|
||
}
|
||
|
||
if (this.canvas.width === width && this.canvas.height === height) return;
|
||
|
||
this.canvas.width = width;
|
||
this.canvas.height = height;
|
||
this.canvas.style.width = width + "px";
|
||
this.canvas.style.height = height + "px";
|
||
|
||
this.render();
|
||
}
|
||
|
||
setDrawingTool(tool) { this.drawingTool = tool; }
|
||
setColor(color) { this.currentColor = color; }
|
||
setThickness(size) { this.currentThickness = size; }
|
||
setPathOptimization(enabled) { this.pathOptimizationEnabled = enabled; }
|
||
setOptimizationThreshold(threshold) { this.optimizationThreshold = threshold; }
|
||
getShapes() { return this.shapes; }
|
||
setShapes(shapes) { this.shapes = shapes; this.render(); }
|
||
|
||
getMouseCoordinates(e) {
|
||
const rect = this.canvas.getBoundingClientRect();
|
||
return {
|
||
x: (e.clientX - rect.left) / this.canvas.width,
|
||
y: (e.clientY - rect.top) / this.canvas.height
|
||
};
|
||
}
|
||
|
||
handleMouseDown(e) {
|
||
this.isDrawing = true;
|
||
const coords = this.getMouseCoordinates(e);
|
||
|
||
if (this.drawingTool === 'pencil') {
|
||
this.currentShape = { type: 'pencil', data: { color: this.currentColor, path: [coords], thickness: this.currentThickness } };
|
||
} else if (this.drawingTool === 'line') {
|
||
this.currentShape = { type: 'line', data: { color: this.currentColor, start: coords, end: coords, thickness: this.currentThickness } };
|
||
} else if (this.drawingTool === 'rectangle') {
|
||
this.currentShape = { type: 'rectangle', data: { color: this.currentColor, start: coords, end: coords, thickness: this.currentThickness, fill: false } };
|
||
} else if (this.drawingTool === 'circle') {
|
||
this.currentShape = { type: 'circle', data: { color: this.currentColor, start: coords, end: coords, thickness: this.currentThickness, fill: false } };
|
||
} else if (this.drawingTool === 'eraser') {
|
||
this.currentShape = { type: 'eraser', data: { color: '#ffffff', start: coords, end: coords, thickness: 3 } };
|
||
}
|
||
|
||
this.emit('drawingStart', this.currentShape);
|
||
}
|
||
|
||
handleMouseMove(e) {
|
||
if (!this.isDrawing || !this.currentShape) return;
|
||
const coords = this.getMouseCoordinates(e);
|
||
|
||
if (this.drawingTool === 'pencil') {
|
||
this.currentShape.data.path.push(coords);
|
||
} else {
|
||
this.currentShape.data.end = coords;
|
||
}
|
||
|
||
this.render();
|
||
this.emit('drawingUpdate', this.currentShape);
|
||
}
|
||
|
||
handleMouseUp(e) {
|
||
if (!this.isDrawing || !this.currentShape) return;
|
||
this.isDrawing = false;
|
||
const coords = this.getMouseCoordinates(e);
|
||
if (this.drawingTool === 'pencil' && this.pathOptimizationEnabled && this.currentShape.data.path.length > 10) {
|
||
this.currentShape.data.path = this.optimizePath(this.currentShape.data.path);
|
||
} else {
|
||
this.currentShape.data.end = coords;
|
||
}
|
||
|
||
this.shapes.push({ ...this.currentShape });
|
||
this.emit('drawingEnd', this.currentShape);
|
||
this.currentShape = null;
|
||
this.render();
|
||
}
|
||
|
||
handleMouseLeave(e) {
|
||
if (this.isDrawing) this.handleMouseUp(e);
|
||
}
|
||
|
||
optimizePath(path) {
|
||
if (path.length < 3) return path;
|
||
const optimizedPath = [path[0]];
|
||
for (let i = 1; i < path.length - 1;) {
|
||
let a = 1;
|
||
while (i + a < path.length && this.calculateDistance(path[i], path[i + a]) < this.optimizationThreshold) a++;
|
||
optimizedPath.push(path[i]);
|
||
i += a;
|
||
}
|
||
optimizedPath.push(path[path.length - 1]);
|
||
return optimizedPath;
|
||
}
|
||
|
||
calculateDistance(p1, p2) {
|
||
return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
|
||
}
|
||
|
||
addShape(shapeData) {
|
||
if (Array.isArray(shapeData)) this.shapes.push(...shapeData);
|
||
else this.shapes.push(shapeData);
|
||
this.render();
|
||
}
|
||
|
||
clearCanvas() {
|
||
this.shapes = [];
|
||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||
this.emit('clear');
|
||
}
|
||
|
||
exportToDataURL(type = 'image/png', quality = 1) {
|
||
return this.canvas.toDataURL(type, quality);
|
||
}
|
||
|
||
render() {
|
||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||
|
||
// 绘制历史形状
|
||
this.shapes.forEach(shape => this.drawShape(shape));
|
||
|
||
// 绘制当前正在绘制的形状
|
||
if (this.currentShape) this.drawShape(this.currentShape);
|
||
|
||
// 画画布边框
|
||
this.ctx.save();
|
||
this.ctx.strokeStyle = "#000";
|
||
this.ctx.lineWidth = 2;
|
||
this.ctx.strokeRect(0, 0, this.canvas.width, this.canvas.height);
|
||
this.ctx.restore();
|
||
}
|
||
|
||
drawShape(shape) {
|
||
switch (shape.type) {
|
||
case 'pencil': this.drawPencil(shape.data); break;
|
||
case 'line': this.drawLine(shape.data); break;
|
||
case 'rectangle': this.drawRectangle(shape.data); break;
|
||
case 'circle': this.drawCircle(shape.data); break;
|
||
case 'eraser': this.drawEraser(shape.data, shape); break;
|
||
}
|
||
}
|
||
|
||
drawPencil(p) {
|
||
if (p.path.length < 2) return;
|
||
const path = p.path.map(pt => ({ x: pt.x * this.canvas.width, y: pt.y * this.canvas.height }));
|
||
this.ctx.beginPath();
|
||
this.ctx.strokeStyle = p.color;
|
||
this.ctx.lineWidth = p.thickness;
|
||
this.ctx.lineCap = 'round';
|
||
this.ctx.lineJoin = 'round';
|
||
this.drawSmoothCurve(this.ctx, path);
|
||
this.ctx.stroke();
|
||
}
|
||
|
||
drawSmoothCurve(ctx, path) {
|
||
if (path.length < 3) { ctx.moveTo(path[0].x, path[0].y); for (let i = 1; i < path.length; i++) ctx.lineTo(path[i].x, path[i].y); return; }
|
||
ctx.moveTo(path[0].x, path[0].y);
|
||
const threshold = 5;
|
||
for (let i = 1; i < path.length - 2;) {
|
||
let a = 1;
|
||
while (i + a < path.length - 2 &&
|
||
Math.sqrt(Math.pow(path[i].x - path[i + a].x, 2) + Math.pow(path[i].y - path[i + a].y, 2)) < threshold) a++;
|
||
const xc = (path[i].x + path[i + a].x) / 2;
|
||
const yc = (path[i].y + path[i + a].y) / 2;
|
||
ctx.quadraticCurveTo(path[i].x, path[i].y, xc, yc);
|
||
i += a;
|
||
}
|
||
ctx.lineTo(path[path.length - 1].x, path[path.length - 1].y);
|
||
}
|
||
|
||
drawLine(l) {
|
||
const sx = l.start.x * this.canvas.width, sy = l.start.y * this.canvas.height;
|
||
const ex = l.end.x * this.canvas.width, ey = l.end.y * this.canvas.height;
|
||
this.ctx.beginPath();
|
||
this.ctx.moveTo(sx, sy);
|
||
this.ctx.lineTo(ex, ey);
|
||
this.ctx.strokeStyle = l.color;
|
||
this.ctx.lineWidth = l.thickness;
|
||
this.ctx.stroke();
|
||
}
|
||
|
||
drawRectangle(r) {
|
||
const sx = r.start.x * this.canvas.width, sy = r.start.y * this.canvas.height;
|
||
const ex = r.end.x * this.canvas.width, ey = r.end.y * this.canvas.height;
|
||
const w = ex - sx, h = ey - sy;
|
||
this.ctx.beginPath();
|
||
this.ctx.rect(sx, sy, w, h);
|
||
if (r.fill) { this.ctx.fillStyle = r.color; this.ctx.fill(); }
|
||
else { this.ctx.strokeStyle = r.color; this.ctx.lineWidth = r.thickness; this.ctx.stroke(); }
|
||
}
|
||
|
||
drawCircle(c) {
|
||
const sx = c.start.x * this.canvas.width, sy = c.start.y * this.canvas.height;
|
||
const ex = c.end.x * this.canvas.width, ey = c.end.y * this.canvas.height;
|
||
const cx = (sx + ex) / 2, cy = (sy + ey) / 2;
|
||
const rx = Math.abs(ex - sx) / 2, ry = Math.abs(ey - sy) / 2;
|
||
this.ctx.beginPath();
|
||
this.ctx.ellipse(cx, cy, rx, ry, 0, 0, 2 * Math.PI);
|
||
if (c.fill) { this.ctx.fillStyle = c.color; this.ctx.fill(); }
|
||
else { this.ctx.strokeStyle = c.color; this.ctx.lineWidth = c.thickness; this.ctx.stroke(); }
|
||
}
|
||
|
||
drawEraser(e, shapeObj) {
|
||
const sx = e.start.x * this.canvas.width, sy = e.start.y * this.canvas.height;
|
||
const ex = e.end.x * this.canvas.width, ey = e.end.y * this.canvas.height;
|
||
const w = Math.abs(ex - sx), h = Math.abs(ey - sy);
|
||
const x = Math.min(sx, ex), y = Math.min(sy, ey);
|
||
|
||
this.ctx.beginPath();
|
||
this.ctx.rect(x, y, w, h);
|
||
this.ctx.fillStyle = 'rgba(255,255,255)';
|
||
this.ctx.fill();
|
||
|
||
// 仅当前正在绘制的橡皮擦显示边框
|
||
if (this.currentShape && shapeObj === this.currentShape) {
|
||
this.ctx.save();
|
||
this.ctx.strokeStyle = '#000';
|
||
this.ctx.lineWidth = 1;
|
||
this.ctx.strokeRect(x, y, w, h);
|
||
this.ctx.restore();
|
||
}
|
||
}
|
||
|
||
destroy() {
|
||
this.canvas.removeEventListener('mousedown', this.handleMouseDown);
|
||
this.canvas.removeEventListener('mousemove', this.handleMouseMove);
|
||
this.canvas.removeEventListener('mouseup', this.handleMouseUp);
|
||
this.canvas.removeEventListener('mouseleave', this.handleMouseLeave);
|
||
window.removeEventListener('resize', this.resize);
|
||
}
|
||
}
|
||
|
||
export default Canvas;
|