@drizm/ng-whiteboard
Version:
A Canvas component for Angular which supports free drawing.
50 lines • 9.14 kB
JavaScript
import { CanvasWhiteboardShape } from './canvas-whiteboard-shape';
import { CanvasWhiteboardPoint } from '../canvas-whiteboard-point.model';
export class StarShape extends CanvasWhiteboardShape {
constructor(positionPoint, options, radius, spikes) {
super(positionPoint, options);
this.radius = radius || 0;
this.spikes = spikes || 5;
}
getShapeName() {
return 'StarShape';
}
draw(context) {
Object.assign(context, this.options);
let rotation = Math.PI / 2 * 3;
let spikeX = this.positionPoint.x;
let spikeY = this.positionPoint.y;
const step = Math.PI / this.spikes;
context.beginPath();
context.moveTo(this.positionPoint.x, this.positionPoint.y - this.radius);
for (let i = 0; i < this.spikes; i++) {
spikeX = this.positionPoint.x + Math.cos(rotation) * this.radius;
spikeY = this.positionPoint.y + Math.sin(rotation) * this.radius;
context.lineTo(spikeX, spikeY);
rotation += step;
spikeX = this.positionPoint.x + Math.cos(rotation) * (this.radius * 0.4);
spikeY = this.positionPoint.y + Math.sin(rotation) * (this.radius * 0.4);
context.lineTo(spikeX, spikeY);
rotation += step;
context.stroke();
}
context.lineTo(this.positionPoint.x, this.positionPoint.y - this.radius);
context.closePath();
context.stroke();
if (this.options.shouldFillShape) {
context.fill();
}
}
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Rhci1zaGFwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXdoaXRlYm9hcmQvc3JjL2xpYi9fY2xhc3Nlcy9zaGFwZS9zdGFyLXNoYXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLDJCQUEyQixDQUFDO0FBRWhFLE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLGtDQUFrQyxDQUFDO0FBR3ZFLE1BQU0sT0FBTyxTQUFVLFNBQVEscUJBQXFCO0lBSWxELFlBQVksYUFBcUMsRUFDckMsT0FBc0MsRUFDdEMsTUFBZSxFQUNmLE1BQWU7UUFDekIsS0FBSyxDQUFDLGFBQWEsRUFBRSxPQUFPLENBQUMsQ0FBQztRQUM5QixJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sSUFBSSxDQUFDLENBQUM7UUFDMUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLElBQUksQ0FBQyxDQUFDO0lBQzVCLENBQUM7SUFFRCxZQUFZO1FBQ1YsT0FBTyxXQUFXLENBQUM7SUFDckIsQ0FBQztJQUVELElBQUksQ0FBQyxPQUFpQztRQUNwQyxNQUFNLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFFckMsSUFBSSxRQUFRLEdBQUcsSUFBSSxDQUFDLEVBQUUsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQy9CLElBQUksTUFBTSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDO1FBQ2xDLElBQUksTUFBTSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDO1FBQ2xDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxFQUFFLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUVuQyxPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsT0FBTyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsYUFB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YXMtd2hpdGVib2FyZC1zaGFwZSc7XHJcbmltcG9ydCB7Q2FudmFzV2hpdGVib2FyZFNoYXBlT3B0aW9uc30gZnJvbSAnLi9jYW52YXMtd2hpdGVib2FyZC1zaGFwZS1vcHRpb25zJztcclxuaW1wb3J0IHtDYW52YXNXaGl0ZWJvYXJkUG9pbnR9IGZyb20gJy4uL2NhbnZhcy13aGl0ZWJvYXJkLXBvaW50Lm1vZGVsJztcclxuaW1wb3J0IHtDYW52YXNXaGl0ZWJvYXJkVXBkYXRlfSBmcm9tICcuLi9jYW52YXMtd2hpdGVib2FyZC11cGRhdGUubW9kZWwnO1xyXG5cclxuZXhwb3J0IGNsYXNzIFN0YXJTaGFwZSBleHRlbmRzIENhbnZhc1doaXRlYm9hcmRTaGFwZSB7XHJcbiAgcmFkaXVzOiBudW1iZXI7XHJcbiAgc3Bpa2VzOiBudW1iZXI7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHBvc2l0aW9uUG9pbnQ/OiBDYW52YXNXaGl0ZWJvYXJkUG9pbnQsXHJcbiAgICAgICAgICAgICAgb3B0aW9ucz86IENhbnZhc1doaXRlYm9hcmRTaGFwZU9wdGlvbnMsXHJcbiAgICAgICAgICAgICAgcmFkaXVzPzogbnVtYmVyLFxyXG4gICAgICAgICAgICAgIHNwaWtlcz86IG51bWJlcikge1xyXG4gICAgc3VwZXIocG9zaXRpb25Qb2ludCwgb3B0aW9ucyk7XHJcbiAgICB0aGlzLnJhZGl1cyA9IHJhZGl1cyB8fCAwO1xyXG4gICAgdGhpcy5zcGlrZXMgPSBzcGlrZXMgfHwgNTtcclxuICB9XHJcblxyXG4gIGdldFNoYXBlTmFtZSgpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuICdTdGFyU2hhcGUnO1xyXG4gIH1cclxuXHJcbiAgZHJhdyhjb250ZXh0OiBDYW52YXNSZW5kZXJpbmdDb250ZXh0MkQpOiB2b2lkIHtcclxuICAgIE9iamVjdC5hc3NpZ24oY29udGV4dCwgdGhpcy5vcHRpb25zKTtcclxuXHJcbiAgICBsZXQgcm90YXRpb24gPSBNYXRoLlBJIC8gMiAqIDM7XHJcbiAgICBsZXQgc3Bpa2VYID0gdGhpcy5wb3NpdGlvblBvaW50Lng7XHJcbiAgICBsZXQgc3Bpa2VZID0gdGhpcy5wb3NpdGlvblBvaW50Lnk7XHJcbiAgICBjb25zdCBzdGVwID0gTWF0aC5QSSAvIHRoaXMuc3Bpa2VzO1xyXG5cclxuICAgIGNvbnRleHQuYmVnaW5QYXRoKCk7XHJcbiAgICBjb250ZXh0Lm1vdmVUbyh0aGlzLnBvc2l0aW9uUG9pbnQueCwgdGhpcy5wb3NpdGlvblBvaW50LnkgLSB0aGlzLnJhZGl1cyk7XHJcblxyXG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLnNwaWtlczsgaSsrKSB7XHJcbiAgICAgIHNwaWtlWCA9IHRoaXMucG9zaXRpb25Qb2ludC54ICsgTWF0aC5jb3Mocm90YXRpb24pICogdGhpcy5yYWRpdXM7XHJcbiAgICAgIHNwaWtlWSA9IHRoaXMucG9zaXRpb25Qb2ludC55ICsgTWF0aC5zaW4ocm90YXRpb24pICogdGhpcy5yYWRpdXM7XHJcbiAgICAgIGNvbnRleHQubGluZVRvKHNwaWtlWCwgc3Bpa2VZKTtcclxuICAgICAgcm90YXRpb24gKz0gc3RlcDtcclxuXHJcbiAgICAgIHNwaWtlWCA9IHRoaXMucG9zaXRpb25Qb2ludC54ICsgTWF0aC5jb3Mocm90YXRpb24pICogKHRoaXMucmFkaXVzICogMC40KTtcclxuICAgICAgc3Bpa2VZID0gdGhpcy5wb3NpdGlvblBvaW50LnkgKyBNYXRoLnNpbihyb3RhdGlvbikgKiAodGhpcy5yYWRpdXMgKiAwLjQpO1xyXG4gICAgICBjb250ZXh0LmxpbmVUbyhzcGlrZVgsIHNwaWtlWSk7XHJcbiAgICAgIHJvdGF0aW9uICs9IHN0ZXA7XHJcbiAgICAgIGNvbnRleHQuc3Ryb2tlKCk7XHJcbiAgICB9XHJcblxyXG4gICAgY29udGV4dC5saW5lVG8odGhpcy5wb3NpdGlvblBvaW50LngsIHRoaXMucG9zaXRpb25Qb2ludC55IC0gdGhpcy5yYWRpdXMpO1xyXG4gICAgY29udGV4dC5jbG9zZVBhdGgoKTtcclxuXHJcbiAgICBjb250ZXh0LnN0cm9rZSgpO1xyXG5cclxuICAgIGlmICh0aGlzLm9wdGlvbnMuc2hvdWxkRmlsbFNoYXBlKSB7XHJcbiAgICAgIGNvbnRleHQuZmlsbCgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgZHJhd1ByZXZpZXcoY29udGV4dDogQ2FudmFzUmVuZGVyaW5nQ29udGV4dDJEKTogdm9pZCB7XHJcbiAgICB0aGlzLnBvc2l0aW9uUG9pbnQgPSBuZXcgQ2FudmFzV2hpdGVib2FyZFBvaW50KGNvbnRleHQuY2FudmFzLndpZHRoIC8gMiwgY29udGV4dC5jYW52YXMuaGVpZ2h0IC8gMik7XHJcbiAgICB0aGlzLnJhZGl1cyA9IHRoaXMuY2FsY3VsYXRlUmFkaXVzKGNvbnRleHQuY2FudmFzLndpZHRoIC0gMiwgY29udGV4dC5jYW52YXMuaGVpZ2h0IC8gMik7XHJcbiAgICB0aGlzLmRyYXcoY29udGV4dCk7XHJcbiAgfVxyXG5cclxuICBvblVwZGF0ZVJlY2VpdmVkKHVwZGF0ZTogQ2FudmFzV2hpdGVib2FyZFVwZGF0ZSk6IHZvaWQge1xyXG4gICAgdGhpcy5yYWRpdXMgPSB0aGlzLmNhbGN1bGF0ZVJhZGl1cyh1cGRhdGUueCBhcyBudW1iZXIsIHVwZGF0ZS55IGFzIG51bWJlcik7XHJcbiAgfVxyXG5cclxuICBjYWxjdWxhdGVSYWRpdXMoeDogbnVtYmVyLCB5OiBudW1iZXIpOiBudW1iZXIge1xyXG4gICAgcmV0dXJuIE1hdGguc3FydChNYXRoLnBvdyh4IC0gdGhpcy5wb3NpdGlvblBvaW50LngsIDIpICsgTWF0aC5wb3coeSAtIHRoaXMucG9zaXRpb25Qb2ludC55LCAyKSk7XHJcbiAgfVxyXG59XHJcbiJdfQ==