@drizm/ng-whiteboard
Version:
A Canvas component for Angular which supports free drawing.
46 lines • 8.67 kB
JavaScript
import { CanvasWhiteboardShape } from './canvas-whiteboard-shape';
import { CanvasWhiteboardPoint } from '../canvas-whiteboard-point.model';
export class SmileyShape extends CanvasWhiteboardShape {
constructor(positionPoint, options, radius) {
super(positionPoint, options);
this.options.shouldFillShape = true;
this.options.fillStyle = this.options.fillStyle || 'yellow';
this.radius = radius || 0;
}
getShapeName() {
return 'SmileyShape';
}
draw(context) {
context.beginPath();
Object.assign(context, this.options);
context.arc(this.positionPoint.x, this.positionPoint.y, this.radius, 0, Math.PI * 2, false);
context.fill();
context.stroke();
context.beginPath();
const leftEyeX = this.positionPoint.x - this.radius * 0.3;
const rightEyeX = this.positionPoint.x + this.radius * 0.3;
const eyesY = this.positionPoint.y - this.radius * 0.2;
const eyeSize = this.radius * 0.1;
context.arc(leftEyeX, eyesY, eyeSize, 0, 2 * Math.PI, false);
context.arc(rightEyeX, eyesY, eyeSize, 0, 2 * Math.PI, false);
context.fillStyle = this.options.strokeStyle;
context.fill();
// draw the mouth
context.beginPath();
context.arc(this.positionPoint.x, this.positionPoint.y, this.radius * 0.7, 0, Math.PI, false);
context.stroke();
context.closePath();
}
drawPreview(context) {
this.positionPoint = new CanvasWhiteboardPoint(context.canvas.width / 2, context.canvas.height / 2);
this.radius = this.calculateRadius(context.canvas.width - 2, context.canvas.height / 2);
this.draw(context);
}
onUpdateReceived(update) {
this.radius = this.calculateRadius(update.x, update.y);
}
calculateRadius(x, y) {
return Math.sqrt(Math.pow(x - this.positionPoint.x, 2) + Math.pow(y - this.positionPoint.y, 2));
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic21pbGV5LXNoYXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctd2hpdGVib2FyZC9zcmMvbGliL19jbGFzc2VzL3NoYXBlL3NtaWxleS1zaGFwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUVoRSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUd2RSxNQUFNLE9BQU8sV0FBWSxTQUFRLHFCQUFxQjtJQUdwRCxZQUFZLGFBQXFDLEVBQUUsT0FBc0MsRUFBRSxNQUFlO1FBQ3hHLEtBQUssQ0FBQyxhQUFhLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFDOUIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDO1FBQ3BDLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxJQUFJLFFBQVEsQ0FBQztRQUU1RCxJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sSUFBSSxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUVELFlBQVk7UUFDVixPQUFPLGFBQWEsQ0FBQztJQUN2QixDQUFDO0lBRUQsSUFBSSxDQUFDLE9BQWlDO1FBQ3BDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUVwQixNQUFNLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFFckMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsRUFBRSxHQUFHLENBQUMsRUFBRSxLQUFLLENBQUMsQ0FBQztRQUM1RixPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDZixPQUFPLENBQUMsTUFBTSxFQUFFLENBQUM7UUFFakIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ3BCLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUFDO1FBQzFELE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUFDO1FBQzNELE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUFDO1FBQ3ZELE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUFDO1FBRWxDLE9BQU8sQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsRUFBRSxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQzdELE9BQU8sQ0FBQyxHQUFHLENBQUMsU0FBUyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsRUFBRSxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQzlELE9BQU8sQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFxQixDQUFDO1FBQ3ZELE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUVmLGlCQUFpQjtRQUNqQixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLEVBQUUsRUFBRSxLQUFLLENBQUMsQ0FBQztRQUM5RixPQUFPLENBQUMsTUFBTSxFQUFFLENBQUM7UUFFakIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBaUM7UUFDM0MsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLHFCQUFxQixDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsS0FBSyxHQUFHLENBQUMsRUFBRSxPQUFPLENBQUMsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztRQUNwRyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ3hGLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDckIsQ0FBQztJQUVELGdCQUFnQixDQUFDLE1BQThCO1FBQzdDLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBVyxFQUFFLE1BQU0sQ0FBQyxDQUFXLENBQUMsQ0FBQztJQUM3RSxDQUFDO0lBRUQsZUFBZSxDQUFDLENBQVMsRUFBRSxDQUFTO1FBQ2xDLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ2xHLENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2FudmFzV2hpdGVib2FyZFNoYXBlfSBmcm9tICcuL2NhbnZhcy13aGl0ZWJvYXJkLXNoYXBlJztcclxuaW1wb3J0IHtDYW52YXNXaGl0ZWJvYXJkU2hhcGVPcHRpb25zfSBmcm9tICcuL2NhbnZhcy13aGl0ZWJvYXJkLXNoYXBlLW9wdGlvbnMnO1xyXG5pbXBvcnQge0NhbnZhc1doaXRlYm9hcmRQb2ludH0gZnJvbSAnLi4vY2FudmFzLXdoaXRlYm9hcmQtcG9pbnQubW9kZWwnO1xyXG5pbXBvcnQge0NhbnZhc1doaXRlYm9hcmRVcGRhdGV9IGZyb20gJy4uL2NhbnZhcy13aGl0ZWJvYXJkLXVwZGF0ZS5tb2RlbCc7XHJcblxyXG5leHBvcnQgY2xhc3MgU21pbGV5U2hhcGUgZXh0ZW5kcyBDYW52YXNXaGl0ZWJvYXJkU2hhcGUge1xyXG4gIHJhZGl1czogbnVtYmVyO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwb3NpdGlvblBvaW50PzogQ2FudmFzV2hpdGVib2FyZFBvaW50LCBvcHRpb25zPzogQ2FudmFzV2hpdGVib2FyZFNoYXBlT3B0aW9ucywgcmFkaXVzPzogbnVtYmVyKSB7XHJcbiAgICBzdXBlcihwb3NpdGlvblBvaW50LCBvcHRpb25zKTtcclxuICAgIHRoaXMub3B0aW9ucy5zaG91bGRGaWxsU2hhcGUgPSB0cnVlO1xyXG4gICAgdGhpcy5vcHRpb25zLmZpbGxTdHlsZSA9IHRoaXMub3B0aW9ucy5maWxsU3R5bGUgfHwgJ3llbGxvdyc7XHJcblxyXG4gICAgdGhpcy5yYWRpdXMgPSByYWRpdXMgfHwgMDtcclxuICB9XHJcblxyXG4gIGdldFNoYXBlTmFtZSgpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuICdTbWlsZXlTaGFwZSc7XHJcbiAgfVxyXG5cclxuICBkcmF3KGNvbnRleHQ6IENhbnZhc1JlbmRlcmluZ0NvbnRleHQyRCk6IHZvaWQge1xyXG4gICAgY29udGV4dC5iZWdpblBhdGgoKTtcclxuXHJcbiAgICBPYmplY3QuYXNzaWduKGNvbnRleHQsIHRoaXMub3B0aW9ucyk7XHJcblxyXG4gICAgY29udGV4dC5hcmModGhpcy5wb3NpdGlvblBvaW50LngsIHRoaXMucG9zaXRpb25Qb2ludC55LCB0aGlzLnJhZGl1cywgMCwgTWF0aC5QSSAqIDIsIGZhbHNlKTtcclxuICAgIGNvbnRleHQuZmlsbCgpO1xyXG4gICAgY29udGV4dC5zdHJva2UoKTtcclxuXHJcbiAgICBjb250ZXh0LmJlZ2luUGF0aCgpO1xyXG4gICAgY29uc3QgbGVmdEV5ZVggPSB0aGlzLnBvc2l0aW9uUG9pbnQueCAtIHRoaXMucmFkaXVzICogMC4zO1xyXG4gICAgY29uc3QgcmlnaHRFeWVYID0gdGhpcy5wb3NpdGlvblBvaW50LnggKyB0aGlzLnJhZGl1cyAqIDAuMztcclxuICAgIGNvbnN0IGV5ZXNZID0gdGhpcy5wb3NpdGlvblBvaW50LnkgLSB0aGlzLnJhZGl1cyAqIDAuMjtcclxuICAgIGNvbnN0IGV5ZVNpemUgPSB0aGlzLnJhZGl1cyAqIDAuMTtcclxuXHJcbiAgICBjb250ZXh0LmFyYyhsZWZ0RXllWCwgZXllc1ksIGV5ZVNpemUsIDAsIDIgKiBNYXRoLlBJLCBmYWxzZSk7XHJcbiAgICBjb250ZXh0LmFyYyhyaWdodEV5ZVgsIGV5ZXNZLCBleWVTaXplLCAwLCAyICogTWF0aC5QSSwgZmFsc2UpO1xyXG4gICAgY29udGV4dC5maWxsU3R5bGUgPSB0aGlzLm9wdGlvbnMuc3Ryb2tlU3R5bGUgYXMgc3RyaW5nO1xyXG4gICAgY29udGV4dC5maWxsKCk7XHJcblxyXG4gICAgLy8gZHJhdyB0aGUgbW91dGhcclxuICAgIGNvbnRleHQuYmVnaW5QYXRoKCk7XHJcbiAgICBjb250ZXh0LmFyYyh0aGlzLnBvc2l0aW9uUG9pbnQueCwgdGhpcy5wb3NpdGlvblBvaW50LnksIHRoaXMucmFkaXVzICogMC43LCAwLCBNYXRoLlBJLCBmYWxzZSk7XHJcbiAgICBjb250ZXh0LnN0cm9rZSgpO1xyXG5cclxuICAgIGNvbnRleHQuY2xvc2VQYXRoKCk7XHJcbiAgfVxyXG5cclxuICBkcmF3UHJldmlldyhjb250ZXh0OiBDYW52YXNSZW5kZXJpbmdDb250ZXh0MkQpOiB2b2lkIHtcclxuICAgIHRoaXMucG9zaXRpb25Qb2ludCA9IG5ldyBDYW52YXNXaGl0ZWJvYXJkUG9pbnQoY29udGV4dC5jYW52YXMud2lkdGggLyAyLCBjb250ZXh0LmNhbnZhcy5oZWlnaHQgLyAyKTtcclxuICAgIHRoaXMucmFkaXVzID0gdGhpcy5jYWxjdWxhdGVSYWRpdXMoY29udGV4dC5jYW52YXMud2lkdGggLSAyLCBjb250ZXh0LmNhbnZhcy5oZWlnaHQgLyAyKTtcclxuICAgIHRoaXMuZHJhdyhjb250ZXh0KTtcclxuICB9XHJcblxyXG4gIG9uVXBkYXRlUmVjZWl2ZWQodXBkYXRlOiBDYW52YXNXaGl0ZWJvYXJkVXBkYXRlKTogdm9pZCB7XHJcbiAgICB0aGlzLnJhZGl1cyA9IHRoaXMuY2FsY3VsYXRlUmFkaXVzKHVwZGF0ZS54IGFzIG51bWJlciwgdXBkYXRlLnkgYXMgbnVtYmVyKTtcclxuICB9XHJcblxyXG4gIGNhbGN1bGF0ZVJhZGl1cyh4OiBudW1iZXIsIHk6IG51bWJlcik6IG51bWJlciB7XHJcbiAgICByZXR1cm4gTWF0aC5zcXJ0KE1hdGgucG93KHggLSB0aGlzLnBvc2l0aW9uUG9pbnQueCwgMikgKyBNYXRoLnBvdyh5IC0gdGhpcy5wb3NpdGlvblBvaW50LnksIDIpKTtcclxuICB9XHJcbn1cclxuIl19