Skip to content

F
founder_vue
Commit 5040af80 by 张超军
Options

人脸放大展示+人员指纹编辑特征点缩放+平移调整

parent 46542d7a
Showing with 205 additions and 45 deletions
src/store/modules/mutations-types.js
/*
* @Author: your name
* @Date: 2021-11-04 13:14:49
* @LastEditTime: 2021-12-02 21:14:19
* @LastEditTime: 2021-12-03 10:30:40
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\store\modules\mutations-types.js
......@@ -36,3 +36,5 @@ export const SET_SMALLLOADING = 'setSmallLoading'
export const SET_RXINFO = 'setRxInfo'
// 是否放大人像
export const SET_ENLARGEFACE = 'setEnlargeFace'
// 设置单个人像信息
export const SET_RXINFOENLARGE = 'setRxInfoEnlarge'
src/store/modules/ryzwbj.js
/*
* @Author: your name
* @Date: 2021-11-04 11:12:33
* @LastEditTime: 2021-12-02 21:14:25
* @LastEditTime: 2021-12-03 10:41:41
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\store\modules\zwbj.js
*/
import { SET_RXINFO, SET_ENLARGEFACE } from "./mutations-types";
import { SET_RXINFO, SET_ENLARGEFACE, SET_RXINFOENLARGE } from "./mutations-types";
const state = {
// 人像信息
rxInfo: [],
// 单个人像信息
rxInfoEnlarge: {},
// 是否放大人像
enLargeFace: false
};
......@@ -21,6 +23,9 @@ const mutations = {
[SET_ENLARGEFACE] (state, content) {
state.enLargeFace = content
},
[SET_RXINFOENLARGE] (state, content) {
state.rxInfoEnlarge = content
},
};
const actions = {
......
src/views/Editor/modules/imageEd.scss
......@@ -999,7 +999,7 @@ $transOrigin: var(--transOrigin, 0px, 0px);
align-items: center;
justify-content: center;
&:hover {
border: 1px solid #055FE7;
border: 1px solid #055fe7;
box-shadow: 0px 10px 30px 2px rgba(0, 0, 0, 0.16);
}
img {
......
src/views/Editor/modules/imageEd.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-12-03 00:46:31
* @LastEditTime: 2021-12-03 11:30:28
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -375,6 +375,8 @@ import "@/icons/direction.svg";
export default {
data () {
return {
// 人像信息
rxInfo: [],
// 绿色角度方向（暂时不做）
greenDeg: 0,
// 是否点击了自动提取
......@@ -626,7 +628,10 @@ export default {
// 记录session的个数
sessionCount: 0,
// 是否为人像
isFace: false
isFace: false,
// 记录特征点图层上次停留的位置
tzdDrawingLeft_yd: 0,
tzdDrawingTop_yd: 0
};
},
computed: {
......@@ -634,7 +639,6 @@ export default {
seq: state => state.zwbj.seq,
preTzdArr: state => state.zwbj.pretzdall,
autopretzdall: state => state.zwbj.autopretzdall,
rxInfo: state => state.ryzwbj.rxInfo
})
},
created () {
......@@ -1607,12 +1611,19 @@ export default {
// $('.tzdDrawing').css('transform', `translate(${x2 - x1}px,${y2 - y1}px)`)
// TODO
$(".tzdDrawing").css("transform", `translate(${Number(self.tzdDrawingLeft) + (x2 - x1)}px,${Number(self.tzdDrawingTop) + (y2 - y1)}px) scale(${self.zoomLevel})`);
self.tzdDrawing_top = Number(self.tzdDrawingTop) + (y2 - y1);
self.tzdDrawing_left = Number(self.tzdDrawingLeft) + (x2 - x1);
$(".tzdDrawing_2").css("transform", `translate(${Number(self.tzdDrawingLeft) + (x2 - x1)}px,${Number(self.tzdDrawingTop) + (y2 - y1)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing").css(
"transform",
`translate(${Number(self.tzdDrawingLeft_yd) + (x2 - x1)}px,${Number(self.tzdDrawingTop_yd) + (y2 - y1)
}px) rotate(${canvasImage.angle}deg) scale(${self.zoomLevel})`
);
$(".tzdDrawing_2").css(
"transform",
`translate(${Number(self.tzdDrawingLeft_yd) + (x2 - x1)}px,${Number(self.tzdDrawingTop_yd) + (y2 - y1)
}px) scale(${self.zoomLevel})`
);
self.tzdDrawing_top = Number(self.tzdDrawingTop_yd) + (y2 - y1);
self.tzdDrawing_left = Number(self.tzdDrawingLeft_yd) + (x2 - x1);
self.move_left = originleft + ((x2 - x1) * self.newWidth / self.canvasWidth / self.zoomLevel);
self.move_top = origintop + ((y2 - y1) * self.newHeight / self.canvasHeight / self.zoomLevel);
......@@ -1632,13 +1643,58 @@ export default {
y: self.newHeight / 2,
zoomLevel: self.zoomLevel
});
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
let canvasImage = self.imageEditor._graphics.getCanvasImage();
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel})`);
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// //console.log(`${originPointer.y}px,${originPointer.x}px`);
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.y}px ${originPointer.x}px`;
if (canvasImage.angle) {
let src = {
x: canvasImage.left,
y: canvasImage.top
};
console.log(src);
let det = {
x: canvasImage.width / 2,
y: canvasImage.height / 2
};
const point = { x: src.x, y: src.y };
// const angle = -Math.PI / 2;
// 角度超出360°范围了
console.log(canvasImage.angle);
if (canvasImage.angle <= -360) {
canvasImage.angle = 0;
}
if (canvasImage.angle >= 360) {
canvasImage.angle = 0;
}
const angle = -canvasImage.angle * Math.PI / 180.00;
console.log(angle);
// 角度 * Math.PI / 180
const [x, y] = reverse(
point.x,
point.y,
det.x,
det.y,
-angle
);
console.log(x, y);
$(".tzdDrawing").css("transform-origin", `${Number($(".tzdDrawing").width()) / 2 - Number(x)}px ${Number($(".tzdDrawing").height()) / 2 - Number(y)}px`);
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(x)}px,${Number(y)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px)`);
} else {
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
$(".tzdDrawing").css("transform-origin", `${Number($(".tzdDrawing").width()) / 2 - Number(canvasImage.left)}px ${Number($(".tzdDrawing").height()) / 2 - Number(canvasImage.top)}px`);
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(canvasImage.left)}px,${Number(canvasImage.top)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px)`);
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// //console.log(`${originPointer.y}px,${originPointer.x}px`);
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.y}px ${originPointer.x}px`;
}
$(".tzdDom").css("z-index", `99999`);
} else {
// 缩小
......@@ -1655,8 +1711,53 @@ export default {
// $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`)
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
let canvasImage = self.imageEditor._graphics.getCanvasImage();
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel})`);
if (canvasImage.angle) {
let src = {
x: canvasImage.left,
y: canvasImage.top
};
console.log(src);
let det = {
x: canvasImage.width / 2,
y: canvasImage.height / 2
};
const point = { x: src.x, y: src.y };
// const angle = -Math.PI / 2;
// 角度超出360°范围了
console.log(canvasImage.angle);
if (canvasImage.angle <= -360) {
canvasImage.angle = 0;
}
if (canvasImage.angle >= 360) {
canvasImage.angle = 0;
}
const angle = -canvasImage.angle * Math.PI / 180.00;
console.log(angle);
// 角度 * Math.PI / 180
const [x, y] = reverse(
point.x,
point.y,
det.x,
det.y,
-angle
);
console.log(x, y);
$(".tzdDrawing").css("transform-origin", `${Number($(".tzdDrawing").width()) / 2 - Number(x)}px ${Number($(".tzdDrawing").height()) / 2 - Number(y)}px`);
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(x)}px,${Number(y)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px)`);
} else {
$(".tzdDrawing").css("transform-origin", `${Number($(".tzdDrawing").width()) / 2 - Number(canvasImage.left)}px ${Number($(".tzdDrawing").height()) / 2 - Number(canvasImage.top)}px`);
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(canvasImage.left)}px,${Number(canvasImage.top)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px)`);
}
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// $('.tzdDrawing').css('z-index', `99`)
......@@ -1733,10 +1834,16 @@ export default {
let canvasImage = imageEditor._graphics.getCanvasImage();
self.originleft = canvasImage.left;
self.origintop = canvasImage.top;
if ($(".tzdDrawing").css("transform").replace(/[^0-9\-,]/g, "").split(",")[4]) {
self.tzdDrawingLeft = $(".tzdDrawing").css("transform").replace(/[^0-9\-,]/g, "").split(",")[4];
self.tzdDrawingTop = $(".tzdDrawing").css("transform").replace(/[^0-9\-,]/g, "").split(",")[5];
}
self.tzdDrawingLeft = canvasImage.left
self.tzdDrawingTop = canvasImage.top
// 存储 特征点图层 在最后停下的位置 ---- 用于加在拖拽平移的基础上。
let transformMatrix = $(".tzdDrawing").css("transform").substring(7, $(".tzdDrawing").css("transform").length - 1).split(',')
console.log(transformMatrix);
self.tzdDrawingLeft_yd = transformMatrix[4];
self.tzdDrawingTop_yd = transformMatrix[5];
// $('.tzdDrawing').css('transform', `rotate(${canvasImage.angle}deg) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px) scale(${self.zoomLevel})`)
self.startHand = false;
self.mouseEnlarge = false;
......@@ -1886,14 +1993,20 @@ export default {
this.$bus.on('isFace', (isFace) => {
self.isFace = isFace
})
// 获取全部人像信息
this.$bus.on('setRxInfo', (rxInfo) => {
self.rxInfo = rxInfo
})
},
methods: {
/**
* 人像双击事件
*/
faceDoubleChange(face) {
console.log(face);
faceDoubleChange (face) {
this.$bus.emit('isBlur', true)
this.enLargeFace = true
this.$bus.emit('setRxInfoEnlarge', face)
this.$store.commit('ryzwbj/setEnlargeFace', true)
},
/**
......@@ -3985,6 +4098,8 @@ export default {
this.$bus.off('ryzwbjTDZ');
this.$bus.off('zwType');
this.$bus.off('isFace');
this.$bus.off('setRxInfoEnlarge')
this.$bus.off('setRxInfo')
}
};
</script>
......
src/views/Editor/modules/imageEdAJ.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-12-03 02:08:29
* @LastEditTime: 2021-12-03 11:20:56
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -933,6 +933,7 @@ export default {
originY: 0,
// 记录session的个数
sessionCount: 0,
// 记录特征点图层上次停留的位置
tzdDrawingLeft_yd: 0,
tzdDrawingTop_yd: 0
};
......@@ -2708,6 +2709,7 @@ export default {
let canvasImage = imageEditor._graphics.getCanvasImage();
console.log(canvasImage);
// 要计算canvas的在偏移角度的 坐标转换，用于 特征点图层 的translate transform-origin
if (canvasImage.angle) {
let src = {
x: canvasImage.left,
......@@ -2792,7 +2794,8 @@ export default {
// $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`)
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
let canvasImage = imageEditor._graphics.getCanvasImage();
// 要计算canvas的在偏移角度的 坐标转换，用于 特征点图层 的translate transform-origin
if (canvasImage.angle) {
let src = {
x: canvasImage.left,
......@@ -2986,6 +2989,8 @@ export default {
// console.log($('.tzdDrawing').css("transform").replace(/[^0-9\-,]/g,'').split(','));
console.log($('.tzdDrawing').css("transform"));
// console.log(cssTransform(document.querySelector('.tzdDrawing'), 'translate'));
// 存储 特征点图层 在最后停下的位置 ---- 用于加在拖拽平移的基础上。
let transformMatrix = $(".tzdDrawing").css("transform").substring(7, $(".tzdDrawing").css("transform").length - 1).split(',')
console.log(transformMatrix);
self.tzdDrawingLeft_yd = transformMatrix[4];
......
src/views/Editor/modules/ryzwbjLeft.vue
<!--
* @Author: your name
* @Date: 2021-10-22 09:42:07
* @LastEditTime: 2021-12-02 20:36:39
* @LastEditTime: 2021-12-03 11:29:52
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue
......@@ -424,7 +424,8 @@ export default {
})
})
}
self.$store.commit('ryzwbj/setRxInfo', self.faceData)
// self.$store.commit('ryzwbj/setRxInfo', self.faceData)
self.$bus.emit('setRxInfo', self.faceData)
self.isFaceRequest = true
})
},
......@@ -828,6 +829,7 @@ export default {
}
// 传入判断，为掌纹则开启图像编辑的功能
this.$bus.emit('isFace', false)
this.$bus.emit('zwType', '掌纹')
} else if (this.zwSelect === '人像') {
// 获取人脸数据
this.getFaceData()
......@@ -857,6 +859,7 @@ export default {
this.$bus.off('ryzwbjType');
this.$bus.off('ryzwbjTDZ');
this.$bus.off('zwType');
this.$bus.off('setRxInfo')
},
watch: {
zwSelect (newValue, oldValue) {
......
src/views/Home.vue
......@@ -109,9 +109,12 @@
</div>
<!-- 人像 -->
<div class="face-big" v-show="enLargeFace">
<img src="@/assets/img/下载.jpg" alt="">
</div>
<transition name="el-fade-in-linear">
<div class="face-big" v-show="enLargeFace">
<div class="face-name">{{rxInfoEnlarge.name}}</div>
<img class="face-img" :src="'data:image/jpeg;base64,'+rxInfoEnlarge.image" alt="">
</div>
</transition>
</div>
</template>
......@@ -142,6 +145,8 @@ export default {
jumpRouteDialogVisible: false,
// 路由跳转的方式----- 1.面包屑切换。2.面包屑删除当前。3.左侧菜单跳转
routeChangeType: "change",
// 人像信息
rxInfoEnlarge: {}
};
},
mounted () {
......@@ -157,8 +162,8 @@ export default {
}
});
console.log(this.smallLoading);
// 初始化人像是否放大
self.$store.commit('ryzwbj/setEnlargeFace', false)
document.querySelector('.shadow').addEventListener('click', function(e) {
// 如果图像是处于放大状态
if(self.enLargeFace) {
......@@ -166,6 +171,13 @@ export default {
self.$store.commit('ryzwbj/setEnlargeFace', false)
}
})
// 获取放大的人像信息
this.$bus.on('setRxInfoEnlarge', (rxInfoEnlarge) => {
console.log(11111111111);
self.rxInfoEnlarge = rxInfoEnlarge
})
},
updated () {
this.menuActive = this.$route.name;
......@@ -178,7 +190,7 @@ export default {
willRoute: (state) => state.loading.willRoute,
jumproute: (state) => state.loading.jumproute,
smallLoading: (state) => state.loading.smallLoading,
enLargeFace: (state) => state.loading.enLargeFace,
enLargeFace: (state) => state.ryzwbj.enLargeFace,
}),
cachePageName () {
return this.$store.state.layout.cachePageName;
......@@ -454,6 +466,9 @@ export default {
},
watch: {
enLargeFace (newValue, oldValue) {
console.log(newValue);
},
menuActive (newValue, oldValue) {
console.log(newValue);
},
......@@ -509,14 +524,29 @@ export default {
<style scoped lang="scss">
// 人像
.face-big {
position: absolute;
top: 0;
left: 0;
width: 543px;
height: 722px;
box-shadow: 0px 14px 30px 2px rgba(0, 21, 51, 0.16);
border-radius: 8px;
border: 1px solid #CCCCCC;
z-index: 999;
position: fixed;
top: calc(50% - 361px);
left: calc(50% - 271.5px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.face-name {
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #333333;
margin-bottom: 6px;
}
.face-img {
width: 543px;
height: 722px;
box-shadow: 0px 14px 30px 2px rgba(0, 21, 51, 0.16);
border-radius: 8px;
border: 1px solid #CCCCCC;
background: #ffffff;
}
}
/deep/.dialog-footer {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment