ly.fan
/
draw-tools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

Browse Source
master
fanluyan 10 months ago
parent 08c820384a
commit fb4165a34c
3 changed files with 53 additions and 46 deletions
Show Stats Download Patch File Download Diff File

2
src/components/Home.vue
Unescape Escape View File

@ -25,7 +25,7 @@ export default {
width: 100%;
height: 100%;
//padding: 10px;
overflow-y: auto;
overflow-y: scroll;
box-sizing: border-box;
}
}

80
src/views/home/components/drawpic.vue
Unescape Escape View File

@ -120,24 +120,24 @@ export default {
},
created() {
EventBus.$on("currentNodeData", (value) => {
//console.log(value); // 输出 value
////console.log(value); // 输出 value
this.currentNodeData = value;
this.selectIndex = -1;
});
EventBus.$on("perentNode", (value) => {
//console.log(value); // 输出 value
////console.log(value); // 输出 value
this.parentdata = value;
this.selectIndex = -1;
});
EventBus.$on("labelMark", (value) => {
this.selectIndex = -1;
//console.log(value); // 输出 value
////console.log(value); // 输出 value
this.labelMarkArrs = value;
console.log(this.labelMarkArrs);
//console.log(this.labelMarkArrs);
this.clearCanvas();
this.recArrs = [];
for (var i = 0; i < this.labelMarkArrs.length; i++) {
console.log(this.labelMarkArrs[i]);
//console.log(this.labelMarkArrs[i]);
//获取的数据转化一下
this.recArrs.push({
x:
@ -152,20 +152,20 @@ export default {
type: this.labelMarkArrs[i].type,
});
}
console.log("aaaaaaaaaaaaaaaaa");
console.log(this.recArrs);
//console.log("aaaaaaaaaaaaaaaaa");
//console.log(this.recArrs);
this.drawOldRect();
});
},
mounted() {
console.log(window.location.host);
//console.log(window.location.host);
const isProduction = process.env.NODE_ENV === "production";
if (isProduction) {
// 使用服务器IP或域名作为图片地址
this.hostName = window.location.origin;
console.log(this.hostName);
console.log("aaaaaaaaaaaa");
//console.log(this.hostName);
//console.log("aaaaaaaaaaaa");
} else {
// 使用代理的 target 作为图片地址（开发环境）
this.hostName = "http://192.168.1.190:88"; // 这里使用你的本地 target 地址
@ -183,7 +183,7 @@ export default {
getTypes() {
getTypesApi()
.then((res) => {
console.log(res);
//console.log(res);
this.markOptions = res.data;
this.typeMap = res.data;
})
@ -192,16 +192,18 @@ export default {
//获取图片的宽高
onImageLoad() {
this.updateImageSize();
console.log("我家在出来了");
},
updateImageSize() {
const img = this.$refs.imgDiv;
this.imgWidth = img.offsetWidth;
this.imgHeight = img.offsetHeight;
this.imgWidth = img.clientWidth;
this.imgHeight = img.clientHeight;
console.dir(img);
console.log(this.imgWidth, this.imgHeight);
this.clearCanvas();
this.recArrs = [];
for (var i = 0; i < this.labelMarkArrs.length; i++) {
console.log(this.labelMarkArrs[i]);
//console.log(this.labelMarkArrs[i]);
//获取的数据转化一下
this.recArrs.push({
x:
@ -216,8 +218,8 @@ export default {
type: this.labelMarkArrs[i].type,
});
}
console.log("aaaaaaaaaaaaaaaaa");
console.log(this.recArrs);
//console.log("aaaaaaaaaaaaaaaaa");
//console.log(this.recArrs);
this.drawOldRect();
},
// // 拖动图片
@ -262,7 +264,7 @@ export default {
},
// 鼠标移动事件
moveFunction(e) {
// console.log('鼠标移动', e);
// //console.log('鼠标移动', e);
// 需要清除之前的辅助线
this.clearCanvas();
// 画辅助线
@ -380,7 +382,7 @@ export default {
let limitX = left + width;
let limitY = top + height;
if (x < left || x > limitX || y < top || y > limitY) {
console.log("鼠标移出范围， 清除canvas，重新绘制");
//console.log("鼠标移出范围， 清除canvas，重新绘制");
this.clearCanvas();
this.drawOldRect();
}
@ -391,7 +393,7 @@ export default {
let ctx2d = canvasDom.getContext("2d");
const canvasHeight = canvasDom.offsetWidth;
const canvasWidth = canvasDom.offsetWidth;
//console.log(canvasDom);
////console.log(canvasDom);
// 开始一条路径
ctx2d.beginPath();
// 填充色
@ -484,7 +486,7 @@ export default {
var typeColor = colors[this.recArrs[i].type] || "rgb(255, 0, 0)";
var bgcolors =
bgcolors[this.recArrs[i].type] || "rgba(22, 158, 140, 0.2)";
console.log(typeColor);
// //console.log(typeColor);
ctx2d.strokeStyle = typeColor; // 矩形框的线条颜色
ctx2d.fillStyle = bgcolors; // 矩形框的填充颜色（与线条颜色相同）
@ -530,9 +532,9 @@ export default {
},
// 鼠标按下事件
downFunction(e) {
console.log("鼠标按下", e); // e.button 0 鼠标左键 1 鼠标滚轮 2 鼠标右键
//console.log("鼠标按下", e); // e.button 0 鼠标左键 1 鼠标滚轮 2 鼠标右键
this.curObj.isRightClick = e.button > 1;
console.log("是否右键", this.curObj.isRightClick);
//console.log("是否右键", this.curObj.isRightClick);
// 赋值 x,y 轴起始数据
this.curObj.x = e.offsetX;
@ -541,8 +543,8 @@ export default {
// 判断是否落在的矩形框上
//得到落点所在框的序数
this.curObj.index = this.getEventIndex(this.curObj.x, this.curObj.y);
console.log("落点矩形", this.curObj.index);
console.log("我是上面的数组", this.recArrs);
//console.log("落点矩形", this.curObj.index);
//console.log("我是上面的数组", this.recArrs);
console.log(
"我是上面的数组点击的哪一个",
this.recArrs[this.curObj.index]
@ -566,14 +568,14 @@ export default {
this.curObj.x,
this.curObj.y
);
console.log("this.curObj.side", this.curObj.side);
//console.log("this.curObj.side", this.curObj.side);
if (this.curObj.side < 9) {
//准备缩放
console.log("在缩放");
//console.log("在缩放");
this.curObj.resize = true;
} else {
//准备拖动
console.log("在拖动");
//console.log("在拖动");
this.curObj.drag = true;
}
@ -654,8 +656,8 @@ export default {
//得到落点在一个框中的区域
getEventArea(index, x, y) {
const data = this.recArrs[index];
// console.log("this.recArrs", this.recArrs);
// console.log("data", data);
// //console.log("this.recArrs", this.recArrs);
// //console.log("data", data);
if (
x > data.x - this.curObj.radious &&
x < data.x + this.curObj.radious
@ -738,7 +740,7 @@ export default {
},
// 鼠标抬起事件
upFunction(e) {
console.log("鼠标抬起", e);
//console.log("鼠标抬起", e);
if (this.curObj.isRightClick) {
if (this.curObj.index !== -1) {
// 删除，重绘
@ -758,7 +760,7 @@ export default {
this.curObj.draw = false;
}
console.log("鼠标抬起-当前矩形框", this.recArrs);
//console.log("鼠标抬起-当前矩形框", this.recArrs);
},
// 添加矩形
addToRecs(e) {
@ -774,7 +776,7 @@ export default {
// 防止误触
if (rec.w > 2 && rec.h > 2) {
this.recArrs.push(rec);
console.log("recArrs", this.recArrs);
//console.log("recArrs", this.recArrs);
}
},
//保存图片和数据
@ -793,10 +795,10 @@ export default {
type: this.recArrs[i].type,
});
}
console.log(params);
//console.log(params);
saveLabelsApi(params)
.then((res) => {
console.log(res);
//console.log(res);
if (res.success) {
this.$message({
showClose: true,
@ -826,7 +828,7 @@ export default {
path: this.parentdata.name + "/" + this.currentNodeData.name,
})
.then((res) => {
console.log(res);
//console.log(res);
this.$message({
type: "success",
message: "删除成功!",
@ -845,7 +847,7 @@ export default {
// path: this.parentdata.name + "/" + this.currentNodeData.name,
// })
// .then((res) => {
// console.log(res);
// //console.log(res);
// this.$message({
// type: "success",
// message: "删除成功!",
@ -914,7 +916,7 @@ export default {
.picCanvans {
width: 100%;
height: calc(100% - 87px);
overflow: auto;
//overflow: auto;
h3 {
margin-bottom: 12px;
font-size: 14px;
@ -938,6 +940,10 @@ export default {
}
.canvas_dom {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
}
}

17
src/views/home/components/picTree.vue
Unescape Escape View File

@ -149,13 +149,13 @@ export default {
return;
}
this.currentNodeKey = node.name;
console.log(node); // 你会看到当前节点的数据
console.log(data);
// console.log(node); // 你会看到当前节点的数据
//console.log(data);
const parentNode = this.findParentNode(data.id, this.piclist);
if (parentNode) {
// 找到了父节点，打印父节点的数据
console.log(parentNode); // 输出父节点的数据对象
// console.log(parentNode); // 输出父节点的数据对象
} else {
// 没找到父节点，处理错误情况
console.error("未能找到父节点");
@ -166,10 +166,11 @@ export default {
EventBus.$emit("perentNode", parentNode);
this.defaultExpandedKeys = [parentNode.name];
this.pathParams = parentNode.name + "/" + node.name;
console.log(this.pathParams);
// console.log(this.pathParams);
this.getlabels();
localStorage.setItem("currentData", JSON.stringify(node));
this.scrollView();
EventBus.$emit("labelMark", this.labelsPoint);
},
scrollView() {
if (this.currentData) {
@ -184,11 +185,11 @@ export default {
}
},
findParentNode(childId, treeData) {
console.log(childId);
console.log(treeData);
//console.log(childId);
//console.log(treeData);
// 递归查找父节点
return treeData.find((parent) => {
console.log(parent);
// console.log(parent);
return (
parent.children &&
parent.children.find((child) => child.$treeNodeId === childId)
@ -233,7 +234,7 @@ export default {
border-radius: 4px;
.el-tree {
overflow-y: auto;
height: calc(100% - 0px);
height: calc(100% - 24px);
.el-tree-node__content {
height: 32px;
font-size: 14px;

Write Preview
Loading…
Cancel
Save