@drizm/ng-whiteboard
Version:
A Canvas component for Angular which supports free drawing.
54 lines • 9.13 kB
JavaScript
import { CanvasWhiteboardShape } from './canvas-whiteboard-shape';
import { CanvasWhiteboardPoint } from '../canvas-whiteboard-point.model';
export class FreeHandShape extends CanvasWhiteboardShape {
constructor(positionPoint, options) {
super(positionPoint, options);
this.linePositions = [];
}
getShapeName() {
return 'FreeHandShape';
}
draw(context) {
Object.assign(context, this.options);
context.beginPath();
context.moveTo(this.positionPoint.x, this.positionPoint.y);
// Draw a dot
context.lineTo(this.positionPoint.x + 1, this.positionPoint.y + 1);
// Normal fastest free hand drawing
// this.linePositions.forEach((linePosition) => {
// context.lineTo(linePosition.x, linePosition.y);
// });
// Quadratic curves drawing
let i = 0;
while (i < this.linePositions.length) {
if (this.linePositions.length - i > 2) {
const controlPoint1 = this.linePositions[i];
const controlPoint2 = this.linePositions[i + 1];
const endPoint = this.linePositions[i + 2];
context.bezierCurveTo(controlPoint1.x, controlPoint1.y, controlPoint2.x, controlPoint2.y, endPoint.x, endPoint.y);
i += 2;
}
else {
const linePosition = this.linePositions[i];
context.lineTo(linePosition.x, linePosition.y);
i += 1;
}
}
context.stroke();
}
drawPreview(context) {
this.positionPoint = new CanvasWhiteboardPoint(2, 2);
this.linePositions = [
new CanvasWhiteboardPoint(context.canvas.width - 5, context.canvas.height * 0.3),
// new CanvasWhiteboardPoint(context.canvas.width * 0.4, context.canvas.height * 0.6),
new CanvasWhiteboardPoint(context.canvas.width * 0.2, context.canvas.height * 0.4),
new CanvasWhiteboardPoint(context.canvas.width * 0.6, context.canvas.height * 0.8),
new CanvasWhiteboardPoint(context.canvas.width, context.canvas.height)
];
this.draw(context);
}
onUpdateReceived(update) {
this.linePositions.push(new CanvasWhiteboardPoint(update.x, update.y));
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJlZS1oYW5kLXNoYXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctd2hpdGVib2FyZC9zcmMvbGliL19jbGFzc2VzL3NoYXBlL2ZyZWUtaGFuZC1zaGFwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUVoRSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUd2RSxNQUFNLE9BQU8sYUFBYyxTQUFRLHFCQUFxQjtJQUd0RCxZQUFZLGFBQXFDLEVBQUUsT0FBc0M7UUFDdkYsS0FBSyxDQUFDLGFBQWEsRUFBRSxPQUFPLENBQUMsQ0FBQztRQUM5QixJQUFJLENBQUMsYUFBYSxHQUFHLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRUQsWUFBWTtRQUNWLE9BQU8sZUFBZSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxJQUFJLENBQUMsT0FBaUM7UUFDcEMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBRXJDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDM0QsYUFBYTtRQUNiLE9BQU8sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBRW5FLG1DQUFtQztRQUNuQyxpREFBaUQ7UUFDakQsc0RBQXNEO1FBQ3RELE1BQU07UUFFTiwyQkFBMkI7UUFDM0IsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsT0FBTyxDQUFDLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLEVBQUU7WUFDcEMsSUFBSSxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFO2dCQUNyQyxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxDQUFDO2dCQUM1QyxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztnQkFDaEQsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7Z0JBQzNDLE9BQU8sQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLENBQUMsRUFDbkMsYUFBYSxDQUFDLENBQUMsRUFDZixhQUFhLENBQUMsQ0FBQyxFQUNmLGFBQWEsQ0FBQyxDQUFDLEVBQ2YsUUFBUSxDQUFDLENBQUMsRUFDVixRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBQ2QsQ0FBQyxJQUFJLENBQUMsQ0FBQzthQUNSO2lCQUFNO2dCQUNMLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBQzNDLE9BQU8sQ0FBQyxNQUFNLENBQUMsWUFBWSxDQUFDLENBQUMsRUFBRSxZQUFZLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBQy9DLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDUjtTQUNGO1FBRUQsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBaUM7UUFDM0MsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLHFCQUFxQixDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUNyRCxJQUFJLENBQUMsYUFBYSxHQUFHO1lBQ25CLElBQUkscUJBQXFCLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQztZQUNoRixzRkFBc0Y7WUFDdEYsSUFBSSxxQkFBcUIsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLEtBQUssR0FBRyxHQUFHLEVBQUUsT0FBTyxDQUFDLE1BQU0sQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUFDO1lBQ2xGLElBQUkscUJBQXFCLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsR0FBRyxFQUFFLE9BQU8sQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQztZQUNsRixJQUFJLHFCQUFxQixDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLE9BQU8sQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDO1NBQ3ZFLENBQUM7UUFFRixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3JCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxNQUE4QjtRQUM3QyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLHFCQUFxQixDQUFDLE1BQU0sQ0FBQyxDQUFXLEVBQUUsTUFBTSxDQUFDLENBQVcsQ0FBQyxDQUFDLENBQUM7SUFDN0YsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDYW52YXNXaGl0ZWJvYXJkU2hhcGV9IGZyb20gJy4vY2FudmFzLXdoaXRlYm9hcmQtc2hhcGUnO1xyXG5pbXBvcnQge0NhbnZhc1doaXRlYm9hcmRTaGFwZU9wdGlvbnN9IGZyb20gJy4vY2FudmFzLXdoaXRlYm9hcmQtc2hhcGUtb3B0aW9ucyc7XHJcbmltcG9ydCB7Q2FudmFzV2hpdGVib2FyZFBvaW50fSBmcm9tICcuLi9jYW52YXMtd2hpdGVib2FyZC1wb2ludC5tb2RlbCc7XHJcbmltcG9ydCB7Q2FudmFzV2hpdGVib2FyZFVwZGF0ZX0gZnJvbSAnLi4vY2FudmFzLXdoaXRlYm9hcmQtdXBkYXRlLm1vZGVsJztcclxuXHJcbmV4cG9ydCBjbGFzcyBGcmVlSGFuZFNoYXBlIGV4dGVuZHMgQ2FudmFzV2hpdGVib2FyZFNoYXBlIHtcclxuICBsaW5lUG9zaXRpb25zOiBDYW52YXNXaGl0ZWJvYXJkUG9pbnRbXTtcclxuXHJcbiAgY29uc3RydWN0b3IocG9zaXRpb25Qb2ludD86IENhbnZhc1doaXRlYm9hcmRQb2ludCwgb3B0aW9ucz86IENhbnZhc1doaXRlYm9hcmRTaGFwZU9wdGlvbnMpIHtcclxuICAgIHN1cGVyKHBvc2l0aW9uUG9pbnQsIG9wdGlvbnMpO1xyXG4gICAgdGhpcy5saW5lUG9zaXRpb25zID0gW107XHJcbiAgfVxyXG5cclxuICBnZXRTaGFwZU5hbWUoKTogc3RyaW5nIHtcclxuICAgIHJldHVybiAnRnJlZUhhbmRTaGFwZSc7XHJcbiAgfVxyXG5cclxuICBkcmF3KGNvbnRleHQ6IENhbnZhc1JlbmRlcmluZ0NvbnRleHQyRCk6IHZvaWQge1xyXG4gICAgT2JqZWN0LmFzc2lnbihjb250ZXh0LCB0aGlzLm9wdGlvbnMpO1xyXG5cclxuICAgIGNvbnRleHQuYmVnaW5QYXRoKCk7XHJcbiAgICBjb250ZXh0Lm1vdmVUbyh0aGlzLnBvc2l0aW9uUG9pbnQueCwgdGhpcy5wb3NpdGlvblBvaW50LnkpO1xyXG4gICAgLy8gRHJhdyBhIGRvdFxyXG4gICAgY29udGV4dC5saW5lVG8odGhpcy5wb3NpdGlvblBvaW50LnggKyAxLCB0aGlzLnBvc2l0aW9uUG9pbnQueSArIDEpO1xyXG5cclxuICAgIC8vIE5vcm1hbCBmYXN0ZXN0IGZyZWUgaGFuZCBkcmF3aW5nXHJcbiAgICAvLyB0aGlzLmxpbmVQb3NpdGlvbnMuZm9yRWFjaCgobGluZVBvc2l0aW9uKSA9PiB7XHJcbiAgICAvLyAgICAgY29udGV4dC5saW5lVG8obGluZVBvc2l0aW9uLngsIGxpbmVQb3NpdGlvbi55KTtcclxuICAgIC8vIH0pO1xyXG5cclxuICAgIC8vIFF1YWRyYXRpYyBjdXJ2ZXMgZHJhd2luZ1xyXG4gICAgbGV0IGkgPSAwO1xyXG4gICAgd2hpbGUgKGkgPCB0aGlzLmxpbmVQb3NpdGlvbnMubGVuZ3RoKSB7XHJcbiAgICAgIGlmICh0aGlzLmxpbmVQb3NpdGlvbnMubGVuZ3RoIC0gaSA+IDIpIHtcclxuICAgICAgICBjb25zdCBjb250cm9sUG9pbnQxID0gdGhpcy5saW5lUG9zaXRpb25zW2ldO1xyXG4gICAgICAgIGNvbnN0IGNvbnRyb2xQb2ludDIgPSB0aGlzLmxpbmVQb3NpdGlvbnNbaSArIDFdO1xyXG4gICAgICAgIGNvbnN0IGVuZFBvaW50ID0gdGhpcy5saW5lUG9zaXRpb25zW2kgKyAyXTtcclxuICAgICAgICBjb250ZXh0LmJlemllckN1cnZlVG8oY29udHJvbFBvaW50MS54LFxyXG4gICAgICAgICAgY29udHJvbFBvaW50MS55LFxyXG4gICAgICAgICAgY29udHJvbFBvaW50Mi54LFxyXG4gICAgICAgICAgY29udHJvbFBvaW50Mi55LFxyXG4gICAgICAgICAgZW5kUG9pbnQueCxcclxuICAgICAgICAgIGVuZFBvaW50LnkpO1xyXG4gICAgICAgIGkgKz0gMjtcclxuICAgICAgfSBlbHNlIHtcclxuICAgICAgICBjb25zdCBsaW5lUG9zaXRpb24gPSB0aGlzLmxpbmVQb3NpdGlvbnNbaV07XHJcbiAgICAgICAgY29udGV4dC5saW5lVG8obGluZVBvc2l0aW9uLngsIGxpbmVQb3NpdGlvbi55KTtcclxuICAgICAgICBpICs9IDE7XHJcbiAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBjb250ZXh0LnN0cm9rZSgpO1xyXG4gIH1cclxuXHJcbiAgZHJhd1ByZXZpZXcoY29udGV4dDogQ2FudmFzUmVuZGVyaW5nQ29udGV4dDJEKTogdm9pZCB7XHJcbiAgICB0aGlzLnBvc2l0aW9uUG9pbnQgPSBuZXcgQ2FudmFzV2hpdGVib2FyZFBvaW50KDIsIDIpO1xyXG4gICAgdGhpcy5saW5lUG9zaXRpb25zID0gW1xyXG4gICAgICBuZXcgQ2FudmFzV2hpdGVib2FyZFBvaW50KGNvbnRleHQuY2FudmFzLndpZHRoIC0gNSwgY29udGV4dC5jYW52YXMuaGVpZ2h0ICogMC4zKSxcclxuICAgICAgLy8gbmV3IENhbnZhc1doaXRlYm9hcmRQb2ludChjb250ZXh0LmNhbnZhcy53aWR0aCAqIDAuNCwgY29udGV4dC5jYW52YXMuaGVpZ2h0ICogMC42KSxcclxuICAgICAgbmV3IENhbnZhc1doaXRlYm9hcmRQb2ludChjb250ZXh0LmNhbnZhcy53aWR0aCAqIDAuMiwgY29udGV4dC5jYW52YXMuaGVpZ2h0ICogMC40KSxcclxuICAgICAgbmV3IENhbnZhc1doaXRlYm9hcmRQb2ludChjb250ZXh0LmNhbnZhcy53aWR0aCAqIDAuNiwgY29udGV4dC5jYW52YXMuaGVpZ2h0ICogMC44KSxcclxuICAgICAgbmV3IENhbnZhc1doaXRlYm9hcmRQb2ludChjb250ZXh0LmNhbnZhcy53aWR0aCwgY29udGV4dC5jYW52YXMuaGVpZ2h0KVxyXG4gICAgXTtcclxuXHJcbiAgICB0aGlzLmRyYXcoY29udGV4dCk7XHJcbiAgfVxyXG5cclxuICBvblVwZGF0ZVJlY2VpdmVkKHVwZGF0ZTogQ2FudmFzV2hpdGVib2FyZFVwZGF0ZSk6IHZvaWQge1xyXG4gICAgdGhpcy5saW5lUG9zaXRpb25zLnB1c2gobmV3IENhbnZhc1doaXRlYm9hcmRQb2ludCh1cGRhdGUueCBhcyBudW1iZXIsIHVwZGF0ZS55IGFzIG51bWJlcikpO1xyXG4gIH1cclxufVxyXG4iXX0=