0

我在弄清楚如何在 Angular 的滑块内制作不同值的捕捉点时遇到了一些麻烦。滑块：

<mat-slider 
        min="0" max="90" step="1" tickinterval="auto" thumbLabel (input)="positionChanged(component, 'north.dx', $event.value)" (input)="positionChanged(component, 'north.dy', $event.value)"
></mat-slider>

我需要有三个快照点：[33, 45, 90].

文档链接：Angular mat-slider

有没有办法在html中做到这一点？我希望有人能够帮助我。提前致谢！

4

1 回答 1

1

HTML：

    <mat-slider #screen
      thumbLabel
      [displayWith]="formatLabel"
      tickInterval="1000"
      min="1"
      max="100000"></mat-slider>

    <div id="download">
      <img #canvas>
      <a #downloadLink></a>
    </div>

在 component.ts 中：

import { Component } from "@angular/core";

@Component({
  selector: "slider-formatting-example",
  templateUrl: "slider-formatting-example.html",
  styleUrls: ["slider-formatting-example.css"]
})
export class SliderFormattingExample {
  @ViewChild('screen') screen: ElementRef;
  @ViewChild('canvas') canvas: ElementRef;
  @ViewChild('downloadLink') downloadLink: ElementRef;
  formatLabel(value: number) {
    if (value >= 1000) {
      console.log(value); // Your slider value is here
      if (value === 33) {
       html2canvas(this.screen.nativeElement).then(canvas => {
         this.canvas.nativeElement.src = canvas.toDataURL();
         this.downloadLink.nativeElement.href = 
         canvas.toDataURL('image/png');
         this.downloadLink.nativeElement.download = '33.png';
         this.downloadLink.nativeElement.click();
       });

      } else if (value === 45) {
      html2canvas(this.screen.nativeElement).then(canvas => {
         this.canvas.nativeElement.src = canvas.toDataURL();
         this.downloadLink.nativeElement.href = 
         canvas.toDataURL('image/png');
         this.downloadLink.nativeElement.download = '45.png';
         this.downloadLink.nativeElement.click();
       });
      } else if (value === 90) {
       html2canvas(this.screen.nativeElement).then(canvas => {
          this.canvas.nativeElement.src = canvas.toDataURL();
          this.downloadLink.nativeElement.href = 
          canvas.toDataURL('image/png');
          this.downloadLink.nativeElement.download = 'marble-diagram.png';
          this.downloadLink.nativeElement.click();
       });
      }
      return Math.round(value / 1000) + "k";
    }
    return value;
  }
}

请在此处找到有效的 stackblitz 答案。现在，您还需要html2canvas在项目中安装该库，请在html2canvas 此处找到。在其中拍摄快照相当简单。我将在这里与您分享拍摄快照的 stackblitz 示例。您需要做的是以编程方式拍摄快照，如果它具有33,45,90我在相关事件中所做的值if并else if在答案中阻止。

于 2019-12-24T09:06:39.960 回答