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

【问题标题】：What I can do to make this triangle changed the angle according to input我可以做些什么来使这个三角形根据输入改变角度
【发布时间】：2018-05-04 16:32:48
【问题描述】：

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

在我的 html 和脚本的代码 sn-ps 下方。

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>

【问题讨论】：

标签： javascript angular typescript html5-canvas angular-material

【解决方案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。

【讨论】：