@drizm/ng-whiteboard
Version:
A Canvas component for Angular which supports free drawing.
33 lines • 5.68 kB
JavaScript
import { CanvasWhiteboardShape } from './canvas-whiteboard-shape';
import { CanvasWhiteboardPoint } from '../canvas-whiteboard-point.model';
export class CircleShape extends CanvasWhiteboardShape {
constructor(positionPoint, options, radius) {
super(positionPoint, options);
this.radius = radius || 0;
}
getShapeName() {
return 'CircleShape';
}
draw(context) {
context.beginPath();
context.arc(this.positionPoint.x, this.positionPoint.y, this.radius, 0, Math.PI * 2, false);
Object.assign(context, this.options);
context.stroke();
if (this.options.shouldFillShape) {
context.fill();
}
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLXNoYXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctd2hpdGVib2FyZC9zcmMvbGliL19jbGFzc2VzL3NoYXBlL2NpcmNsZS1zaGFwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUVoRSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUd2RSxNQUFNLE9BQU8sV0FBWSxTQUFRLHFCQUFxQjtJQUdwRCxZQUFZLGFBQXFDLEVBQUUsT0FBc0MsRUFBRSxNQUFlO1FBQ3hHLEtBQUssQ0FBQyxhQUFhLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFDOUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLElBQUksQ0FBQyxDQUFDO0lBQzVCLENBQUM7SUFFRCxZQUFZO1FBQ1YsT0FBTyxhQUFhLENBQUM7SUFDdkIsQ0FBQztJQUVELElBQUksQ0FBQyxPQUFpQztRQUNwQyxPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsRUFBRSxHQUFHLENBQUMsRUFBRSxLQUFLLENBQUMsQ0FBQztRQUU1RixNQUFNLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFFckMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ2pCLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxlQUFlLEVBQUU7WUFDaEMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ2hCO1FBRUQsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBaUM7UUFDM0MsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLHFCQUFxQixDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsS0FBSyxHQUFHLENBQUMsRUFBRSxPQUFPLENBQUMsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztRQUNwRyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ3hGLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDckIsQ0FBQztJQUVELGdCQUFnQixDQUFDLE1BQThCO1FBQzdDLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBVyxFQUFFLE1BQU0sQ0FBQyxDQUFXLENBQUMsQ0FBQztJQUM3RSxDQUFDO0lBRUQsZUFBZSxDQUFDLENBQVMsRUFBRSxDQUFTO1FBQ2xDLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ2xHLENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2FudmFzV2hpdGVib2FyZFNoYXBlfSBmcm9tICcuL2NhbnZhcy13aGl0ZWJvYXJkLXNoYXBlJztcclxuaW1wb3J0IHtDYW52YXNXaGl0ZWJvYXJkU2hhcGVPcHRpb25zfSBmcm9tICcuL2NhbnZhcy13aGl0ZWJvYXJkLXNoYXBlLW9wdGlvbnMnO1xyXG5pbXBvcnQge0NhbnZhc1doaXRlYm9hcmRQb2ludH0gZnJvbSAnLi4vY2FudmFzLXdoaXRlYm9hcmQtcG9pbnQubW9kZWwnO1xyXG5pbXBvcnQge0NhbnZhc1doaXRlYm9hcmRVcGRhdGV9IGZyb20gJy4uL2NhbnZhcy13aGl0ZWJvYXJkLXVwZGF0ZS5tb2RlbCc7XHJcblxyXG5leHBvcnQgY2xhc3MgQ2lyY2xlU2hhcGUgZXh0ZW5kcyBDYW52YXNXaGl0ZWJvYXJkU2hhcGUge1xyXG4gIHJhZGl1czogbnVtYmVyO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwb3NpdGlvblBvaW50PzogQ2FudmFzV2hpdGVib2FyZFBvaW50LCBvcHRpb25zPzogQ2FudmFzV2hpdGVib2FyZFNoYXBlT3B0aW9ucywgcmFkaXVzPzogbnVtYmVyKSB7XHJcbiAgICBzdXBlcihwb3NpdGlvblBvaW50LCBvcHRpb25zKTtcclxuICAgIHRoaXMucmFkaXVzID0gcmFkaXVzIHx8IDA7XHJcbiAgfVxyXG5cclxuICBnZXRTaGFwZU5hbWUoKTogc3RyaW5nIHtcclxuICAgIHJldHVybiAnQ2lyY2xlU2hhcGUnO1xyXG4gIH1cclxuXHJcbiAgZHJhdyhjb250ZXh0OiBDYW52YXNSZW5kZXJpbmdDb250ZXh0MkQpOiB2b2lkIHtcclxuICAgIGNvbnRleHQuYmVnaW5QYXRoKCk7XHJcbiAgICBjb250ZXh0LmFyYyh0aGlzLnBvc2l0aW9uUG9pbnQueCwgdGhpcy5wb3NpdGlvblBvaW50LnksIHRoaXMucmFkaXVzLCAwLCBNYXRoLlBJICogMiwgZmFsc2UpO1xyXG5cclxuICAgIE9iamVjdC5hc3NpZ24oY29udGV4dCwgdGhpcy5vcHRpb25zKTtcclxuXHJcbiAgICBjb250ZXh0LnN0cm9rZSgpO1xyXG4gICAgaWYgKHRoaXMub3B0aW9ucy5zaG91bGRGaWxsU2hhcGUpIHtcclxuICAgICAgY29udGV4dC5maWxsKCk7XHJcbiAgICB9XHJcblxyXG4gICAgY29udGV4dC5jbG9zZVBhdGgoKTtcclxuICB9XHJcblxyXG4gIGRyYXdQcmV2aWV3KGNvbnRleHQ6IENhbnZhc1JlbmRlcmluZ0NvbnRleHQyRCk6IHZvaWQge1xyXG4gICAgdGhpcy5wb3NpdGlvblBvaW50ID0gbmV3IENhbnZhc1doaXRlYm9hcmRQb2ludChjb250ZXh0LmNhbnZhcy53aWR0aCAvIDIsIGNvbnRleHQuY2FudmFzLmhlaWdodCAvIDIpO1xyXG4gICAgdGhpcy5yYWRpdXMgPSB0aGlzLmNhbGN1bGF0ZVJhZGl1cyhjb250ZXh0LmNhbnZhcy53aWR0aCAtIDIsIGNvbnRleHQuY2FudmFzLmhlaWdodCAvIDIpO1xyXG4gICAgdGhpcy5kcmF3KGNvbnRleHQpO1xyXG4gIH1cclxuXHJcbiAgb25VcGRhdGVSZWNlaXZlZCh1cGRhdGU6IENhbnZhc1doaXRlYm9hcmRVcGRhdGUpOiB2b2lkIHtcclxuICAgIHRoaXMucmFkaXVzID0gdGhpcy5jYWxjdWxhdGVSYWRpdXModXBkYXRlLnggYXMgbnVtYmVyLCB1cGRhdGUueSBhcyBudW1iZXIpO1xyXG4gIH1cclxuXHJcbiAgY2FsY3VsYXRlUmFkaXVzKHg6IG51bWJlciwgeTogbnVtYmVyKTogbnVtYmVyIHtcclxuICAgIHJldHVybiBNYXRoLnNxcnQoTWF0aC5wb3coeCAtIHRoaXMucG9zaXRpb25Qb2ludC54LCAyKSArIE1hdGgucG93KHkgLSB0aGlzLnBvc2l0aW9uUG9pbnQueSwgMikpO1xyXG4gIH1cclxufVxyXG4iXX0=