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
{"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
src/views/sceneManage/setting/areaconfig/Behavior.vue
......@@ -19,9 +19,9 @@
<div class="modal-right">
<div class="be-header">
<el-radio-group v-model="checkval" size="mini">
<el-radio-button label="shanghai">行为事件</el-radio-button>
<el-radio-button label="北京" name="shangha" disabled>交通事件</el-radio-button>
<el-radio-button label="广州" name="shnghai" disabled>安防事件</el-radio-button>
<el-radio-button label="event">行为事件</el-radio-button>
<el-radio-button label="jiaotong" name="shangha" disabled>交通事件</el-radio-button>
<el-radio-button label="anfnag" name="shnghai" disabled>安防事件</el-radio-button>
</el-radio-group>
</div>
<div class="be-content">
......@@ -107,7 +107,7 @@ export default {
data() {
return {
tabPosition: "top",
checkval: "shanghai",
checkval: "event",
checktype: [],
groupList: [],
curAlgoType: "xsdsfd",
......@@ -124,6 +124,7 @@ export default {
paramsData: "",
caturl: "",
drawWidth: 2,
klassarr:[],
moveCount: 1, //绘制移动计数器
doDrawing: false, // 绘制状态
color: "#E34F51", //画笔颜色
......@@ -174,8 +175,9 @@ export default {
if (roiobj === undefined) {
roiobj = {};
}
let ROI = [];
let klassarr = [];
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]") {
......@@ -183,59 +185,64 @@ export default {
if (ele.polygon_type == "rect") {
drawType = "rect";
let points = ele.point;
this.initRect(points);
this.drawing("init");
} else if (ele.polygon_type == "line") {
let points = ele.point;
drawType = ele.polygon_type;
this.intline(points)
this.drawing("init");
this.intline(points)
this.drawing("init");
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
} else if (ele.polygon_type == "polygon") {
drawType = ele.polygon_type;
let points = ele.point;
this.intPolygon(points)
this.drawing("init");
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
}
this.drawing("init");
klassarr.push(drawingObject);
});
} else {
if (polygon.polygon_type == "rect") {
drawType ="rect";
drawType = "rect";
this.initRect(polygon.point);
this.drawing("init");
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
} else if (polygon.polygon_type == "line") {
drawType = polygon.polygon_type;
this.intline(polygon.point)
this.drawing("init");
drawType = polygon.polygon_type;
this.intline(polygon.point);
this.drawing("init");
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
//
} else if (polygon.polygon_type == "polygon") {
drawType ="polygon";
let points = polygon.point;
this.intPolygon(points)
this.drawing("init");
drawType = "polygon";
let points = polygon.point;
this.intPolygon(points);
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;
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) {
mouseFrom.x = points[0].x * 700;
mouseFrom.y = points[0].y * 500;
......@@ -249,7 +256,9 @@ export default {
mouseTo.y = points[1].y * 500;
},
clearcanvas(){
this.canvas.clear()
this.canvas.clear();
this.setAreaconfig();
this.basconfig[this.cindex].roi = null
},
intPolygon(points) {
mouseFrom.x = points[0].x * 700;
......@@ -371,13 +380,12 @@ export default {
this.citem = item;
this.changetype(item);
this.cindex = cindex;
let rois = item.roi;
if (item.roi !== "" && item.roi !== null) {
this.groupList = rois;
for (let i = 0; i < rois.length; i++) {
this.fabricObjInit(rois[i]);
this.klassarr.map(ele =>{
if (ele.key === item.config.算法ID) {
this.fabricObjInit(ele);
}
}
})
},
/**
* 修改配置文件
......@@ -396,7 +404,7 @@ export default {
let ROI = {
idname: ""
};
console.log(this.buildRoI(ele));
console.log("==============",ele);
this.roiBody[idname] = this.buildRoI(ele);
// confArr.push(this.buildRoI(ele));
}
......@@ -422,7 +430,6 @@ export default {
* 构建ROI
*/
buildRoI(klass) {
debugger
let bg_arr = [],
pol,
idname = klass.config["算法ID"];
......@@ -467,7 +474,7 @@ export default {
let poarr = [];
po.map((ele, i) => {
let obj = {
point_seq: i / 2 + 1,
point_seq: i + 1,
x: (ele.x / 700).toFixed(6),
y: (ele.y / 500).toFixed(6)
};
......@@ -481,7 +488,6 @@ export default {
};
bg_arr.push(obj);
}
debugger
if (ele.drawtype == "line") {
let lines = ele.aCoords;
let point = [{
......@@ -493,7 +499,7 @@ export default {
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,
......@@ -715,7 +721,8 @@ export default {
hasControls: false,
evented: false,
objectCaching: false,
stroke: color
stroke: color,
drawtype:'line'
}
);
break;
......
src/views/sceneManage/setting/areaconfig/draw.js
......@@ -4,7 +4,6 @@
* shape --绘制的图形
* type -- 绘制类型
*/
import { fabric } from "fabric"
class draw {
constructor(el, type) {
......@@ -21,6 +20,8 @@ class draw {
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";
this.img = document.createElement("img");
//多边形区域存储
this.pointArray = [];
}
/**
* 初始化
......@@ -51,6 +52,13 @@ class draw {
mouseFrom.x = xy.x;
mouseFrom.y = xy.y;
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);
}
/**
......@@ -84,6 +92,12 @@ class draw {
case "rectangle":
canvasObject = this.drawReacangle(e);
break;
case "line":
canvasObject = this.drawReacangle(e);
break;
case "polygon":
canvasObject = this.drawPolygon(e);
break;
default:
break;
}
......@@ -125,7 +139,7 @@ class draw {
" L " + (x2 - centerx - w1 * 2) + " " + (y2 - centery + h1 * 2);
path += " L " + (x2 - centerx - w1) + " " + (y2 - centery + h1);
path += " Z";
return new fabric.Path(path, {
return new fabric.Path(path, {
stroke: this.color,
fill: this.color,
strokeWidth: this.drawWidth
......@@ -134,7 +148,7 @@ class draw {
/**
*绘制方形
*/
drawReacangle(e){
drawReacangle(e) {
let { mouseFrom, mouseTo } = this;
return new fabric.Rect({
left: left,
......@@ -146,4 +160,164 @@ class draw {
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
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!