Skip to content

platform / fanxing_new

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

tijioa

1 parent 598ed260
Expand all
Inline Side-by-side
Showing 6 changed files with 234 additions and 53 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/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!