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%; width: 100%;
height: 100%; height: 100%;
//padding: 10px; //padding: 10px;
overflow-y: auto; overflow-y: scroll;
box-sizing: border-box; box-sizing: border-box;
} }
} }

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

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

Write Preview
Loading…
Cancel
Save