我可以做什么来使这个三角形根据输入改变角度

Question

我有一个弹出窗口，我在该窗口上有一个滑块。滑块中的有效值介于0度到90度之间。我也有一个输入框，可以输入0-90度作为输入。它反映很好，并且在度数值的基础上，我必须改变现在在90度的三角形的角度。 我正在使用画布绘制三角形，我使用弹出的角度材料和滑块。 滑块值从0到90

低于我的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>

Answer 1

您要更改的号码是lineTo中的275。如果它是190（宽度加上你的10px x偏移量）你会得到90度的斜率，因为三角形的高度是180，如果它是10（你的x偏移）它是0度（垂直线）。

尝试将context.lineTo(275, 180)更改为context.lineTo(10 + (180 * this.sliderValue), 180)。假设sliderValue从0变为1。