Skip to content

platform / fanxing_new

Go to a project
Commit 633f7a4d by 潘建波
Options

tijioa

1 parent 598ed260
Inline Side-by-side
Showing 6 changed files with 950 additions and 315 deletions
dist.tar.gz
No preview for this file type
dist.zip deleted 100644 → 0
No preview for this file type
public/js/version.json
{"commit":"74fb58bd670e9c36110fc5a6949768f3dc081afa","commitDate":"2021-5-11 19:19","buildDate":"2021-5-15 16:57","version":"2.1.0","info":"测试提交"}
\ No newline at end of file \ No newline at end of file
{"commit":"598ed26024f20cfd49562e83ccb936a54f0607cc","commitDate":"2021-5-15 17:8","buildDate":"2021-5-18 17:25","version":"2.1.0","info":"bg区域绘制提交"}
\ No newline at end of file \ No newline at end of file
src/views/sceneManage/setting/areaconfig/Behavior.vue
...@@ -19,9 +19,9 @@ ...@@ -19,9 +19,9 @@
<div class="modal-right"> <div class="modal-right">
<div class="be-header"> <div class="be-header">
<el-radio-group v-model="checkval" size="mini"> <el-radio-group v-model="checkval" size="mini">
<el-radio-button label="shanghai">行为事件</el-radio-button> <el-radio-button label="event">行为事件</el-radio-button>
<el-radio-button label="北京" name="shangha" disabled>交通事件</el-radio-button> <el-radio-button label="jiaotong" name="shangha" disabled>交通事件</el-radio-button>
<el-radio-button label="广州" name="shnghai" disabled>安防事件</el-radio-button> <el-radio-button label="anfnag" name="shnghai" disabled>安防事件</el-radio-button>
</el-radio-group> </el-radio-group>
</div> </div>
<div class="be-content"> <div class="be-content">
...@@ -107,7 +107,7 @@ export default { ...@@ -107,7 +107,7 @@ export default {
data() { data() {
return { return {
tabPosition: "top", tabPosition: "top",
checkval: "shanghai", checkval: "event",
checktype: [], checktype: [],
groupList: [], groupList: [],
curAlgoType: "xsdsfd", curAlgoType: "xsdsfd",
...@@ -124,6 +124,7 @@ export default { ...@@ -124,6 +124,7 @@ export default {
paramsData: "", paramsData: "",
caturl: "", caturl: "",
drawWidth: 2, drawWidth: 2,
klassarr:[],
moveCount: 1, //绘制移动计数器 moveCount: 1, //绘制移动计数器
doDrawing: false, // 绘制状态 doDrawing: false, // 绘制状态
color: "#E34F51", //画笔颜色 color: "#E34F51", //画笔颜色
...@@ -174,8 +175,9 @@ export default { ...@@ -174,8 +175,9 @@ export default {
if (roiobj === undefined) { if (roiobj === undefined) {
roiobj = {}; roiobj = {};
} }
let ROI = [];
let klassarr = [];
for (key in roiobj) { for (key in roiobj) {
let klassarr = [];
if (roiobj[key].region_count > 0) { if (roiobj[key].region_count > 0) {
var polygon = roiobj[key].polygon; var polygon = roiobj[key].polygon;
if (Object.prototype.toString.call(polygon) === "[object Array]") { if (Object.prototype.toString.call(polygon) === "[object Array]") {
...@@ -183,59 +185,64 @@ export default { ...@@ -183,59 +185,64 @@ export default {
if (ele.polygon_type == "rect") { if (ele.polygon_type == "rect") {
drawType = "rect"; drawType = "rect";
let points = ele.point; let points = ele.point;
this.initRect(points); this.initRect(points);
this.drawing("init");
} else if (ele.polygon_type == "line") { } else if (ele.polygon_type == "line") {
let points = ele.point;
drawType = ele.polygon_type; drawType = ele.polygon_type;
this.intline(points) this.intline(points)
this.drawing("init"); this.drawing("init");
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
} else if (ele.polygon_type == "polygon") { } else if (ele.polygon_type == "polygon") {
drawType = ele.polygon_type; drawType = ele.polygon_type;
let points = ele.point; let points = ele.point;
this.intPolygon(points) this.intPolygon(points)
this.drawing("init"); this.drawing("init");
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
} }
this.drawing("init");
klassarr.push(drawingObject);
}); });
} else { } else {
if (polygon.polygon_type == "rect") { if (polygon.polygon_type == "rect") {
drawType ="rect"; drawType = "rect";
this.initRect(polygon.point); this.initRect(polygon.point);
this.drawing("init");
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
} else if (polygon.polygon_type == "line") { } else if (polygon.polygon_type == "line") {
drawType = polygon.polygon_type; drawType = polygon.polygon_type;
this.intline(polygon.point) this.intline(polygon.point);
this.drawing("init"); this.drawing("init");
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
// //
} else if (polygon.polygon_type == "polygon") { } else if (polygon.polygon_type == "polygon") {
drawType ="polygon"; drawType = "polygon";
let points = polygon.point; let points = polygon.point;
this.intPolygon(points) this.intPolygon(points);
this.drawing("init"); this.drawing("init");
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
} }
this.drawing("init");
klassarr.push(drawingObject);
} }
drawingObject.id = this.uuid();
drawingObject.key = key;
klassarr.push(drawingObject);
roiobj[key].rois = klassarr; roiobj[key].rois = klassarr;
for (let k = 0; k < this.basconfig.length; k++) {
if (this.basconfig[k].config.算法ID === key) {
this.basconfig[k].roi = klassarr;
// this.basconfig[k].config = confobj['root']
break;
}
}
}
}
if (this.basconfig.length > 0) {
if (this.basconfig[0].roi) {
this.basconfig[0].roi.map(ele => {
this.fabricObjInit(ele);
this.setAreaconfig();
});
} }
} }
// if (this.basconfig.length > 0) {
// if (this.basconfig[0].roi) {
// this.basconfig[0].roi.map(ele => {
// this.fabricObjInit(ele);
// this.setAreaconfig();
// });
// }
// }
this.klassarr = klassarr;
}, },
initRect(points) { initRect(points) {
mouseFrom.x = points[0].x * 700; mouseFrom.x = points[0].x * 700;
mouseFrom.y = points[0].y * 500; mouseFrom.y = points[0].y * 500;
...@@ -249,7 +256,9 @@ export default { ...@@ -249,7 +256,9 @@ export default {
mouseTo.y = points[1].y * 500; mouseTo.y = points[1].y * 500;
}, },
clearcanvas(){ clearcanvas(){
this.canvas.clear() this.canvas.clear();
this.setAreaconfig();
this.basconfig[this.cindex].roi = null
}, },
intPolygon(points) { intPolygon(points) {
mouseFrom.x = points[0].x * 700; mouseFrom.x = points[0].x * 700;
...@@ -371,13 +380,12 @@ export default { ...@@ -371,13 +380,12 @@ export default {
this.citem = item; this.citem = item;
this.changetype(item); this.changetype(item);
this.cindex = cindex; this.cindex = cindex;
let rois = item.roi; this.klassarr.map(ele =>{
if (item.roi !== "" && item.roi !== null) { if (ele.key === item.config.算法ID) {
this.groupList = rois; this.fabricObjInit(ele);
for (let i = 0; i < rois.length; i++) {
this.fabricObjInit(rois[i]);
} }
} })
}, },
/** /**
* 修改配置文件 * 修改配置文件
...@@ -396,7 +404,7 @@ export default { ...@@ -396,7 +404,7 @@ export default {
let ROI = { let ROI = {
idname: "" idname: ""
}; };
console.log(this.buildRoI(ele)); console.log("==============",ele);
this.roiBody[idname] = this.buildRoI(ele); this.roiBody[idname] = this.buildRoI(ele);
// confArr.push(this.buildRoI(ele)); // confArr.push(this.buildRoI(ele));
} }
...@@ -422,7 +430,6 @@ export default { ...@@ -422,7 +430,6 @@ export default {
* 构建ROI * 构建ROI
*/ */
buildRoI(klass) { buildRoI(klass) {
debugger
let bg_arr = [], let bg_arr = [],
pol, pol,
idname = klass.config["算法ID"]; idname = klass.config["算法ID"];
...@@ -467,7 +474,7 @@ export default { ...@@ -467,7 +474,7 @@ export default {
let poarr = []; let poarr = [];
po.map((ele, i) => { po.map((ele, i) => {
let obj = { let obj = {
point_seq: i / 2 + 1, point_seq: i + 1,
x: (ele.x / 700).toFixed(6), x: (ele.x / 700).toFixed(6),
y: (ele.y / 500).toFixed(6) y: (ele.y / 500).toFixed(6)
}; };
...@@ -481,7 +488,6 @@ export default { ...@@ -481,7 +488,6 @@ export default {
}; };
bg_arr.push(obj); bg_arr.push(obj);
} }
debugger
if (ele.drawtype == "line") { if (ele.drawtype == "line") {
let lines = ele.aCoords; let lines = ele.aCoords;
let point = [{ let point = [{
...@@ -493,7 +499,7 @@ export default { ...@@ -493,7 +499,7 @@ export default {
point_seq: "2", point_seq: "2",
x: (ele.x2 / 700).toFixed(6), x: (ele.x2 / 700).toFixed(6),
y: (ele.y2 / 500).toFixed(6) y: (ele.y2 / 500).toFixed(6)
},]; }];
let obj = { let obj = {
polygon_seq: k + 1, polygon_seq: k + 1,
polygon_point_count: 2, polygon_point_count: 2,
...@@ -715,7 +721,8 @@ export default { ...@@ -715,7 +721,8 @@ export default {
hasControls: false, hasControls: false,
evented: false, evented: false,
objectCaching: false, objectCaching: false,
stroke: color stroke: color,
drawtype:'line'
} }
); );
break; break;
......
src/views/sceneManage/setting/areaconfig/Behavior的副本.vue
<template> <template>
<div class="modal-body b-box"> <div class="modal-body b-box">
<div class="tool">
<div :class="{'tool-t':true,'toolactive':curtool == 'line'}" @click="changetool('line')">
<img src="./img/line.png" alt />
</div>
<div :class="{'tool-t':true,'toolactive':curtool == 'line'}" @click="changetool('rect')">
<img src="./img/rect.png" alt />
</div>
<div :class="{'tool-t':true,'toolactive':curtool == 'line' }" @click="changetool('polygon')">
<img src="./img/dbx.png" alt />
</div>
</div>
<div class="modal-left"> <div class="modal-left">
<div class="pic" id="pic"> <div class="pic" id="pic">
<canvas id="main" width="700" height="500"></canvas> <canvas id="main" width="700" height="500"></canvas>
...@@ -8,28 +19,23 @@ ...@@ -8,28 +19,23 @@
<div class="modal-right"> <div class="modal-right">
<div class="be-header"> <div class="be-header">
<el-radio-group v-model="checkval" size="mini"> <el-radio-group v-model="checkval" size="mini">
<el-radio-button label="shanghai">行为事件</el-radio-button> <el-radio-button label="event">行为事件</el-radio-button>
<el-radio-button label="北京" name="shangha" disabled <el-radio-button label="jiaotong" name="shangha" disabled>交通事件</el-radio-button>
>交通事件</el-radio-button <el-radio-button label="anfnag" name="shnghai" disabled>安防事件</el-radio-button>
>
<el-radio-button label="广州" name="shnghai" disabled
>安防事件</el-radio-button
>
</el-radio-group> </el-radio-group>
</div> </div>
<div class="be-content"> <div class="be-content">
<div class="typebox"> <div class="typebox">
<div class="checkbox" v-for="(item, index) in basconfig" :key="index"> <div class="checkbox" v-for="(item, index) in basconfig" :key="index">
<div <div :class="{ listbox: true, curlist: cindex == index }" @click="seltype(item, index)">
:class="{ listbox: true, curlist: cindex == index }" <!-- <el-checkbox-group v-model="checktype" class="checkgrop">
@click="seltype(item, index)" <el-checkbox :key="item.name" :label="item.name">
> {{
<el-checkbox-group v-model="checkboxGroup1" class="checkgrop">
<el-checkbox :key="item.name" :label="item.name">{{
"" ""
}}</el-checkbox> }}
</el-checkbox-group> </el-checkbox>
<span class="typetext">{{item.name}}</span> </el-checkbox-group> -->
<span class="typetext">{{ item.name }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -37,12 +43,12 @@ ...@@ -37,12 +43,12 @@
<div class="areabox"> <div class="areabox">
<div class="area-header">检测规则</div> <div class="area-header">检测规则</div>
<div <div
:class="{'area-item':true,'activeare':item.id==curuuid}" :class="{ 'area-item': true, 'activeare1': item.id == curuuid }"
v-for="(item, index) in groupList" v-for="(item, index) in groupList"
:key="index" :key="index"
@click="changeKlass(item)" @click="changeKlass(item)"
> >区域{{ index + 1 }}
区域{{ index + 1 }} <!-- <span class="el-icon-circle-close" @click="deleteShape(item)"></span> -->
</div> </div>
<div class="bottombtn"> <div class="bottombtn">
<!-- <el-button @click="savechange" type="primary" size="mini" style="width:90px">保存</el-button> --> <!-- <el-button @click="savechange" type="primary" size="mini" style="width:90px">保存</el-button> -->
...@@ -51,22 +57,28 @@ ...@@ -51,22 +57,28 @@
type="primary" type="primary"
size="mini" size="mini"
style="width: 90px" style="width: 90px"
>保存</el-button> --> >保存</el-button>-->
</div> </div>
</div> </div>
<div class="setbox"> <div class="setbox">
<div <div v-if="citem.config">
v-for="(val, key, index) in citem.config" <div v-for="(val, key, index) in citem.config" :key="index" class="setboxitem">
:key="index"
class="setboxitem"
>
<span class="configlabel">{{ key }}:</span> <span class="configlabel">{{ key }}:</span>
<span class="" <span class>
><el-input v-model="citem.config[key]"></el-input <el-input v-model="citem.config[key]"></el-input>
></span> </span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="pusbox">
<div class="label">推送地址:</div>
<div>
<el-input v-model="pushurl" placeholder="推送地址" width="100"></el-input>
</div>
<div style="color;#ccc">方向：1进入区域,2出去区域,3双向警告</div>
<div><el-button size="mini" @click="clearcanvas">清空</el-button></div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -75,50 +87,225 @@ ...@@ -75,50 +87,225 @@
import { fabric } from "fabric"; import { fabric } from "fabric";
import { select } from "svg.js"; import { select } from "svg.js";
import { xml } from "./bog.js"; import { xml } from "./bog.js";
var canvas = null; var drawingObject = null; //当前绘制对象
var mouseFrom = {},
mouseTo = {},
drawType = "",
canvasObjectIndex = 0,
textbox = null;
var drawWidth = 2; //笔触宽度
var color = "#E34F51"; //画笔颜色
var moveCount = 1; //绘制移动计数器
var doDrawing = false; // 绘制状态
var cvselect = false;
var curObjcet = null;
var cvunselect = true;
export default { export default {
name: "zoneSetting", name: "zoneSetting",
props: ["bgUrl"], props: ["bgUrl", "configxml"],
data() { data() {
return { return {
tabPosition: "top", tabPosition: "top",
checkval: "shanghai", checkval: "event",
checkboxGroup1: ["人员脱岗"], checktype: [],
groupList: [], groupList: [],
curAlgoType: "xsdsfd", curAlgoType: "xsdsfd",
basconfig: {}, basconfig: [],
curtool: "line",
baselist: {}, baselist: {},
cindex: 0, cindex: 0,
citem: null, citem: { config: null },
curuuid:null, curuuid: null,
roiBody:{}, pushurl: "",
canvasObject: null,
roiBody: {},
basedocument: null, basedocument: null,
paramsData:"", paramsData: "",
caturl: "",
drawWidth: 2,
moveCount: 1, //绘制移动计数器
doDrawing: false, // 绘制状态
color: "#E34F51", //画笔颜色
//polygon 相关参数
polygonMode: false,
pointArray: [],
lineArray: [],
activeShape: false,
activeLine: "",
line: {},
delectKlass: {},
imgFile: {},
imgSrc: "",
polygonpoint:[],
canvas: null,
curklass:null, //活动对象
}; };
}, },
methods: { methods: {
/** /**
* 工具选择
*
*/
changetool(type) {
if (type == "polygon") {
this.drawPolygon();
}
drawType = type;
},
/**
* 初始化区域 * 初始化区域
*/ */
configInit(xml){ configInit(roiXml, confxml) {
debugger;
var picuri = new Date().getTime();
try {
document
.getElementById("VionVideo")
.CapturePicture("D:\\/" + picuri + ".jpg");
setTimeout(() => {
document.getElementById("pic").style.backgroundImage =
"url(D:\\/" + picuri + ".jpg)";
}, 1500);
} catch (error) {}
let roiobj = this.oParse.parseXML(roiXml).roi;
if (roiobj === undefined) {
roiobj = {};
}
for (key in roiobj) {
let klassarr = [];
if (roiobj[key].region_count > 0) {
var polygon = roiobj[key].polygon;
if (Object.prototype.toString.call(polygon) === "[object Array]") {
polygon.map(ele => {
if (ele.polygon_type == "rect") {
drawType = "rect";
let points = ele.point;
this.initRect(points);
klassarr.push(drawingObject);
} else if (ele.polygon_type == "line") {
let points = ele.point;
drawType = ele.polygon_type;
this.intline(points)
this.drawing("init");
klassarr.push(drawingObject);
} else if (ele.polygon_type == "polygon") {
drawType = ele.polygon_type;
let points = ele.point;
this.intPolygon(points)
this.drawing("init");
klassarr.push(drawingObject);
}
});
} else {
if (polygon.polygon_type == "rect") {
drawType ="rect";
this.initRect(polygon.point);
klassarr.push(drawingObject);
} else if (polygon.polygon_type == "line") {
drawType = polygon.polygon_type;
this.intline(polygon.point)
this.drawing("init");
klassarr.push(drawingObject);
//
} else if (polygon.polygon_type == "polygon") {
drawType ="polygon";
let points = polygon.point;
this.intPolygon(points)
this.drawing("init");
klassarr.push(drawingObject);
}
}
roiobj[key].rois = klassarr;
for (let k = 0; k < this.basconfig.length; k++) {
if (this.basconfig[k].config.算法ID === key) {
this.basconfig[k].roi = klassarr;
// this.basconfig[k].config = confobj['root']
break;
}
}
}
}
if (this.basconfig.length > 0) {
if (this.basconfig[0].roi) {
this.basconfig[0].roi.map(ele => {
this.fabricObjInit(ele);
this.setAreaconfig();
});
}
}
},
initRect(points) {
mouseFrom.x = points[0].x * 700;
mouseFrom.y = points[0].y * 500;
mouseTo.x = points[2].x * 700;
mouseTo.y = points[2].y * 500;
},
intline(points){
mouseFrom.x = points[0].x * 700;
mouseFrom.y = points[0].y * 500;
mouseTo.x = points[1].x * 700;
mouseTo.y = points[1].y * 500;
},
clearcanvas(){
this.canvas.clear()
this.setAreaconfig()
this.basconfig[this.cindex].roi = null
},
intPolygon(points) {
mouseFrom.x = points[0].x * 700;
mouseFrom.y = points[0].y * 500;
let pointarr = [];
points.map(ele => {
let obj = {
x:ele.x * 700,
y:ele.y * 500
}
pointarr.push(obj);
})
this.polygonpoint = pointarr
},
/**
* 初始化参数及画布
*/
stageInit(data) {
if (!this.canvas) {
this.Initfab();
}
if (data.xml !== undefined && data.xml.indexOf('undefined')< 0) {
this.basconfig = Object.assign(
this.oParse.parseXML(data.xml),
this.oParse.parseXML(xml)
);
} else {
this.basconfig = this.oParse.parseXML(xml);
}
this.initConfig(this.basconfig);
console.log("config", data);
}, },
getObjects(klass) { getObjects(klass) {
//获取所有的列表对象 //获取所有的列表对象
var group = canvas.getObjects(); var group = this.canvas.getObjects();
}, },
setAreaconfig() { setAreaconfig() {
var group = canvas.getObjects(); var group = this.canvas.getObjects();
this.groupList = group; this.groupList = group;
}, },
//设置活动对象 //设置活动对象
changeKlass(klass) { changeKlass(klass) {
canvas.setActiveObject(klass); console.log(klass)
canvas.requestRenderAll(); this.curklass = klass;
this.canvas.setActiveObject(klass);
this.canvas.requestRenderAll();
}, },
updateGroup() { updateGroup() {
var group = canvas.getObjects(); var group = this.canvas.getObjects();
this.groupList = group; this.groupList = group;
}, },
...@@ -126,23 +313,24 @@ export default { ...@@ -126,23 +313,24 @@ export default {
* tab切换保存之前绘制的数据 * tab切换保存之前绘制的数据
*/ */
changetype(data, index) { changetype(data, index) {
var group = canvas.getObjects(); var group = this.canvas.getObjects();
var confdata = this.basconfig[this.cindex]; var confdata = this.basconfig[this.cindex];
confdata.roi = group; confdata.roi = group;
canvas.clear(); this.canvas.clear();
console.log(this.basconfig); console.log(this.basconfig);
}, },
/** /**
* 回显对象 * 回显对象
*/ */
fabricObjInit(klass) { fabricObjInit(klass) {
canvas.add(klass); this.canvas.add(klass);
}, },
/** /**
* 根据选择模型定位规则 * 根据选择模型定位规则
*/ */
selectklass(klass){ selectklass(klass) {
this.curuuid = klass.id; this.curuuid = klass.id;
this.curklass = klass;
}, },
/** /**
* 解构算法xml * 解构算法xml
...@@ -164,17 +352,20 @@ export default { ...@@ -164,17 +352,20 @@ export default {
buildUserobj(obj, parentkey) { buildUserobj(obj, parentkey) {
let arr = []; let arr = [];
for (let key in obj) { for (let key in obj) {
let buildobj = { if (key !== "结果推送地址") {
pkey: parentkey, let buildobj = {
id: key, pkey: parentkey,
name: key, id: key,
roi: null, name: key,
config: obj[key], roi: null,
}; config: obj[key]
arr.push(buildobj); };
arr.push(buildobj);
} else {
this.pushurl = obj[key];
}
} }
this.basconfig = arr; this.basconfig = arr;
debugger;
this.citem = arr[0]; this.citem = arr[0];
console.log(this.citem); console.log(this.citem);
console.log("baseconfgi", this.basconfig); console.log("baseconfgi", this.basconfig);
...@@ -188,7 +379,7 @@ export default { ...@@ -188,7 +379,7 @@ export default {
this.cindex = cindex; this.cindex = cindex;
let rois = item.roi; let rois = item.roi;
if (item.roi !== "" && item.roi !== null) { if (item.roi !== "" && item.roi !== null) {
this.groupList = rois this.groupList = rois;
for (let i = 0; i < rois.length; i++) { for (let i = 0; i < rois.length; i++) {
this.fabricObjInit(rois[i]); this.fabricObjInit(rois[i]);
} }
...@@ -205,13 +396,13 @@ export default { ...@@ -205,13 +396,13 @@ export default {
//博关算法监测区域 //博关算法监测区域
let confArr = [], let confArr = [],
parentname; parentname;
this.basconfig.map((ele) => { this.basconfig.map(ele => {
if (ele.config["算法ID"]) { if (ele.config["算法ID"]) {
let idname = ele.config["算法ID"]; let idname = ele.config["算法ID"];
let ROI = { let ROI = {
idname: "", idname: ""
}; };
console.log(this.buildRoI(ele)) console.log(this.buildRoI(ele));
this.roiBody[idname] = this.buildRoI(ele); this.roiBody[idname] = this.buildRoI(ele);
// confArr.push(this.buildRoI(ele)); // confArr.push(this.buildRoI(ele));
} }
...@@ -223,202 +414,323 @@ export default { ...@@ -223,202 +414,323 @@ export default {
childconfig[chidkey] = ele.config; childconfig[chidkey] = ele.config;
confArr.push(childconfig); confArr.push(childconfig);
}); });
this.buildParam(parentname,confArr); this.buildParam(parentname, confArr);
this.clear();
return this.oParse.writeXML({ roi: this.roiBody }); return this.oParse.writeXML({ roi: this.roiBody });
}, },
clear(){ clear() {
canvas.clear(); this.basconfig = [];
if (this.canvas !== undefined) {
this.canvas.clear();
}
}, },
/** /**
* 构建ROI * 构建ROI
*/ */
buildRoI(klass){ buildRoI(klass) {
let bg_arr = [],pol; let bg_arr = [],
let idname = klass.config["算法ID"]; pol,
if(klass.roi != null && klass.roi != "" ) { idname = klass.config["算法ID"];
klass.roi.map(ele => { try {
let lines = ele.aCoords; if (klass.roi != null && klass.roi != "") {
let point = [{ klass.roi.map((ele, k) => {
"point_seq":"1", if (ele.drawtype == "rect") {
"x":(lines.tl.x/700).toFixed(6), let lines = ele.aCoords;
"y":(lines.tl.y/500).toFixed(6) let point = [
},{ {
"point_seq":"2", point_seq: "1",
"x":(lines.tr.x/700).toFixed(6), x: (lines.tl.x / 700).toFixed(6),
"y":(lines.tr.y/500).toFixed(6) y: (lines.tl.y / 500).toFixed(6)
},{ },
"point_seq":"3", {
"x":(lines.br.x/700).toFixed(6), point_seq: "2",
"y":(lines.br.y/500).toFixed(6), x: (lines.tr.x / 700).toFixed(6),
},{ y: (lines.tr.y / 500).toFixed(6)
"point_seq":"4", },
"x":(lines.bl.x/700).toFixed(6), {
"y":(lines.bl.y/500).toFixed(6), point_seq: "3",
}] x: (lines.br.x / 700).toFixed(6),
let obj = { y: (lines.br.y / 500).toFixed(6)
"polygon_point_count":4, },
"point":point {
point_seq: "4",
x: (lines.bl.x / 700).toFixed(6),
y: (lines.bl.y / 500).toFixed(6)
}
];
let obj = {
polygon_seq: k + 1,
polygon_point_count: 4,
point: point,
polygon_type: "rect"
};
bg_arr.push(obj);
} }
bg_arr.push(obj) //多边形
}); if (ele.drawtype == "polygon") {
pol = { let po = ele.points;
"region_count": klass.roi.length, let poarr = [];
"polygon":bg_arr po.map((ele, i) => {
} let obj = {
point_seq: i + 1,
} else { x: (ele.x / 700).toFixed(6),
pol = { y: (ele.y / 500).toFixed(6)
"region_count": 0, };
poarr.push(obj);
});
let obj = {
polygon_seq: k + 1,
polygon_point_count: po.length,
point: poarr,
polygon_type: "polygon"
};
bg_arr.push(obj);
}
if (ele.drawtype == "line") {
let lines = ele.aCoords;
let point = [{
point_seq: "1",
x: (ele.x1 / 700).toFixed(6),
y: (ele.y1 / 500).toFixed(6)
},
{
point_seq: "2",
x: (ele.x2 / 700).toFixed(6),
y: (ele.y2 / 500).toFixed(6)
}];
let obj = {
polygon_seq: k + 1,
polygon_point_count: 2,
point: point,
polygon_type: "line"
};
bg_arr.push(obj);
}
});
pol = {
region_count: klass.roi.length,
polygon: bg_arr
};
} else {
pol = {
region_count: 0
};
} }
} console.log(pol);
return pol; } catch (error) {}
return pol;
}, },
/** /**
* 构建参数树 * 构建参数树
*/ */
buildParam(parentname,confArr) { buildParam(parentname, confArr) {
let paramsconfig = { let paramsconfig = {
root: { root: {
算法功能: {}, 算法功能: {}
}, }
}; };
let pobj = { let pobj = {
"结果推送地址":"http://192.168.9.25:8080/" 结果推送地址: this.pushurl
}; };
confArr.map((ele) => { confArr.map(ele => {
for (key in ele) { for (key in ele) {
pobj[key] = ele[key]; pobj[key] = ele[key];
} }
}); });
paramsconfig.root.算法功能[parentname] = pobj; paramsconfig.root.算法功能[parentname] = pobj;
this.paramsData = this.oParse.writeXML(paramsconfig); this.paramsData = this.oParse.writeXML(paramsconfig);
}, },
}, //生成多边形
created() { generatePolygon() {
this.basconfig = this.oParse.parseXML(xml); var points = new Array();
this.initConfig(this.basconfig); this.pointArray.map((point, index) => {
}, points.push({
mounted() { x: point.left,
this.basedocument = $.parseXML(xml); y: point.top
});
this.canvas.remove(point);
});
this.lineArray.map((line, index) => {
this.canvas.remove(line);
});
this.canvas.remove(this.activeShape).remove(this.activeLine);
var polygon = new fabric.Polygon(points, {
stroke: this.color,
strokeWidth: this.drawWidth,
fill: "rgba(255, 255, 255, 0)",
opacity: 1,
hasBorders: true,
hasControls: false,
drawtype: drawType
});
polygon.drawtype = drawType;
this.canvas.add(polygon);
var vthis = this; this.activeLine = null;
var mouseFrom = {}, this.activeShape = null;
mouseTo = {}, this.polygonMode = false;
drawType = "", this.doDrawing = false;
canvasObjectIndex = 0, this.drawType = null;
textbox = null; this.setAreaconfig();
var drawWidth = 2; //笔触宽度 var group = this.canvas.getObjects();
var color = "#E34F51"; //画笔颜色 var confdata = this.basconfig[this.cindex];
var drawingObject = null; //当前绘制对象 confdata.roi = group;
var moveCount = 1; //绘制移动计数器 },
var doDrawing = false; // 绘制状态 // 绘制多边形开始，绘制多边形和其他图形不一样，需要单独处理
var cvselect = false; drawPolygon() {
var curObjcet = null; drawType = "polygon";
var cvunselect = true; this.polygonMode = true;
var deleteIcon = //这里画的多边形，由顶点与线组成
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E"; this.pointArray = new Array(); // 顶点集合
var img = document.createElement("img"); this.lineArray = new Array(); //线集合
//设置图形显示拖拽点样式 this.canvas.isDrawingMode = false;
},
//delete
deleteShape(klass) {
var points = klass.get("points");
var a = this.canvas.getActiveObject();
this.canvas.remove(a)
this.canvas.requestRenderAll();
this.updateGroup();
},
addPoint(e) {
var random = Math.floor(Math.random() * 10000);
var id = new Date().getTime() + random;
var circle = new fabric.Circle({
radius: 5,
fill: "#ffffff",
stroke: "#333333",
strokeWidth: 0.5,
left: (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
top: (e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
selectable: false,
hasBorders: false,
hasControls: false,
originX: "center",
originY: "center",
id: id,
objectCaching: false
});
if (this.pointArray.length == 0) {
circle.set({
fill: "red"
});
}
var points = [
(e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
(e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
(e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
(e.pointer.y || e.e.layerY) / this.canvas.getZoom()
];
fabric.Object.prototype.controls.deleteControl = new fabric.Control({ this.line = new fabric.Line(points, {
x: 0.5, strokeWidth: 2,
y: -0.5, fill: "#999999",
offsetY: -10, stroke: "#999999",
offsetX: -30, class: "line",
cursorStyle: "pointer", originX: "center",
mouseUpHandler: deleteObject, originY: "center",
render: renderIcon, selectable: false,
cornerSize: 16, hasBorders: false,
}); hasControls: false,
function deleteObject(eventData, transform) { evented: false,
var target = transform.target; objectCaching: false
var canvas = target.canvas; });
cvselect = false; if (this.activeShape) {
canvas.remove(target); var pos = this.canvas.getPointer(e.e);
canvas.requestRenderAll(); var points = this.activeShape.get("points");
} points.push({
x: pos.x,
y: pos.y
});
var polygon = new fabric.Polygon(points, {
stroke: "#333333",
strokeWidth: 1,
fill: "#cccccc",
opacity: 0.3,
function renderIcon(ctx, left, top, styleOverride, fabricObject) { selectable: true,
var size = this.cornerSize; hasBorders: false,
ctx.save(); hasControls: false,
ctx.translate(left, top); evented: false,
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle)); objectCaching: false
ctx.drawImage(img, -size / 2, -size / 2, size, size); });
ctx.restore(); polygon.drawtype = drawType;
} this.canvas.remove(this.activeShape);
img.src = deleteIcon; this.canvas.add(polygon);
window.zoom = window.zoom ? window.zoom : 1; this.activeShape = polygon;
canvas = new fabric.Canvas("main", {}); this.canvas.requestRenderAll();
canvas.on("mouse:down", function (options) {
console.log(options);
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseFrom.x = xy.x;
mouseFrom.y = xy.y;
if (!cvselect) {
doDrawing = true;
} else { } else {
if (!cvunselect) { var polyPoint = [
cvselect = false; {
} x: (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
} y: (e.pointer.y || e.e.layerY) / this.canvas.getZoom()
}); }
canvas.on("mouse:up", function (options) { ];
var xy = transformMouse(options.e.offsetX, options.e.offsetY); var polygon = new fabric.Polygon(polyPoint, {
mouseTo.x = xy.x; stroke: "#333333",
mouseTo.y = xy.y; strokeWidth: 1,
// drawing(); fill: "#cccccc",
drawingObject = null; opacity: 0.3,
moveCount = 1;
doDrawing = false;
});
canvas.on("mouse:move", function (options) {
if (moveCount % 2 && !doDrawing) {
//减少绘制频率
return;
}
moveCount++;
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseTo.x = xy.x;
mouseTo.y = xy.y;
drawType = "rectangle";
drawing();
});
function transformMouse(mouseX, mouseY) { selectable: false,
return { x: mouseX / window.zoom, y: mouseY / window.zoom }; hasBorders: false,
} hasControls: false,
function drawing() { evented: false,
if (drawingObject) { objectCaching: false
canvas.remove(drawingObject); });
this.activeShape = polygon;
this.canvas.add(polygon);
}
console.log("polygon", this.activeShape);
this.activeLine = this.line;
this.pointArray.push(circle);
this.lineArray.push(this.line);
this.canvas.add(this.line);
this.canvas.add(circle);
},
drawing(type) {
var vthis = this;
if (drawingObject && type == "draw") {
this.canvas.remove(drawingObject);
} }
var canvasObject = null;
switch (drawType) { switch (drawType) {
case "arrow": //箭头 case "arrow": //箭头
canvasObject = new fabric.Path( this.canvasObject = new fabric.Path(
drawArrow(mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y, 30, 30), drawArrow(mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y, 30, 30),
{ {
stroke: color, stroke: color,
fill: "rgba(255,255,255,0)", fill: "rgba(255,255,255,0)",
strokeWidth: drawWidth, strokeWidth: drawWidth
} }
); );
break; break;
case "line": //直线 case "line": //直线
canvasObject = new fabric.Line( this.canvasObject = new fabric.Line(
[mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], [mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y],
{ {
strokeWidth: 2,
class: "line",
originX: "center",
originY: "center",
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false,
stroke: color, stroke: color,
strokeWidth: drawWidth, drawtype:'line'
} }
); );
break; break;
case "dottedline": //虚线 case "dottedline": //虚线
canvasObject = new fabric.Line( this.canvasObject = new fabric.Line(
[mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], [mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y],
{ {
strokeDashArray: [3, 1], strokeDashArray: [3, 1],
stroke: color, stroke: color,
strokeWidth: drawWidth, strokeWidth: drawWidth
} }
); );
break; break;
...@@ -430,24 +742,26 @@ export default { ...@@ -430,24 +742,26 @@ export default {
(mouseTo.x - left) * (mouseTo.x - left) + (mouseTo.x - left) * (mouseTo.x - left) +
(mouseTo.y - top) * (mouseTo.y - top) (mouseTo.y - top) * (mouseTo.y - top)
) / 2; ) / 2;
canvasObject = new fabric.Circle({ this.canvasObject = new fabric.Circle({
left: left, left: left,
top: top, top: top,
stroke: color, stroke: color,
fill: "rgba(255, 255, 255, 0)", fill: "rgba(255, 255, 255, 0)",
radius: radius, radius: radius,
strokeWidth: drawWidth, strokeWidth: drawWidth
}); });
break; break;
case "ellipse": //椭圆 case "ellipse": //椭圆
// eslint-disable-next-line no-redeclare
var left = mouseFrom.x, var left = mouseFrom.x,
top = mouseFrom.y; top = mouseFrom.y;
// eslint-disable-next-line no-redeclare
var radius = var radius =
Math.sqrt( Math.sqrt(
(mouseTo.x - left) * (mouseTo.x - left) + (mouseTo.x - left) * (mouseTo.x - left) +
(mouseTo.y - top) * (mouseTo.y - top) (mouseTo.y - top) * (mouseTo.y - top)
) / 2; ) / 2;
canvasObject = new fabric.Ellipse({ this.canvasObject = new fabric.Ellipse({
left: left, left: left,
top: top, top: top,
stroke: color, stroke: color,
...@@ -456,70 +770,47 @@ export default { ...@@ -456,70 +770,47 @@ export default {
originY: "center", originY: "center",
rx: Math.abs(left - mouseTo.x), rx: Math.abs(left - mouseTo.x),
ry: Math.abs(top - mouseTo.y), ry: Math.abs(top - mouseTo.y),
strokeWidth: drawWidth, strokeWidth: drawWidth
}); });
break; break;
case "square": //TODO:正方形（后期完善） case "square": //TODO:正方形（后期完善）
break; break;
case "rectangle": //长方形 case "rect": //长方形
// eslint-disable-next-line no-redeclare
var left = mouseFrom.x, var left = mouseFrom.x,
top = mouseFrom.y; top = mouseFrom.y;
canvasObject = new fabric.Rect({ this.canvasObject = new fabric.Rect({
left: left, left: left,
top: top, top: top,
width: mouseTo.x - left, //矩形的宽度 width: mouseTo.x - left, //矩形的宽度
height: mouseTo.y - top, //矩形的高度 height: mouseTo.y - top, //矩形的高度
fill: "rgba(0,0,0,.3)", //填充的颜色 fill: "rgba(0,0,0,.3)", //填充的颜色
stroke: "orange", // 边框原色 stroke: "orange", // 边框原色
strokeWidth: 1, // 边框大小 strokeWidth: 1 // 边框大小
});
canvasObject.on("selected", function () {
cvselect = true;
cvunselect = true;
curObjcet = canvasObject;
vthis.selectklass(canvasObject);
});
canvasObject.on("deselected", function () {
vthis.setAreaconfig();
var group = canvas.getObjects();
var confdata = vthis.basconfig[vthis.cindex];
confdata.roi = group;
cvunselect = false;
}); });
break; break;
case "rightangle": //直角三角形 case "polygon": //路径绘制
var path = var left = mouseFrom.x,
"M " + top = mouseFrom.y,
mouseFrom.x + path = vthis.path;
" " +
mouseFrom.y + this.canvasObject = new fabric.Polygon(vthis.polygonpoint, {
" L " +
mouseFrom.x + hasControls: false,
" " +
mouseTo.y +
" L " +
mouseTo.x +
" " +
mouseTo.y +
" z";
canvasObject = new fabric.Path(path, {
left: left,
top: top,
stroke: color, stroke: color,
strokeWidth: drawWidth, fill: "rgba(255, 255, 255, 0)"
fill: "rgba(255, 255, 255, 0)",
}); });
break; break;
case "equilateral": //等边三角形 case "equilateral": //等边三角形
var height = mouseTo.y - mouseFrom.y; var height = mouseTo.y - mouseFrom.y;
canvasObject = new fabric.Triangle({ this.canvasObject = new fabric.Triangle({
top: mouseFrom.y, top: mouseFrom.y,
left: mouseFrom.x, left: mouseFrom.x,
width: Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2)), width: Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2)),
height: height, height: height,
stroke: color, stroke: color,
strokeWidth: drawWidth, strokeWidth: drawWidth,
fill: "rgba(255,255,255,0)", fill: "rgba(255,255,255,0)"
}); });
break; break;
case "isosceles": case "isosceles":
...@@ -532,9 +823,9 @@ export default { ...@@ -532,9 +823,9 @@ export default {
fontSize: 18, fontSize: 18,
borderColor: "#2c2c2c", borderColor: "#2c2c2c",
fill: color, fill: color,
hasControls: false, hasControls: false
}); });
canvas.add(textbox); this.canvas.add(textbox);
textbox.enterEditing(); textbox.enterEditing();
textbox.hiddenTextarea.focus(); textbox.hiddenTextarea.focus();
break; break;
...@@ -544,16 +835,153 @@ export default { ...@@ -544,16 +835,153 @@ export default {
break; break;
} }
// canvasObject.index = getCanvasObjectIndex(); // canvasObject.index = getCanvasObjectIndex();
if (canvasObject) { if (this.canvasObject) {
canvasObject.id = vthis.uuid(); this.canvasObject.on("selected", function() {
console.log(canvasObject); cvselect = true;
cvunselect = true;
curObjcet = vthis.canvasObject;
vthis.selectklass(vthis.canvasObject);
});
this.canvasObject.on("deselected", function() {
vthis.setAreaconfig();
var group = vthis.canvas.getObjects();
var confdata = vthis.basconfig[vthis.cindex];
confdata.roi = group;
cvunselect = false;
});
this.canvasObject.id = vthis.uuid();
this.canvasObject.drawtype = drawType;
// console.log(canvasObject);
// canvasObject.index = getCanvasObjectIndex(); // canvasObject.index = getCanvasObjectIndex();
canvas.add(canvasObject); //.setActiveObject(canvasObject) if (type !== "init") {
drawingObject = canvasObject; vthis.canvas.add(this.canvasObject); //.setActiveObject(canvasObject)
}
drawingObject = this.canvasObject;
vthis.updateGroup(); vthis.updateGroup();
} }
},
Initfab() {
var vthis = this;
var deleteIcon =
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
var img = document.createElement("img");
//设置图形显示拖拽点样式
// if (drawType !== "polygon") {
// fabric.Object.prototype.controls.deleteControl = new fabric.Control({
// x: 0.5,
// y: -0.5,
// offsetY: -10,
// offsetX: -30,
// cursorStyle: "pointer",
// mouseUpHandler: deleteObject,
// render: renderIcon,
// cornerSize: 16
// });
// }
function deleteObject(eventData, transform) {
var target = transform.target;
var canvas = target.canvas;
cvselect = false;
canvas.remove(target);
canvas.requestRenderAll();
}
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
if (drawType == "polygon") {
return;
}
var size = this.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, -size / 2, -size / 2, size, size);
ctx.restore();
}
img.src = deleteIcon;
window.zoom = window.zoom ? window.zoom : 1;
this.canvas = new fabric.Canvas("main", {});
this.canvas.selectionColor = "rgba(0,0,0,0)";
this.canvas.on("mouse:down", function(options) {
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseFrom.x = xy.x;
mouseFrom.y = xy.y;
// drawing();
if (drawType == "polygon") {
let e = options;
this.skipTargetFind = false;
try {
// 此段为判断是否闭合多边形，点击红点时闭合多边形
if (vthis.pointArray.length > 1) {
// e.target.id == this.pointArray[0].id 表示点击了初始红点
console.log(e.target);
if (e.target && e.target.id == vthis.pointArray[0].id) {
vthis.generatePolygon();
}
}
//未点击红点则继续作画
if (vthis.polygonMode) {
vthis.addPoint(e);
}
} catch (error) {
console.log(error);
}
}
if (!cvselect) {
doDrawing = true;
} else {
if (!cvunselect) {
cvselect = false;
}
}
});
this.canvas.on("mouse:up", function(options) {
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseTo.x = xy.x;
mouseTo.y = xy.y;
drawingObject = null;
moveCount = 1;
doDrawing = false;
});
this.canvas.on("mouse:move", function(options) {
if (drawType == "polygon") {
if (vthis.activeLine && vthis.activeLine.class == "line") {
var pointer = vthis.canvas.getPointer(options.e);
vthis.activeLine.set({ x2: pointer.x, y2: pointer.y });
var points = vthis.activeShape.get("points");
points[vthis.pointArray.length] = {
x: pointer.x,
y: pointer.y,
zIndex: 1
};
vthis.activeShape.set({
points: points
});
vthis.canvas.renderAll();
}
vthis.canvas.renderAll();
return false;
}
if (moveCount % 2 && !doDrawing) {
//减少绘制频率
return;
}
moveCount++;
var xy = transformMouse(options.e.offsetX, options.e.offsetY);
mouseTo.x = xy.x;
mouseTo.y = xy.y;
vthis.drawing("draw");
});
function transformMouse(mouseX, mouseY) {
return { x: mouseX / window.zoom, y: mouseY / window.zoom };
}
} }
}, },
created() {},
mounted() {
this.basedocument = $.parseXML(xml);
}
}; };
</script> </script>
...@@ -604,8 +1032,7 @@ button { ...@@ -604,8 +1032,7 @@ button {
top: 0; top: 0;
left: 0; left: 0;
border: 1px solid #ccc; border: 1px solid #ccc;
background: url("../../../../assets/img/home/bk.png")no-repeat; background-size: 100% 100%;
background-size:100% 100%;
} }
.pic img { .pic img {
...@@ -627,6 +1054,7 @@ button { ...@@ -627,6 +1054,7 @@ button {
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
text-align: center;
} }
.configbox { .configbox {
height: 230px; height: 230px;
...@@ -648,11 +1076,12 @@ button { ...@@ -648,11 +1076,12 @@ button {
border-radius: 3px; border-radius: 3px;
} }
.listbox { .listbox {
width: 93px; width: 78px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
margin: 0 10px 10px 0;
height: 35px; height: 35px;
margin: 0 0 0 5px;
border-radius: 5px; border-radius: 5px;
text-align: center;
} }
.checkgrop { .checkgrop {
width: 20px; width: 20px;
...@@ -661,6 +1090,9 @@ button { ...@@ -661,6 +1090,9 @@ button {
} }
.typetext { .typetext {
margin: 8px 0 0 0; margin: 8px 0 0 0;
text-align: center;
width: 100%;
cursor: pointer;
} }
.curlist { .curlist {
border: 1px solid #2d8cf0; border: 1px solid #2d8cf0;
...@@ -684,12 +1116,34 @@ button { ...@@ -684,12 +1116,34 @@ button {
flex-direction: row; flex-direction: row;
margin: 10px 5px 0 0; margin: 10px 5px 0 0;
} }
.area-item{ .area-item {
text-align: center; text-align: center;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
} }
.activeare{ .activeare {
text-align: center; text-align: center;
color: #2d8cf0; color: #2d8cf0;
} }
.tool {
padding: 5px;
height: 120px;
border: 1px solid #ccc;
margin-right: 5px;
}
.tool-t {
margin-bottom: 10px;
height: 20px;
width: 20px;
cursor: pointer;
}
.tool-t img {
height: 100%;
width: 100%;
}
.tool-t:nth-child(2) img {
width: 80%;
height: 80%;
}
</style> </style>
src/views/sceneManage/setting/areaconfig/draw.js
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
* shape --绘制的图形 * shape --绘制的图形
* type -- 绘制类型 * type -- 绘制类型
*/ */
import { fabric } from "fabric" import { fabric } from "fabric"
class draw { class draw {
constructor(el, type) { constructor(el, type) {
...@@ -21,6 +20,8 @@ class draw { ...@@ -21,6 +20,8 @@ class draw {
this.deleteIcon = this.deleteIcon =
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E"; "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
this.img = document.createElement("img"); this.img = document.createElement("img");
//多边形区域存储
this.pointArray = [];
} }
/** /**
* 初始化 * 初始化
...@@ -51,6 +52,13 @@ class draw { ...@@ -51,6 +52,13 @@ class draw {
mouseFrom.x = xy.x; mouseFrom.x = xy.x;
mouseFrom.y = xy.y; mouseFrom.y = xy.y;
doDrawing = true; doDrawing = true;
if (this.type === "polygon"){
if (this.pointArray.length > 1) {
if (e.target && e.target.id == this.pointArray[0].id) {
this.generatePolygon();
}
}
}
fabdrawing(e); fabdrawing(e);
} }
/** /**
...@@ -84,6 +92,12 @@ class draw { ...@@ -84,6 +92,12 @@ class draw {
case "rectangle": case "rectangle":
canvasObject = this.drawReacangle(e); canvasObject = this.drawReacangle(e);
break; break;
case "line":
canvasObject = this.drawReacangle(e);
break;
case "polygon":
canvasObject = this.drawPolygon(e);
break;
default: default:
break; break;
} }
...@@ -125,7 +139,7 @@ class draw { ...@@ -125,7 +139,7 @@ class draw {
" L " + (x2 - centerx - w1 * 2) + " " + (y2 - centery + h1 * 2); " L " + (x2 - centerx - w1 * 2) + " " + (y2 - centery + h1 * 2);
path += " L " + (x2 - centerx - w1) + " " + (y2 - centery + h1); path += " L " + (x2 - centerx - w1) + " " + (y2 - centery + h1);
path += " Z"; path += " Z";
return new fabric.Path(path, { return new fabric.Path(path, {
stroke: this.color, stroke: this.color,
fill: this.color, fill: this.color,
strokeWidth: this.drawWidth strokeWidth: this.drawWidth
...@@ -134,7 +148,7 @@ class draw { ...@@ -134,7 +148,7 @@ class draw {
/** /**
*绘制方形 *绘制方形
*/ */
drawReacangle(e){ drawReacangle(e) {
let { mouseFrom, mouseTo } = this; let { mouseFrom, mouseTo } = this;
return new fabric.Rect({ return new fabric.Rect({
left: left, left: left,
...@@ -146,4 +160,164 @@ class draw { ...@@ -146,4 +160,164 @@ class draw {
strokeWidth: 1 // 边框大小 strokeWidth: 1 // 边框大小
}); });
} }
/**
* 绘制线段
*/
drawLine(e) {
let { mouseFrom, mouseTo } = this;
return new fabric.Line([mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y],
{
strokeWidth: 2,
class: "line",
originX: "center",
originY: "center",
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false,
stroke: color,
type: "line"
}
);
}
/**
* @param {*} e
* 绘制多边形初始化
*/
drawPolygon(e) {
this.pointArray = new Array(); // 顶点集合
this.lineArray = new Array(); //线集合
this.canvas.isDrawingMode = false;
}
/**
* 生成多边形
*/
generatePolygon() {
var points = new Array();
this.pointArray.map((point, index) => {
points.push({
x: point.left,
y: point.top
});
this.fab.remove(point);
});
this.lineArray.map((line, index) => {
this.fab.remove(line);
});
this.fab.remove(this.activeShape).remove(this.activeLine);
var polygon = new fabric.Polygon(points, {
stroke: this.color,
strokeWidth: this.drawWidth,
fill: "rgba(255, 255, 255, 0)",
opacity: 1,
hasBorders: true,
hasControls: false,
type: "polygon"
});
this.fab.add(polygon);
this.activeLine = null;
this.activeShape = null;
this.polygonMode = false;
this.doDrawing = false;
this.type = null;
var group = this.fab.getObjects();
var confdata = this.basconfig[this.cindex];
confdata.roi = group;
}
addPoint(e) {
var random = Math.floor(Math.random() * 10000);
var id = new Date().getTime() + random;
var circle = new fabric.Circle({
radius: 5,
fill: "#ffffff",
stroke: "#333333",
strokeWidth: 0.5,
left: (e.pointer.x || e.e.layerX) / this.fab.getZoom(),
top: (e.pointer.y || e.e.layerY) / this.fab.getZoom(),
selectable: false,
hasBorders: false,
hasControls: false,
originX: "center",
originY: "center",
id: id,
objectCaching: false
});
if (this.pointArray.length == 0) {
circle.set({
fill: "red"
});
}
var points = [
(e.pointer.x || e.e.layerX) / this.fab.getZoom(),
(e.pointer.y || e.e.layerY) / this.fab.getZoom(),
(e.pointer.x || e.e.layerX) / this.fab.getZoom(),
(e.pointer.y || e.e.layerY) / this.fab.getZoom()
];
this.line = new fabric.Line(points, {
strokeWidth: 2,
fill: "#999999",
stroke: "#999999",
class: "line",
originX: "center",
originY: "center",
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false
});
if (this.activeShape) {
var pos = this.fab.getPointer(e.e);
var points = this.activeShape.get("points");
points.push({
x: pos.x,
y: pos.y
});
var polygon = new fabric.Polygon(points, {
stroke: "#333333",
strokeWidth: 1,
fill: "#cccccc",
opacity: 0.3,
selectable: true,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false
});
polygon.drawtype = drawType;
this.fab.remove(this.activeShape);
this.fab.add(polygon);
this.activeShape = polygon;
this.fab.requestRenderAll();
} else {
var polyPoint = [
{
x: (e.pointer.x || e.e.layerX),
y: (e.pointer.y || e.e.layerY)
}
];
var polygon = new fabric.Polygon(polyPoint, {
stroke: "#333333",
strokeWidth: 1,
fill: "#cccccc",
opacity: 0.3,
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
objectCaching: false
});
this.activeShape = polygon;
this.fab.add(polygon);
}
console.log("polygon", this.activeShape);
this.activeLine = this.line;
this.pointArray.push(circle);
this.lineArray.push(this.line);
this.fab.add(this.line);
this.fab.add(circle);
}
} }
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!