Javascript实现的智能消防栓状态监测画面

<template>
<div style="color:white;height:100%;">
<div id="todetail">
<router-link :to="`/admin/stand/commondevice?sid=${$route.query.sid}`">{{this.$t("详情")}}</router-link>
</div>
<div class="detailview">
<div class="detailview_1">
<div>
<box style="position:relative">
<div id="centerTop" style="position:absolute;top:20px;left:20px">
<!-- <div style="font-size:1.5rem">{{this.$t("消防栓检测")}}</div> -->
<div style="font-size:1.5rem">测试</div>
<div>盖子打开<input v-model="animate.cap.angel" /> 盖子角度{{animate.cap.currentAngel}}</div>
<div> 栓柱倾斜<input v-model="animate.bolt.angel" /> 倾斜角度{{animate.bolt.currentAngel}}</div>
<div>
<b-form-checkbox switch size="lg" v-model="animate.water.action">放水</b-form-checkbox>
</div>
</div>
<div id="leftTop" style="width:100%;height:100%"></div>
</box>
</div>
</div>
<div class="detailview_1">
<div>
<box id="canvas_box" style="position:relative">
<div :style="canvasStyle">
<canvas ref="canvas_bolt" style="position:absolute;left:0;bottom:0;"></canvas>
<canvas ref="canvas_cap" style="position:absolute;left:0;bottom:0;"></canvas>
<canvas ref="canvas_water" style="position:absolute;left:0;bottom:0;"></canvas>
<canvas ref="canvas_wall" style="position:absolute;left:0;bottom:0;"></canvas>
</div>
</box>
</div>
</div>
<div class="detailview_1">
<div>
<box>
</box>
</div>
</div>
<div class="detailview_2">
<div>
<box> </box>
</div>
</div>
</div>
<img :src="boltData.pic" id="boltPic" @load="drawBolt(false)" hidden/>
<img :src="capData.pic" id="capPic" @load="drawCap(false)" hidden/>
<img :src="wallData.pic" id="wallPic" @load="drawWall" hidden/>
</div>
</template>
<script>
import box from "@/components/box.vue";
import alarm from "@/components/alarm";
export default {
components: { box, alarm },
data: function() {
return {
/*
动画参数配置
*/
animate: {
/*
盖子动画参数配置
*/
cap: {
thread: null,//保存定时器
angel: 0,//盖子角度
currentAngel: 0,//当前角度
speed: 20 //盖子角度变化的速度
},
bolt: {
thread: null,
angel: 0,
currentAngel: 0,
speed: 20
},
water: {
thread: null,
rate: 0,
speed: 0,
action: false
}
},
/**画布父元素的css */
canvasStyle: {
position: "absolute",
left: 0,
bottom: 0,
width: "100%",
height: "100%"
},
/**画布初始化参数 */
initData: {
/**原图尺寸 */
size: {
width: 340,
height: 380
},
/**渲染尺寸 */
rendSize: {
width: 0,
height: 0
}
},
/**底部墙渲染数据 */
wallData: {
//画片
pic: require("@/assets/img/hr/ic_di.png"),
//canvas上下文
ctx: null,
//原图尺寸
size: {
width: 340,
height: 166
},
//渲染尺寸
rendSize: {
width: 0,
height: 0
},
//起点坐标
startPos: {
x: 0,
y: 0
}
},
//栓柱渲染数据
boltData: {
pic: require("@/assets/img/hr/ic_xfx.png"), //图片
ctx: null,//canvas上下文
offsetX: 45,//X轴偏移量
RBX: 160,//栓柱右下角X轴偏移量
offsetRBX: 160,//栓柱右下角X轴渲染后偏移量
//原图尺寸
size: {
width: 127,
height: 216
},
//渲染尺寸
rendSize: {
width: 0,
height: 0
},
//起点坐标
startPos: {
x: 0,
y: 0
}
},
//盖子渲染数据
capData: {
pic: require("@/assets/img/hr/ic_xfx_gz.png"),//图片
ctx: null,//canvas上下文
offsetX: 172,//x轴偏移量
offsetY: 72,//y軕偏移量
//原图尺寸
size: {
width: 20,
height: 46
},
//渲染尺寸
rendSize: {
width: 0,
height: 0
},
//起点坐标
startPos: {
x: 0,
y: 0
}
},
//水滴渲染数据
waterData: {
ctx: null,//canvas上下文
//渲染尺寸
rendSize: {
width: 0,
height: 0
}
}
};
},
mounted: function() {
this.$nextTick(() => {
//初始化
this.initCanvas();
window.addEventListener("resize", () => {
//浏览器尺寸大小改变后重新渲染
this.initCanvas(true);
});
});
},
watch: {
//监控盖子的角度
"animate.cap.angel": function() {
this.startCapAnimate();
},
//监控栓柱的角度
"animate.bolt.angel": function() {
this.startBoltAnimate();
},
//监控是否放水
"animate.water.action": function() {
//把柱子立正
this.animate.bolt.currentAngel = 0;
this.animate.bolt.angel = 0;
//开盖子
this.animate.cap.currentAngel = 90;
this.animate.cap.angel = 90;
if (this.animate.water.action) {
//放水
this.startWater();
} else {
//停水
window.clearInterval(this.animate.water.thread);
this.waterData.ctx.clearRect(
0,
0,
this.initData.rendSize.width,
this.initData.rendSize.height
);
//关盖子
this.animate.cap.angel = 0;
}
}
},
methods: {
initCanvas(isDraw) {
//调整画布位置及大小
//父元素大小
var parentWidth = document.getElementById("canvas_box").clientWidth;
var parentHeight = document.getElementById("canvas_box").clientHeight;
//画布宽度最大值为父元素宽度
this.initData.rendSize.width =
this.initData.size.width > parentWidth
? parentWidth
: this.initData.size.width;
//根据比率设置画布高度
var rate = this.initData.size.width / this.initData.size.height;
this.initData.rendSize.height = this.initData.size.height / rate;
//画面高度最大值为父元素高度
if (this.initData.rendSize.height > parentHeight) {
this.initData.rendSize.height = parentHeight;
//再次调整宽度
this.initData.rendSize.width = this.initData.rendSize.height * rate;
}
//设置画布大小
this.canvasStyle.width = `${this.initData.rendSize.width}px`;
this.canvasStyle.height = `${this.initData.rendSize.height}`;
if (this.initData.rendSize.width < parentWidth) {
//画布居中
var diff = parentWidth - this.initData.rendSize.width;
this.canvasStyle.left = `${diff / 2}px`;
}
//设置最底部墙的渲染数据
var rateWall = this.wallData.size.width / this.wallData.size.height;
this.wallData.rendSize.width = this.initData.rendSize.width;
this.wallData.rendSize.height = this.initData.rendSize.width / rateWall;
this.wallData.startPos.x = 0;
this.wallData.startPos.y =
this.initData.rendSize.height - this.wallData.rendSize.height;
this.$refs.canvas_wall.width = this.initData.rendSize.width;
this.$refs.canvas_wall.height = this.initData.rendSize.height;
this.wallData.ctx = this.$refs.canvas_wall.getContext("2d");
//设置消防栓的渲染数据
var rateBolt = this.boltData.size.width / this.boltData.size.height;
var rateBoltWidth = this.boltData.size.width / this.initData.size.width;
this.boltData.rendSize.width =
this.initData.rendSize.width * rateBoltWidth;
this.boltData.rendSize.height = this.boltData.rendSize.width / rateBolt;
var rateBoltOffset =
this.initData.size.width / this.initData.rendSize.width;
this.boltData.startPos.x = this.boltData.offsetX / rateBoltOffset;
this.boltData.offsetRBX = this.boltData.RBX / rateBoltOffset;
this.boltData.startPos.y =
this.initData.rendSize.height -
(this.wallData.rendSize.height + this.boltData.rendSize.height);
this.$refs.canvas_bolt.width = this.initData.rendSize.width;
this.$refs.canvas_bolt.height = this.initData.rendSize.height;
this.boltData.ctx = this.$refs.canvas_bolt.getContext("2d");
//设置盖子的渲染数据
var rateCap = this.capData.size.width / this.capData.size.height;
var rateCapWidth = this.capData.size.width / this.initData.size.width;
this.capData.rendSize.width = this.initData.rendSize.width * rateCapWidth;
this.capData.rendSize.height = this.capData.rendSize.width / rateCap;
this.capData.startPos.x = this.capData.offsetX / rateBoltOffset;
this.capData.startPos.y =
this.capData.offsetY /
(this.boltData.size.height / this.boltData.rendSize.height) +
this.boltData.startPos.y;
this.$refs.canvas_cap.width = this.initData.rendSize.width;
this.$refs.canvas_cap.height = this.initData.rendSize.height;
this.capData.ctx = this.$refs.canvas_cap.getContext("2d");
//设置水滴渲染数据
this.$refs.canvas_water.width = this.waterData.rendSize.width = this.initData.rendSize.width;
this.$refs.canvas_water.height = this.waterData.rendSize.height = this.initData.rendSize.height;
this.waterData.ctx = this.$refs.canvas_water.getContext("2d");
//页面加载初始化不能画，因为可能图片还没有加载出来。
//浏览器大小调整时可以画，因为图片已经加载完毕
if (isDraw) {
this.drawWall();
this.drawBolt();
this.drawCap();
}
},
/*
画底部的墙
*/
drawWall() {
this.wallData.ctx.drawImage(
document.getElementById("wallPic"),
this.wallData.startPos.x,
this.wallData.startPos.y,
this.wallData.rendSize.width,
this.wallData.rendSize.height
);
},
/*
盏栓柱
angel:栓柱倾斜角度
*/
drawBolt(angel) {
angel = angel || this.animate.bolt.angel;
this.boltData.ctx.clearRect(
0,
0,
this.initData.rendSize.width,
this.initData.rendSize.height
);
this.boltData.ctx.save();
//以栓柱右下角为旋转基点
this.boltData.ctx.translate(
this.boltData.offsetRBX,
this.initData.rendSize.height - this.wallData.rendSize.height
);
this.boltData.ctx.rotate(angel * Math.PI / 180);
//以栓柱右下角为中心点，原来的起点坐标灰新坐标系中的位置
var cx = -(this.boltData.offsetRBX - this.boltData.startPos.x);
var cy = -this.boltData.rendSize.height;
this.boltData.ctx.drawImage(
document.getElementById("boltPic"),
cx,
cy,
this.boltData.rendSize.width,
this.boltData.rendSize.height
);
this.boltData.ctx.restore();
//第次还要调整一下盖子的位置，让盖子跟栓柱一起倾斜
this.drawCap(null, this.animate.bolt.currentAngel);
},
/*
画盖子
angel:盖子角度
boltAngel:栓柱角度，用于计算盖子的起点位置
*/
drawCap(angel, boltAngel) {
angel = angel || this.animate.cap.angel;
boltAngel = boltAngel || this.animate.bolt.angel;
this.capData.ctx.save();
//清空内容
this.capData.ctx.clearRect(
0,
0,
this.initData.rendSize.width,
this.initData.rendSize.height
);
//把控制点放到栓柱的右下角
this.capData.ctx.translate(
this.boltData.offsetRBX,
this.initData.rendSize.height - this.wallData.rendSize.height
);
//以栓柱右下角为旋转基点，旋转和栓柱一样的角度，这样不管栓柱倾斜到什么角度，盖子也能找到他的起点应该在的位置
this.capData.ctx.rotate(boltAngel * Math.PI / 180);
//旋转完后控制中心点坐标加到原来的位置
this.capData.ctx.translate(
-this.boltData.offsetRBX,
-this.initData.rendSize.height + this.wallData.rendSize.height
);
//再把中心点放点盖子的起点位置
this.capData.ctx.translate(
this.capData.startPos.x,
this.capData.startPos.y
);
//盖子的角度
var rotage = angel * Math.PI / 180 * -1;
this.capData.ctx.rotate(rotage);
this.capData.ctx.drawImage(
document.getElementById("capPic"),
0,
0,
this.capData.rendSize.width,
this.capData.rendSize.height
);
//画完后回到保存前的状态
this.capData.ctx.restore();
},
/*
栓柱倾斜效果
*/
startBoltAnimate() {
if (this.animate.bolt.thread) {
window.clearInterval(this.animate.bolt.thread);
}
this.animate.bolt.thread = window.setInterval(() => {
var exit = false;
//变化currentAngel，直到等于angel
if (this.animate.bolt.angel > this.animate.bolt.currentAngel) {
this.animate.bolt.currentAngel += 1;
if (this.animate.bolt.currentAngel > this.animate.bolt.angel) {
exit = true;
}
} else {
this.animate.bolt.currentAngel -= 1;
if (this.animate.bolt.currentAngel < this.animate.bolt.angel) {
exit = true;
}
}
if (exit) {
this.animate.bolt.currentAngel = this.animate.bolt.angel * 1;
}
//画栓柱，角度为currentAngel。每次角度累加或累减1
this.drawBolt(this.animate.bolt.currentAngel);
if (exit) {
window.clearInterval(this.animate.bolt.thread);
this.animate.bolt.thread = null;
}
}, this.animate.bolt.speed);
},
/*
盖子角度变化效果。
callBack:完成后的回调
*/
startCapAnimate(callBack) {
if (this.animate.cap.thread) {
window.clearInterval(this.animate.cap.thread);
}
this.animate.cap.thread = window.setInterval(() => {
var exit = false;
//变化currentAngel，直到等于angel
if (this.animate.cap.angel > this.animate.cap.currentAngel) {
this.animate.cap.currentAngel += 1;
if (this.animate.cap.currentAngel > this.animate.cap.angel) {
exit = true;
}
} else {
this.animate.cap.currentAngel -= 1;
if (this.animate.cap.currentAngel < this.animate.cap.angel) {
exit = true;
}
}
if (exit) {
this.animate.cap.currentAngel = this.animate.cap.angel * 1;
}
//画盖子，角度为currentAngel。每次角度累加或累减1
this.drawCap(this.animate.cap.currentAngel);
if (exit) {
window.clearInterval(this.animate.cap.thread);
this.animate.cap.thread = null;
if (callBack) {
callBack();
}
}
}, this.animate.cap.speed);
},
/*
开始放水
*/
startWater() {
if (this.animate.water.thread) {
window.clearInterval(this.animate.water.thread);
}
this.animate.water.thread = window.setInterval(() => {
//控制变量累加，最大值为1
this.animate.water.rate += 0.03;
if (this.animate.water.rate >= 1) {
this.animate.water.rate = 0;
}
//画水流
this.drawPullWater(this.animate.water.rate);
});
},
/*
画水流
rate：控制变量
*/
drawPullWater(rate) {
//先清除画布
this.waterData.ctx.clearRect(
0,
0,
this.initData.rendSize.width,
this.initData.rendSize.height
);
//填充水流颜色
this.waterData.ctx.strokeStyle = "rgba(2,180,245,0.8)";
this.waterData.ctx.fillStyle = "rgba(2,180,245,0.8)";
this.waterData.ctx.beginPath();
//一次画4个水滴，水滴从盖口按二次贝塞尔曲线到终点
for (var i = 0; i < 4; i++) {
//起点坐标，盖口，每个水滴往下移一点，免点重叠
var start = {
x: this.capData.startPos.x + this.capData.startPos.x * 0.05,
y: this.capData.startPos.y + this.capData.startPos.y * (i + 1) * 0.15
};
//终点坐标，画面右下角，每个水滴往下移一点，免点重叠
var end = {
x: this.initData.rendSize.width,
y: start.y + start.y * 0.5 + i * (start.y * 0.1)
};
//获取二次贝塞尔曲线控制点
var control = this.getSecControl(start.x, start.y, end.x, end.y);
//水滴的水平角度依次加5度，直线公式：y=5x-5;
var angel = 5 * i - 5;
//获取当前要画的位置
var point = this.getCurpoint(start, end, control, rate);
//画水滴
this.drawCur(
this.waterData.ctx,
60,
angel,
15 + 0.15 * rate * 100,
point.x,
point.y
);
}
this.waterData.ctx.closePath();
this.waterData.ctx.fill();
},
/*
根据贝塞尔公式获取在指定贝塞尔曲线上的点
start:曲线起点
end:曲线终点
c:曲线控制点
t:控制变量，为0时是起点，为1时是终点
*/
getCurpoint(start, end, c, t) {
var x =
(1 - t) * (1 - t) * start.x + 2 * t * (1 - t) * c.x + t * t * end.x;
var y =
(1 - t) * (1 - t) * start.y + 2 * t * (1 - t) * c.y + t * t * end.y;
return {
x: x,
y: y
};
},
/*
获取二次贝塞尔曲线的控制点，X坐票取中点，Y坐标取起点Y坐标稍下。
startx:起点x坐标
starty:起点y坐标
endx：终点x坐标
endy：终点y坐标
*/
getSecControl(startx, starty, endx, endy) {
return {
x: startx + (endx - startx) / 2,
y: starty - endy * 0.1
};
},
/*
画水滴，由二条三次贝塞尔曲线组成
ctx:Canvas Context
angel:夹角大小（水滴大小）
hangel:水平角度(水滴方向)
line:从起点到水滴终点的距离长度(像素)))))，决定了水滴长度
startx:起点x坐标
starty:起点y坐标
*/
drawCur(ctx, angel, hangle, line, startx, starty) {
angel = angel * Math.PI / 180;
hangle = hangle * Math.PI / 180;
var p1 = [];
var p2 = [];
p1[0] = Math.cos(hangle) * line + startx;
p1[1] = Math.sin(hangle) * line + starty;
p2[0] = startx + Math.cos(angel + hangle) * line;
p2[1] = starty + Math.sin(angel + hangle) * line;
ctx.moveTo(startx, starty);
var p = {
p1: p1,
p2: p2
};
var c1 = [(startx + p.p1[0]) / 2, (starty + p.p1[1]) / 2];
var c2 = [(p.p1[0] + p.p2[0]) / 2, (p.p1[1] + p.p2[1]) / 2];
ctx.bezierCurveTo(c1[0], c1[1], p.p1[0], p.p1[1], c2[0], c2[1]);
var c3 = [(p.p2[0] + startx) / 2, (p.p2[1] + starty) / 2];
ctx.bezierCurveTo(p.p2[0], p.p2[1], c3[0], c3[1], startx, starty);
ctx.stroke();
}
}
};
</script>