angular Konva.Text 粗体

在Angular中使用Konva库创建粗体文本，你可以通过Konva.Text类的`fontStyle`属性来改变文本样式。尽管Konva本身并不直接提供`bold`（粗体）选项，但你可以模拟这个效果，因为大多数的字体都有粗体版本，通常通过调整字体系列（font family）来实现。例如，如果你想要一个粗体效果，你可以这样做：

import { Component } from '@angular/core';
import * as Konva from 'konva';

@Component({
  selector: 'app-konva-text',
  template: `
    <div [style]="containerStyle">
      <konva-text
        [width]="'auto'"
        [height]="'auto'"
        [text]="'Hello, bold world!'"
        [x]="'0'"
        [y]="'0'"
        [fontFamily]="'Arial Black', Arial, sans-serif'"
        [fontSize]="'36px'"
        (click)="handleClick()">
      </konva-text>
    </div>
  `,
})
export class KonvaTextComponent {
  private konvaStage: any;

  constructor() {}

  ngOnInit(): void {
    this.konvaStage = new Konva.Stage({
      container: 'container', // 你需要在HTML里添加一个id为'container'的元素
    });

    const textLayer = new Konva.Layer();
    this.konvaStage.add(textLayer);

    const text = new Konva.Text({
      x: 0,
      y: 0,
      font: 'bold 36px Arial Black, Arial, sans-serif', // 使用粗体的字体系列
      fill: 'black',
      pointerEvents: 'all', // 让点击事件生效
    });
    textLayer.add(text);
  }

  handleClick(): void {
    // 这里可以处理点击事件
  }

  get containerStyle(): string {
    return `display: inline-block; position: relative; width: auto; height: auto; overflow: hidden;`;
  }
}

在这个例子中，`font: 'bold 36px Arial Black, Arial, sans-serif'` 表示选择了粗体的Arial Black字体，如果用户的系统上没有这个字体，就会退而求其次使用Arial。