日常记录PIXI的使用

实现效果

实现思路，被点击的块背景颜色突出显示，写一个背景颜色不一样的块，通过移动他的位置实现其他块的突出显示

// 创建点击矩形图形并绘制，预览
const rectangle1 = new PIXI.Graphics();
rectangle1.beginFill(0xFF0000, 0);
rectangle1.drawRect(0, 0, 70, 48);
rectangle1.endFill();
rectangle1.position.set(265, 65);// 位置
rectangle1.interactive = true; // 启用交互功能
rectangle1.buttonMode = true; // 将鼠标光标设置为手型
// 将矩形添加到舞台
app.stage.addChild(rectangle1);
const textArray = ["[D1]小区", "[D2]走廊", "[D3]教室", "[D4]智能大楼", "[D5]IPCamera05", "[D6]IPCamera06", "[D7]IPCamera07", "[D8]IPCamera08"];
let isPreviewCreated = false; // 添加一个标志，用于跟踪是否已创建
let D
rectangle1.on('click', () => {
    previewCommunity.visible = true//预览小区主页
    previewSelected.visible = true//预览选中
    playbackSelected.visible = false//回放选中
    configurationSelected.visible = false//配置选中
    maskContainer.visible = true//左侧方块
    maskContainer1.visible = false//左侧方块
    maskContainer2.visible = false//左侧方块
    playback.visible = false//回放界面
    convention.visible = false//常规回放
    even.visible = false//事件回放
    retrieveSelected.visible = false//检索选中
    videoRetrieval.visible = false//视频检索
    maskContainer3.visible = false//左侧方块
    communityMonitoring.visible = false;//回放小区
    //检索五块
    imageRetrieval.visible = false
    videoRetrieval.visible = false
    eventRetrieval.visible = false
    personnelRetrieval.visible = false
    vehicleRetrieval.visible = false
    previewInit();
    if (D) {
        D.visible = false;
    }
});
//预览初始化
const previewInit = () => {
    if (!isPreviewCreated) { // 检查标志
        D = new PIXI.Graphics();
        D.beginFill(0x858AAA); // 设置颜色
        D.drawRect(0, 0, 136, 26);
        D.endFill();
        D.position.set(144, 125);
        D.interactive = true;
        D.buttonMode = true;
        D.alpha = 0.5;
        maskContainer.addChild(D);

        for (let i = 0; i < textArray.length; i++) {
            const text = new PIXI.Text(textArray[i], {
                fontSize: 12,
                fill: 0xFFFFFF // 文本颜色
            });
            text.position.set(
                174,
                125 + i * 26 + (26 - text.height) / 2
            );
            text.interactive = true; // 启用交互模式
            text.buttonMode = true;// 设置 buttonMode 为 true，表示开启按钮模式
            text.cursor = 'pointer';// 设置 cursor 为 'pointer'，表示鼠标悬停在文本上时显示小手光标
            text.id = i + 1//添加标识
            text.on('click', () => {
                D.visible = true
                D.position.set(144, 125 + i * 26);
            })
            maskContainer.addChild(text);
        }
        app.stage.addChild(maskContainer);
        isPreviewCreated = true; // 将标志设置为已创建
    }
}
//预览选中
const previewSelected = new PIXI.Sprite(PIXI.Texture.from("./img/预览/预览选中.png"));
previewSelected.position.set(270, 65);// 位置
previewSelected.scale.set(0.78);//缩放
previewSelected.visible = false
app.stage.addChild(previewSelected);
//预览小区
const previewCommunity = new PIXI.Sprite(PIXI.Texture.from("./img/预览/监控界面.png"));
// 设置背景精灵的位置和缩放
previewCommunity.position.set(280, 115);
previewCommunity.scale.set(0.75);
previewCommunity.visible = false;
//显示精灵
app.stage.addChild(previewCommunity);