如何在Angular中使用PixiJS绘制穿过矩形的虚线？

嘿，我来帮你搞定在Angular中用PixiJS绘制穿过矩形的虚线这个需求～ 确实PIXI.Graphics本身没有内置的虚线绘制方法，但我们可以通过自定义逻辑或者利用新版本Pixi的特性来实现，下面是完整的解决方案：

1. 准备工作（依赖与容器） #

首先确保你已经安装了PixiJS：

npm install pixi.js

然后在app.component.html中添加一个用于承载Pixi渲染器的容器（避免直接操作body，更符合Angular组件化规范）：

<div #pixiContainer style="width: 600px; height: 400px;"></div>

2. 组件代码实现 #

在app.component.ts中，我们会完成初始化Pixi环境、绘制实心描边矩形、添加穿过矩形的虚线这几个核心步骤，提供两种实现方式供你选择：

方式一：自定义虚线绘制函数（兼容所有Pixi版本） #

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as PIXI from 'pixi.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('pixiContainer') pixiContainer!: ElementRef<HTMLDivElement>;

  ngOnInit(): void {
    // 初始化Pixi渲染器，绑定到组件内的容器
    const renderer = new PIXI.Renderer({
      width: 600,
      height: 400,
      backgroundColor: 0xf0f0f0
    });
    this.pixiContainer.nativeElement.appendChild(renderer.view);

    // 创建舞台
    const stage = new PIXI.Container();

    // 绘制带实心描边的填充矩形
    const rect = new PIXI.Graphics();
    rect.beginFill(0x99ccff);
    rect.lineStyle(2, 0x336699);
    rect.drawRect(150, 100, 300, 200);
    rect.endFill();
    stage.addChild(rect);

    // 绘制穿过矩形的对角线虚线
    const dashedLine = new PIXI.Graphics();
    this.drawDashedLine(dashedLine, 150, 100, 450, 300, [15, 8], 2, 0xff3333);
    stage.addChild(dashedLine);

    // 渲染舞台
    renderer.render(stage);
  }

  /**
   * 自定义虚线绘制工具函数
   * @param graphics PIXI.Graphics实例
   * @param x1 起点X坐标
   * @param y1 起点Y坐标
   * @param x2 终点X坐标
   * @param y2 终点Y坐标
   * @param dashArray 虚线样式数组，比如[10,5]表示10px实线+5px空白
   * @param lineWidth 线宽
   * @param color 线条颜色
   */
  private drawDashedLine(
    graphics: PIXI.Graphics,
    x1: number, y1: number,
    x2: number, y2: number,
    dashArray: number[],
    lineWidth: number,
    color: number
  ): void {
    graphics.lineStyle(lineWidth, color);

    const dx = x2 - x1;
    const dy = y2 - y1;
    const totalLength = Math.sqrt(dx * dx + dy * dy);
    const dashCount = dashArray.length;
    let currentLength = 0;
    let dashIndex = 0;
    let isDrawing = true;
    let currentX = x1;
    let currentY = y1;

    // 按dash数组分段绘制/跳过线段
    while (currentLength < totalLength) {
      const dashLength = dashArray[dashIndex % dashCount];
      const segmentLength = Math.min(dashLength, totalLength - currentLength);
      const ratio = segmentLength / totalLength;

      if (isDrawing) {
        const endX = currentX + dx * ratio;
        const endY = currentY + dy * ratio;
        graphics.moveTo(currentX, currentY);
        graphics.lineTo(endX, endY);
        currentX = endX;
        currentY = endY;
      } else {
        currentX += dx * ratio;
        currentY += dy * ratio;
      }

      currentLength += dashLength;
      dashIndex++;
      isDrawing = !isDrawing;
    }
  }
}

方式二：利用PixiJS v7+内置dash参数（更简洁） #

如果你的PixiJS版本是v7及以上，可以直接通过lineStyle的dash参数实现虚线，无需自定义函数：

// 替换方式一中的虚线绘制部分
const dashedLine = new PIXI.Graphics();
dashedLine.lineStyle({
  width: 2,
  color: 0xff3333,
  dash: [15, 8] // 直接设置虚线的实线段/空白段长度
});
dashedLine.moveTo(150, 100);
dashedLine.lineTo(450, 300);
stage.addChild(dashedLine);

3. 效果调整说明 #

• 你可以修改dashArray（或dash参数）的值来改变虚线样式，比如[20,5]是更长的实线段，[5,5]是更密集的短虚线
• 调整虚线的起点/终点坐标，就能让虚线穿过矩形的任意位置（比如水平中线、垂直中线等）
• 修改矩形的drawRect参数，可以调整矩形的位置和大小

内容的提问来源于stack exchange，提问作者Arun