实现效果
实现思路,被点击的块背景颜色突出显示,写一个背景颜色不一样的块,通过移动他的位置实现其他块的突出显示
// 创建点击矩形图形并绘制,预览
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);