このtraingleを作るために私ができることは、入力に応じて角度を変更しました

私はポップアップウィンドウを持っており、そのウィンドウにスライダーがあります。スライダ内の有効な値は0度から90度の間です。私は0〜90度が入力として与えられるところの入力ボックスも持っています。それは罰金を反映しており、程度の値に基づいて、私は今90度であるtraingleの角度を変えなければなりません。キャンバスを使用してトレイリングを描いています。角度のある素材のポップアップとスライダを使用しています。スライダの値は0から90までですこのtraingleを作るために私ができることは、入力に応じて角度を変更しました

私のコードスニペットはHTMLとスクリプトです。

import { 
 
    Component, 
 
Input, 
 
ViewChild, 
 
ElementRef, 
 
    OnInit, 
 
    ViewEncapsulation, 
 
    Inject, 
 
    AfterViewInit 
 
} from "@angular/core"; 
 
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material"; 
 

 
@Component({ 
 
    selector: "app-panel-tilt", 
 
    templateUrl: "./panel-tilt.component.html", 
 
    styleUrls: ["./panel-tilt.component.scss"], 
 
    encapsulation: ViewEncapsulation.None, 
 
    preserveWhitespaces: false 
 
}) 
 
export class PanelTiltComponent implements OnInit { 
 
    @ViewChild("sliderCanvas") sliderCanvas: ElementRef; 
 
    autoTicks = true; 
 
    // disabled = false; 
 
    // invert = false; 
 
    max = 90; 
 
    min = 0; 
 
    showTicks = true; 
 
    // step = 1; 
 
    thumbLabel = true; 
 
    sliderValue= 0; 
 
    // vertical = false; 
 

 
    get tickInterval(): number | "auto" { 
 
    return this.showTicks ? (this.autoTicks ? "auto" : this._tickInterval) : 0; 
 
    } 
 
    set tickInterval(v) { 
 
    this._tickInterval = Number(v); 
 
    } 
 
    private _tickInterval = 1; 
 
    constructor(
 
    public dialogRef: MatDialogRef<PanelTiltComponent>, 
 
    @Inject(MAT_DIALOG_DATA) public data: any 
 
) { 
 
    console.log(this.sliderValue); 
 

 
    } 
 
    onNoClick(): void { 
 
    this.dialogRef.close(); 
 
    } 
 

 
    ngOnInit() { 
 

 
    console.log(this.sliderValue); 
 
    } 
 

 
    ngAfterViewInit() { 
 
    console.log(this.sliderValue); 
 
         let context: CanvasRenderingContext2D = this.sliderCanvas.nativeElement.getContext("2d"); 
 
         // happy drawing from here on 
 
         context.beginPath(); 
 
         context.moveTo(10, 180); 
 
         context.lineTo(275, 180); 
 
         context.lineTo(10, 25); 
 
         context.fill(); 
 
         // angle in radians 
 
       //  var angleRadians = Math.atan2(p2.y - p1.y, p2.x - p1.x); 
 

 
         // angle in degrees 
 
      //   var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180/Math.PI; 
 

 
        } 
 
}

<mat-card> 
 
    <mat-card-content> 
 
    <h2 class="example-h2">Slider configuration</h2> 
 
<canvas #sliderCanvas class='slider-canvas' width=600 height=200 ></canvas> 
 
    <section class="example-section"> 
 
     <mat-form-field class="example-margin"> 
 
     <input matInput type="number" placeholder="Value" [(ngModel)]="sliderValue" max="90"> 
 
     </mat-form-field> 
 
     <mat-form-field class="example-margin"> 
 
     <input matInput type="number" placeholder="Min value" [(ngModel)]="min"> 
 
     </mat-form-field> 
 
     <mat-form-field class="example-margin"> 
 
     <input matInput type="number" placeholder="Max value" [(ngModel)]="max"> 
 
     </mat-form-field> 
 
    </section> 
 
    </mat-card-content> 
 
</mat-card> 
 
<mat-card class="result"> 
 
    <mat-card-content> 
 
    <DIV>SLIDER VALUE IS{{sliderValue}}</DIV> 
 
    <h2 class="example-h2">Result</h2> 
 
    <mat-slider class="example-margin" [max]="max" [min]="min" [step]="step" [thumb-label]="thumbLabel" 
 
     [tick-interval]="tickInterval" [(ngModel)]="sliderValue" > 
 
    </mat-slider> 
 
    </mat-card-content> 
 
</mat-card> 
 
<div mat-dialog-actions> 
 
    <button mat-button [mat-dialog-close]="data" tabindex="2">Ok</button> 
 
    <button mat-button (click)="onNoClick()" tabindex="-1">No Thanks</button> 
 
</div>