Я пытаюсь нарисовать круг на холсте в Angular. Я делаю все хорошо и вроде понимаю, как все это работает. IDE не выдает ошибок, но когда я запускаю код, консоль говорит "this.circleApp не определено" . Я, несколько раз, пытаюсь ссылаться на свойства объекта circleApp, где я собираюсь хранить большую часть данных и логики моего приложения (например, вычисляя радианы из градусов и, таким образом, определяя координаты, где должны быть мои фигуры). Я очень плохо знаком с Angular и TypeScript и чувствую, что мне не хватает чего-то очевидного. Если бы кто-то мог сказать мне, что это такое, или просто указать мне правильное направление и дать ссылку на соответствующие документы, я был бы очень благодарен.
иллюстрация того, где я думаю, что проблема
Прямо сейчас я храню просто случайное число как значение свойства "градусы", но позже я хочу подключить его к вводу.
import { ViewChild, Component, OnInit, ElementRef } from "@angular/core";
import { CircleApp } from "./circleApp";
@Component({
selector: "app-make-circle",
templateUrl: "./make-circle.component.html",
styleUrls: ["./make-circle.component.css"]
})
export class MakeCircleComponent implements OnInit {
circleApp: CircleApp = {
degrees: 3,
degreesToRadiansFlipped: function(degree) {
return (-degree * Math.PI) / 180;
},
radian: this.circleApp.degreesToRadiansFlipped(this.circleApp.degrees),
x: Math.cos(this.circleApp.radian * 200 + 500),
y: Math.sin(this.circleApp.radian * 200 + 500)
};
@ViewChild("myCanvas") myCanvas: ElementRef;
public context: CanvasRenderingContext2D;
constructor() {}
ngOnInit() {}
ngAfterViewInit(): void {
this.context = (this.myCanvas
.nativeElement as HTMLCanvasElement).getContext("2d");
this.draw();
}
private draw() {
this.context.beginPath();
this.context.arc(500, 300, 200, 0, Math.PI * 2);
this.context.moveTo(500, 300);
this.context.lineTo(this.circleApp.x, this.circleApp.y);
this.context.stroke();
}
}