使用 Angular 指令在模板中绘制对象

Posted 2023-02-22

【中文标题】使用 Angular 指令在模板中绘制对象

【英文标题】：Draw an object in template using Angular directive

【发布时间】：2020-03-09 05:11:05

【问题描述】：

我想使用指令在一系列 div 上方绘制一个三角形

我有四个正方形和两个值：charge 和 normal

charge 用于确定方块的颜色。 normal画三角形

我已经创建了一个指令来实现它

import  Directive, ElementRef, HostListener, Renderer2, Input, OnInit  from '@angular/core';

@Directive(
  selector: '[squareChart]'
)
export class SquareChartDirective implements OnInit 
  colors = 
    1: '#13a09b',
    2: '#13a03c',
    3: '#eceb1d',
    4: '#d40f0f'
  ;
  @Input() charge: number;
  @Input() normal: number;
  constructor(private el: ElementRef, private renderer: Renderer2) 
  ngOnInit() 
    this.highlight(this.charge);
  
  private highlight(charge: number) 
    let colorCode = Math.trunc(charge / 25) + 1;
    for (let i = 1; i <= colorCode; i++) 
      if (this.el.nativeElement.id === `sqr$i`) 
        this.el.nativeElement.style.backgroundColor = this.colors[i];
      
    
  

我的组件

<div class="container">
  <div class="row">
    <div squareChart id="sqr1" [charge]="actualCharge" [normal]="norm" class="p-2 bd-highlight square" >
    </div>
    <div squareChart id="sqr2" [charge]="actualCharge" [normal]="norm" class="p-2 bd-highlight square" >
    </div>
    <div squareChart id="sqr3" [charge]="actualCharge" [normal]="norm" class="p-2 bd-highlight square" >
    </div>
    <div squareChart id="sqr4" [charge]="actualCharge" [normal]="norm" class="p-2 bd-highlight square">
      </div>
  </div>
</div>

例如，norm = 60，向下的三角形应该在第三个正方形上方（如果是 25，那么在第二个正方形上方等等......）

例子

我不知道如何从同一个指令中做到这一点。

另一种解决方案可能是第一行用于三角形，第二行用于正方形，但我认为这不是最佳选择。

这里是demo

【参考方案1】：

您可以使用Canvas 或使用absolute 定位的SVG 元素绘制三角形，所有这些都在您的directive 内。要使绝对定位起作用，父元素需要定位到relative 到视口。

.square 
  position: relative;
  ...

StackBlitz：在SquareChartDirective 类中，您可以根据需要从当前的drawSVGMarker 切换到drawCanvasMarker 方法。

【讨论】：

应该根据正常百分比值绘制每个正方形代表25%（4个正方形）所以三角形应该是动态的

好的，通过检查hansmaad's 的答案进行条件检查，并相应地更改了我的StackBlitz

【参考方案2】：

改用组件。在组件模板中，您可以有条件地隐藏或显示三角形。

（我可能没有理解你的逻辑，但这不是重点，我认为）

@Component(
  selector: 'square-chart',
  template: '<div [ngClass]="hidden: !mark" class="triangle"></div><div [ngStyle]="background:background" class="p-2 bd-highlight square"></div>',
)
export class SquareComponent implements OnInit 
  @Input() i: number;
  @Input() charge: number;
  @Input() normal: number;
  mark = false;
  background;
  colors = 
    1: '#13a09b',
    2: '#13a03c',
    3: '#eceb1d',
    4: '#d40f0f'
  ;

  ngOnInit() 
    this.background = this.colors[this.i];
    this.mark = +this.i === 2;
  

https://stackblitz.com/edit/angular-3kfmgg?file=src/app/app.component.html