一、设置canvas画板，给画板添加路口背景图
需要引入 "fabricjs": "^1.0.0",
npm i fabricjs
1、html页面：
<canvas id="tutorial2" style="margin-left: 60px;margin-bottom: 20px"></canvas>
2、js 具体实现步骤
import { fabric } from 'fabricjs';//导入fabric
canvas: any; //定义一个canvas
this.canvas = new fabric.Canvas('tutorial2');
this.canvas.setWidth(550);
this.canvas.setHeight(450);
fabric.Object.prototype.transparentCorners = false;
this.canvas.hoverCursor = 'pointer';
3、给画板画具体的路口背景图
let src ="";
if(this.addObject.roadType==0){
src='../../../../../assets/images/roadSz.png'
}else if(this.addObject.roadType==1){
src='../../../../../assets/images/roadTb.png'
}else if(this.addObject.roadType==2){
src='../../../../../assets/images/roadTn.png'
}else if(this.addObject.roadType==3){
src='../../../../../assets/images/roadTx.png'
} else if(this.addObject.roadType==4){
src='../../../../../assets/images/roadTd.png'
}
this.canvas.setBackgroundImage(src, this.canvas.renderAll.bind(this.canvas), {
width: this.canvas.width,
height: this.canvas.height,
originX: 'left',
originY: 'top',
});
4、画灯态图，在路口上画信号灯态（左转，右转，人行灯，此图必须为svg格式，适应文件属性的改变）
let src = '';
if (this.lightObject.lightType == 1) {
// 方向
src = '../../../../../assets/images/light_left.svg';
}
else if (this.lightObject.lightType == 2) {
// 人行横道
src = '../../../../../assets/images/light_people.svg';
}
//如果方向灯不一样，可以如下进行判断添加对应svg
// else if (this.lightObject.lightType == 2) {
// // 直行
// src = '../../../../../assets/images/light_up.svg';
// } else if (this.lightObject.lightType == 3) {
// // 右转
// src = '../../../../../assets/images/light_right.svg';
// }
let that = this;
let id = '';
id = this.lightObject.lightId;
fabric.loadSVGFromURL(src, function(objects, options) {
let image = fabric.util.groupSVGElements(objects, options);
image.ordersort = id;//此id是输入的相位号（灯的标号），后面根据数据来改变等的颜色
image.id = '01';//加id是用来坐标时的
image.scale(1.2);
that.canvas.add(image);
that.canvas.renderAll();
});
3、删除错误的数据，选择错误的数据，删除之后，要删除对应图上的数据，根据ordersort来判断
deleteData(item){
if (this.canvas._objects && this.canvas._objects.length > 0) {
let t = 0;
let index = 0;
for (let i = 0; i < this.canvas._objects.length; i++) {
if (this.canvas._objects[i].ordersort == item.lightId) {
t = i;
}
if (this.data2[i].lightId == item.lightId) {
index = i;
}
}
this.canvas._objects.splice(t, 1);
this.canvas.renderAll();
}
}
4、将画好的图转换成json字符串进行保存
let jsonData = JSON.stringify(this.canvas.toJSON(['id', 'ordersort']));
5、在canvas画板上加载保存的json字符串
this.canvas.loadFromJSON(jsonData, this.canvas2.renderAll.bind(this.canvas));
附画好的样式：
二、根据返回的信号机的实时数据来改变灯态（基于1049通信协议第一第二部分）
接收的数据已经转换成json
contrlSign(result){
if (result.crossID && result.crossID == this.crossNo) {//crossID 为信号机编号
if (result.phaseLampStatusList) {
result.phaseLampStatusList.phaseLampStatus.forEach(item => {
let color = '';
//lampStatus 为灯的状态 基于1049协议
if (item.lampStatus == '11') {
color = '#9b9595';
}
if (item.lampStatus == '21') {
color = 'red';
}
if (item.lampStatus == '22') {
color = 'yellow';
}
if (item.lampStatus == '23') {
color = 'green';
}
if (item.lampStatus == '31') {
color = '#ff4400';
}
if (this.canvas._objects && this.canvas._objects.length > 0) {
this.canvas._objects.forEach(it => {
//phaseNo 为相位号，与之前话的灯的方向的ordersort对应
if (item.phaseNo == it.ordersort) {
it._objects[1].set('fill', color);
}
});
}
});
this.canvas.renderAll();
}
}