Skip to content

F
founder_vue
Commit fda9abfc by 李萌萌
Options

手纹框绘制

parent f1a2b82d
Showing with 56 additions and 94 deletions
src/views/Editor/modules/imageEdAJ.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-12-16 09:59:12
* @LastEditTime: 2021-12-16 21:50:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -2240,7 +2240,8 @@ export default {
if (self.isHand || self.isHandSpace) {
// 放大后开启拖拽
// self.startHand = true
if (self.zoomLevel > 1) {
// if (self.zoomLevel > 1) {
if (self.imageEditor.getZoom() > 1) {
self.startHand = true;
}
}
......@@ -4285,14 +4286,17 @@ export default {
this.bb = this.canvasHeight / frame;
}
this.imageEditor.zoom({
// y: self.newHeight / 2,
// x: self.newWidth / 2,
y: 0,
x: 0,
zoomLevel: self.bb,
});
$(".blc").css("width", (3 / 5) * this.canvasHeight + "px");
// 缩放前后不改变中心点
// this.imageEditor.zoom({
// // y: self.newHeight / 2,
// // x: self.newWidth / 2,
// y: 0,
// x: 0,
// zoomLevel: self.bb,
// });
this.zoomImage(self.bb);
$(".blc").css("width", (3 / 5) * this.canvashWidth + "px");
$(".blc").css("height", (3 / 5) * this.canvasHeight + "px");
$(".blc_small").css(
......@@ -4303,6 +4307,12 @@ export default {
"height",
((3 / 5) * this.canvasHeight * 180) / 670 / this.bb + "px"
);
$(".blc_small").css(
"left",$(".small-drawing").width()/2-$(".blc_small").width()/2 + "px"
);
$(".blc_small").css(
"top",$(".small-drawing").height()/2-$(".blc_small").height()/2 + "px"
);
} else {
// 掌纹
let frame_min = (this.line_distance / this.rule_num) * 26; // 512px == 26mm
......@@ -4682,6 +4692,7 @@ export default {
self.small_y = e.clientY - y;
if (self.isCrop) {
$(".blc").css(
"left",
((e.clientX - x) / $(".small-drawing").width()) *
......@@ -4696,99 +4707,38 @@ export default {
);
} else {
let canvasImage = self.imageEditor._graphics.getCanvasImage();
// x在这里是NAN，所以加了self.x
let src = {
x: ((e.clientX - self.x) / Number($(".small-drawing").width()) *
self.newHeight),
y: ((e.clientY - self.y) / Number($(".small-drawing").width()) *
self.newHeight)
};
// let src = {
// x: e.clientX - self.x,
// y: e.clientY - self.y
// };
console.log(src);
// 获取大手纹框(#blc)的偏移位置
const [dswkCenterX,dswkCenterY]=[$("#blc").position().left+$("#blc").width()/2,$("#blc").position().top+$("#blc").height()/2]
const [dswkOffsetX,dswkOffsetY]=[dswkCenterX-self.canvasWidth/2,dswkCenterY-self.canvasHeight/2];
const [xswkOffseteX,xswkOffseteY]=[dswkOffsetX/self.canvasWidth*$(".small-drawing").width(),dswkOffsetY/self.canvasHeight*$(".small-drawing").height()];
let det = {
x: Number($(".small-drawing-img").width()) / 2,
y: Number($(".small-drawing-img").height()) / 2
};
console.log(det);
const point = { x: src.x, y: src.y };
// const angle = -Math.PI / 2;
// 角度超出360°范围了
console.log(self.startPlace);
if (self.startPlace <= -360) {
self.startPlace = 0;
}
if (self.startPlace >= 360) {
self.startPlace = 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);
console.log(canvasImage);
// self.imageEditor._graphics.setImageProperties(
// {
// left: -x,
// top: -y,
// // left: -(x / Number($(".small-drawing").width()) *
// // self.newHeight),
// // top:-(y / Number($(".small-drawing").width()) *
// // self.newHeight),
// originX: "left",
// originY: "top"
// },
// true
// );
let xx = ((e.clientX - self.x - self.crop_left) / Number($(".small-drawing").width()) *
self.newHeight)
let yy = ((e.clientY - self.y - self.crop_top) / Number($(".small-drawing").width()) *
self.newHeight)
console.log("不加x:", ((e.clientX - self.x) / Number($(".small-drawing").width()) * self.newHeight));
console.log("加x:", ((e.clientX - self.x - self.crop_left) / Number($(".small-drawing").width()) * self.newHeight));
// self.imageEditor._graphics.setImageProperties(
// {
// left: -x,
// top: -y,
// originX: "left",
// originY: "top"
// },
// true
// );
// LMM↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
// 获取鹰眼图框中心点
// 获取缩略图框中心点
const [yyCenterX, yyCenterY] = [
$(".preview-source").width() / 2,
$(".preview-source").height() / 2,
$(".small-drawing").width() / 2,
$(".small-drawing").height() / 2,
];
// 获取小蓝框的中心点
// 获取小指纹框的中心点
const [xlCenterX, xlCenterY] = [
$("#block_small").width() / 2 +
$("#block_small").position().left,
$("#block_small").height() / 2 +
$("#block_small").position().top,
$("#blc_small").width() / 2 +
$("#blc_small").position().left,
$("#blc_small").height() / 2 +
$("#blc_small").position().top,
];
// 当前中心点偏移量
// 对应的画框的中心点
const [tempCenterX,tempCenterY]=[xlCenterX-xswkOffseteX,xlCenterY-xswkOffseteY]
// 当前小蓝框中心点偏移量
const [smallOffsetX, smallOffsetY] = [
xlCenterX - yyCenterX,
xlCenterY - yyCenterY,
tempCenterX - yyCenterX,
tempCenterY - yyCenterY
];
const [canvasOffsetX, canvasOffsetY] = [
(smallOffsetX / $(".preview-source").width()) *
(smallOffsetX / $(".small-drawing").width()) *
canvasImage.width,
(smallOffsetY / $(".preview-source").height()) *
(smallOffsetY / $(".small-drawing").height()) *
canvasImage.height,
];
// 计算图片原来的偏移量得到不偏移情况的left top 值
......@@ -4797,11 +4747,12 @@ export default {
centerP.x - canvasImage.width / 2,
centerP.y - canvasImage.height / 2,
];
// 大手纹框的偏移量
const zoom = self.imageEditor.getZoom();
const [canvasleft, canvastop] = [
canvasImage.left - canvasOffsetX - oldCanvasOffsetX,
canvasImage.top - canvasOffsetY - oldCanvasOffsetY,
canvasImage.top - canvasOffsetY- oldCanvasOffsetY
];
self.imageEditor._graphics.setImageProperties(
{
left: canvasleft,
......@@ -4812,6 +4763,15 @@ export default {
true
);
self.changeTzdDrawing(true, true);
// LMM↑↑↑↑↑↑↑↑↑↑↑↑
// let canvasImage = self.imageEditor._graphics.getCanvasImage();
......@@ -7349,7 +7309,8 @@ export default {
this.imageEditor.stopDrawingMode();
this.isHand = !this.isHand;
if (this.isHand) {
this.$message("拖动前请放大图像");
if(this.imageEditor.getZoom()<=1){
this.$message("拖动前请放大图像");}
$(".drag").css("background", "#055FE7");
// 开启拖拽
this.imageEditor._graphics._attachZoomEvents2();
......@@ -7545,6 +7506,7 @@ export default {
$(".block_small").css("top", `${xlTop}px`);
}
// 导入图片的角度/翻转处理
if (this.isTpdr_flag) {
$(".small-drawing-img").css("transform", `rotateY(${rotateY}deg) rotate(${angle}deg) rotateX(${rotateX}deg)`);
}
......
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