<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>wcs监控图</title>
|
<link rel="stylesheet" href="wcsmap.css">
|
<script type="text/javascript" src="mapData.json"></script>
|
<script src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script src="pixijs.js"></script>
|
<script src="vue.min.js"></script>
|
<style>
|
.tooltip {
|
position: absolute;
|
display: block;
|
padding: 10px;
|
color: #fff;
|
background-color: #000;
|
border-radius: 5px;
|
left: 200px;
|
top: 200px;
|
}
|
</style>
|
</head>
|
<body>
|
<div id="app">
|
<div id="pixiView">
|
|
</div>
|
<!--输出操作和FPS-->
|
<div style="position: absolute;top: 20px;right: 50px;">
|
<div>FPS:{{mapFps}}</div>
|
</div>
|
<div id="tooltip" class="tooltip">111</div>
|
<p style="position: absolute;top: 20px;right: 100px;" data-tooltip="1232131">666666666</p>
|
</div>
|
</div>
|
</body>
|
</html>
|
|
<script>
|
let objectsContainer;
|
var tooltip = document.getElementById('tooltip');
|
var app = new Vue({
|
el: '#app',
|
data: {
|
mapFps: 0,
|
},
|
created(){
|
console.log(mapData);
|
},
|
})
|
let pixiApp = new PIXI.Application({
|
resizeTo: window,
|
backgroundColor: 0x1f3366
|
})
|
$("#pixiView").append(pixiApp.view)
|
// 加载位图资源
|
PIXI.Loader.shared.add('ChillRoundF','./image_font.xml.fnt').load();
|
function onAssetsLoaded() {
|
createText();
|
}
|
function createText() {
|
// let text = new PIXI.BitmapText('123',{
|
// fontName: 'font',
|
// fontSize: 16,
|
// tint: 0xffffff
|
// })
|
// text.x = 100;
|
// text.y = 100;
|
// pixiApp.stage.addChild(text)
|
}
|
//*******************拖动画布*******************
|
let stageOriginalPos;
|
let mouseDownPoint;
|
let touchBlank = false;
|
let touchOver = false;
|
pixiApp.renderer.plugins.interaction.on(
|
'pointerdown',
|
(event) => {
|
const globalPos = event.data.global;
|
// 记录下stage原来的位置
|
stageOriginalPos = [pixiApp.stage.position._x, pixiApp.stage.position._y];
|
// 记录下mouse down的位置
|
mouseDownPoint = [globalPos.x, globalPos.y];
|
if (!event.target) {
|
// 点到了画布的空白位置
|
touchBlank = true;
|
}
|
}
|
);
|
|
|
pixiApp.renderer.plugins.interaction.on(
|
'pointermove',
|
(event) => {
|
const globalPos = event.data.global;
|
|
if (touchBlank) {
|
// 拖拽画布
|
const dx = globalPos.x - mouseDownPoint[0];
|
const dy = globalPos.y - mouseDownPoint[1];
|
pixiApp.stage.position.set(
|
stageOriginalPos[0] + dx,
|
stageOriginalPos[1] + dy
|
);
|
}
|
}
|
);
|
|
pixiApp.renderer.plugins.interaction.on(
|
'pointerup',
|
(event) => {
|
touchBlank = false;
|
}
|
);
|
// pixiApp.renderer.plugins.interaction.on(
|
// 'mouseover',
|
// (event) => {
|
// const globalPos = event.data.global;
|
// console.log(globalPos);
|
// }
|
// );
|
|
//*******************拖动画布*******************
|
|
//*******************缩放画布*******************
|
pixiApp.view.addEventListener('wheel', (event) => {
|
event.stopPropagation();
|
event.preventDefault();
|
// 因为画布是充满视窗的，所以clientX等于mouse point在renderer上的x坐标
|
const globalPos = [event.clientX, event.clientY];
|
const delta = event.deltaY;
|
const oldZoom = pixiApp.stage.scale.x;
|
let newZoom = oldZoom * 0.999 ** delta;
|
|
// const oldStageMatrix = app.stage.localTransform.clone();
|
// const oldStagePos = oldStageMatrix.applyInverse(pointerGlobalPos);
|
const oldStagePos = globalPos;
|
const dx = oldStagePos[0] * oldZoom - oldStagePos[0] * newZoom;
|
const dy = oldStagePos[1] * oldZoom - oldStagePos[1] * newZoom;
|
|
pixiApp.stage.setTransform(
|
pixiApp.stage.position.x + dx,
|
pixiApp.stage.position.y + dy,
|
newZoom,
|
newZoom,
|
0,
|
0,
|
0,
|
0,
|
0
|
);
|
|
});
|
//*******************缩放画布*******************
|
|
// 创建一个容器来管理大批量的显示对象
|
objectsContainer = new PIXI.Container();
|
pixiApp.stage.addChild(objectsContainer);
|
|
|
//*******************FPS*******************
|
var g_Time=0;
|
pixiApp.ticker.add((delta) => {
|
var timeNow = (new Date()).getTime();
|
var timeDiff = timeNow - g_Time;
|
g_Time = timeNow;
|
var fps = 1000 / timeDiff;
|
this.mapFps = parseInt(fps)
|
});
|
//*******************FPS*******************
|
for (let k of mapData.plant) {
|
let rectangle = new PIXI.Graphics();
|
rectangle.beginFill(k.background);
|
rectangle.originColor = k.background;
|
rectangle.drawRect(0, 0, k.width, k.height);
|
rectangle.x = k.x;
|
rectangle.y = k.y;
|
objectsContainer.addChild(rectangle);
|
}
|
|
for (let k of mapData.conveyor) {
|
let rectangle = new PIXI.Graphics();
|
rectangle.beginFill(k.background);
|
rectangle.originColor = k.background;
|
rectangle.alpha=k.alpha ? k.alpha : 1
|
rectangle.drawRect(0, 0, k.width, k.height);
|
rectangle.x = k.x;
|
rectangle.y = k.y;
|
rectangle.interactive = true
|
rectangle.cursor = "pointer"
|
rectangle.on('mouseover', onMouseOver)
|
function onMouseOver(event) {
|
console.log(event);
|
// 创建内容框
|
let tooltip = new PIXI.Graphics();
|
tooltip.beginFill(0xFFFFFF); // 内容框背景颜色
|
tooltip.lineStyle(1, 0x000000); // 内容框边框样式
|
tooltip.drawRect(0, 0, 100, 40); // 绘制内容框
|
tooltip.x = event.data.global.x; // 根据鼠标位置调整内容框位置
|
tooltip.y = event.data.global.y;
|
pixiApp.stage.addChild(tooltip);
|
|
// 计算内容框的位置，使其在鼠标右下角偏移10像素处
|
tooltip.x = event.currentTarget.x + event.currentTarget.width + 10;
|
tooltip.y = event.currentTarget.y + event.currentTarget.height + 10;
|
// 添加文本到内容框
|
var hel = `站点编号：${k.title}`
|
let text = new PIXI.BitmapText(hel,{
|
fontName: 'ChillRoundF',
|
fontSize: 16,
|
tint: 0xffffff
|
})
|
// text.x = 100;
|
// text.y = 100;
|
// pixiApp.stage.addChild(text)
|
// let text = new PIXI.Text('Hello!', { fontFamily: 'Arial', fontSize: 20, fill: 0x000000 ,resolution: pixiApp.renderer.resolution,antialias: true});
|
text.x = tooltip.x;
|
text.y = tooltip.y;
|
text.resolution = pixiApp.renderer.resolution;
|
pixiApp.stage.addChild(text);
|
|
// 监听鼠标移出事件，移除内容框
|
rectangle.on('mouseout', () => {
|
pixiApp.stage.removeChild(tooltip);
|
pixiApp.stage.removeChild(text);
|
});
|
}
|
objectsContainer.addChild(rectangle);
|
}
|
let shelf1 = mapData.shelf1
|
for (let j in shelf1) {
|
let k = shelf1[j]
|
let y = k.y
|
for (let i = 0; i < k.anfme; i++) {
|
let rectangle = new PIXI.Graphics();
|
rectangle.beginFill(0xffffff);
|
// rectangle.lineStyle(1, 0xffffff);
|
rectangle.drawRect(0, 0, k.unitX-2, k.unitY-2);
|
rectangle.x = k.x + k.unitX * i;
|
rectangle.y = y;
|
objectsContainer.addChild(rectangle);
|
}
|
}
|
|
let shelf2 = mapData.shelf2
|
for (let j in shelf2) {
|
let k = shelf2[j]
|
let y = k.y
|
for (let i = 0; i < k.anfme; i++) {
|
let rectangle = new PIXI.Graphics();
|
rectangle.beginFill(0xffffff);
|
// rectangle.lineStyle(1, 0xffffff);
|
rectangle.drawRect(0, 0, k.unitX-2, k.unitY);
|
rectangle.x = k.x + k.unitX * i;
|
rectangle.y = y;
|
objectsContainer.addChild(rectangle);
|
}
|
}
|
|
|
|
|
|
|
// window.addEventListener('DOMContentLoaded',function() {
|
// var tooltip = document.getElementById('tooltip');
|
|
// document.addEventListener('mouseover',function(event) {
|
// var target = event.target
|
// var tooltipText = target.getAttribute('data-tooltip')
|
|
// if (tooltipText) {
|
// tooltip.innerHTML = tooltipText
|
// tooltip.style.display = 'block'
|
// tooltip.style.left = (event.clientX + 10) + 'px'
|
// tooltip.style.top = (event.clientY + 10) + 'px'
|
// }
|
// })
|
// document.addEventListener('mouseout',function() {
|
// tooltip.style.display = 'none'
|
// })
|
// })
|
|
</script>
|
