Skip to content

F
founder_vue
Commit 44e46cbf by 张超军
Options

旋转时，特征点的位置

parent ebde5cda
Showing with 181 additions and 16 deletions
src/components/ImageEd.vue
<!--
* @Author: your name
* @Date: 2021-09-09 09:28:46
* @LastEditTime: 2021-11-12 21:00:12
* @LastEditTime: 2021-11-13 13:05:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\cxyrd\LTz.vue
......@@ -406,7 +406,8 @@
<div class="remove-white" v-show="optionsRemoveWhite">
<div class="title">去白</div>
<div class="content">
<input class="range-narrow" id="input-range-remove-white-distance" type="range" min="0" :value="inputRemoveWhiteRange" max="255" />
<el-slider class="range-narrow" id="input-range-remove-white-distance" v-model="inputRemoveWhiteRange" :min="0" :max="255"></el-slider>
<!-- <input class="range-narrow" id="input-range-remove-white-distance" type="range" min="0" :value="inputRemoveWhiteRange" max="255" /> -->
<input class="qb_v" type="text" v-model="inputRemoveWhiteRange">
</div>
</div>
......@@ -435,12 +436,14 @@
<div class="brightness" v-show="optionsBrightness">
<div class="title">亮度</div>
<div class="content">
<input class="range-narrow" id="input-range-brightness-value" type="range" min="-255" :value="inputBrightnessRange" max="255" />
<el-slider class="range-narrow" id="input-range-brightness-value" v-model="inputBrightnessRange" :min="-255" :max="255"></el-slider>
<!-- <input class="range-narrow" id="input-range-brightness-value" type="range" min="-255" :value="inputBrightnessRange" max="255" /> -->
<input class="qb_v" type="text" v-model="inputBrightnessRange">
</div>
<div class="title">对比度</div>
<div class="content">
<input class="range-narrow" id="input-range-contrast-value" type="range" min="0" :value="inputContrastRange" max="255" />
<el-slider class="range-narrow" id="input-range-contrast-value" v-model="inputContrastRange" :min="0" :max="255"></el-slider>
<!-- <input class="range-narrow" id="input-range-contrast-value" type="range" min="0" :value="inputContrastRange" max="255" /> -->
<input class="qb_v" type="text" v-model="inputContrastRange">
</div>
</div>
......
src/views/Editor/modules/imageEd.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-11-12 21:00:34
* @LastEditTime: 2021-11-13 13:06:38
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -1194,6 +1194,9 @@ export default {
imageEditor.resetZoom()
self.sourceImage = sourceImage
imageEditor.loadImageFromURL('data:image/jpeg;base64,' + sourceImage, 'SampleImage').then(function (sizeValue) {
// 更新newHeight和newWidth
self.newHeight = sizeValue.newHeight
self.newWidth = sizeValue.newWidth
// console.log(sizeValue);
// 切换指纹图片时，清空特征点数组
self.tzdnumber = 0
......
src/views/Editor/modules/imageEdAJ.scss
......@@ -823,6 +823,7 @@ $directionRotate: var(--directionRotate, 0deg);
height: 512px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
z-index: 999;
background-color: transparent;
.blc_outter {
width: 100%;
height: 100%;
......@@ -1174,6 +1175,86 @@ $directionRotate: var(--directionRotate, 0deg);
font-size: 20px;
}
}
.blcbtn-content {
padding: 24px;
.kd-mix {
display: flex;
align-items: center;
.kd {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
.kd-select {
width: 188px;
height: 40px;
background: #ffffff;
border-radius: 4px;
}
}
.sz-mix {
margin-top: 24px;
display: flex;
align-items: center;
.sz {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
.sznum {
width: 188px;
height: 40px;
}
}
}
.blc-btns {
display: flex;
align-items: center;
justify-content: space-between;
width: 168px;
margin-left: 60px;
.confirm {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 72px;
height: 40px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #aeb5c2;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #2e3846;
&:hover {
border: 1px solid #055FE7;
}
&:active {
border: 1px solid #044CB9;
}
}
.cancel {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 72px;
height: 40px;
background: #055fe7;
border-radius: 4px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ffffff;
&:hover {
background: #377fec;
color: #ffffff;
}
&:active {
background: #044cb9;
color: #ffffff;
}
}
}
}
.txblyz {
cursor: pointer;
......@@ -2164,3 +2245,6 @@ $directionRotate: var(--directionRotate, 0deg);
transform: scale(1.6);
}
}
// /deep/.el-select-dropdown__item {
// padding-left: 20px !important;
// }
src/views/Editor/modules/imageEdAJ.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-11-13 11:26:26
* @LastEditTime: 2021-11-13 14:30:07
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -141,10 +141,10 @@
<div class="options-top">
<div class="top-title">
图像导入
<div class="rule_num">
<!-- <div class="rule_num">
<el-input size="small" @change="calcChange" v-model.number="rule_num" placeholder="请输入长度"></el-input>mm
</div>
<el-button type="primary" @click="cutImage">裁剪</el-button>
</div> -->
<!-- <el-button type="primary" @click="cutImage">裁剪</el-button> -->
</div>
<div class="top-content">
<div class="btn1">
......@@ -169,10 +169,21 @@
<div class="head-close" @click="rule = false">×</div>
</div>
<div class="blcbtn-content">
<!-- <el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select> -->
<div class="kd-mix">
<span class="kd">刻度：</span>
<el-select v-model="kdvalue" placeholder="请选择" class="kd-select">
<el-option v-for="item in kdoptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="sz-mix">
<span class="sz">数值：</span>
<el-input-number class="sznum" v-model="sznum" controls-position="right" @change="handleChangeSZ" :min="1"></el-input-number>
</div>
</div>
<div class="blc-btns">
<div class="confirm" @click="blcConfirm">确认</div>
<div class="cancel" @click="rule = false">取消</div>
</div>
</div>
<div class="txblyz">
......@@ -462,6 +473,22 @@ import MouseGesture from "./tzd_rotate.js";
export default {
data () {
return {
// 数值
sznum: 1,
// 刻度
kdvalue: '毫米/mm',
kdoptions: [
{
value: '毫米/mm',
label: '毫米/mm'
}, {
value: '厘米/cm',
label: '厘米/cm'
}, {
value: '英寸/in',
label: '英寸/in'
}
],
zwType: '指纹',
xsType: 'yuantu',
// 圆形id
......@@ -1103,6 +1130,8 @@ export default {
imageEditor.rotate(-parseInt(self.startPlace));
imageEditor.resetZoom();
self.startPlace = 0;
// 特征点的图层也要跟着转
$('.tzdDrawing').css("transform", `rotate(${self.inputRotationRange}deg)`)
}, 200);
setTimeout(() => {
......@@ -1212,6 +1241,10 @@ export default {
}deg)`
);
}
// 特征点的图层也要跟着转
$('.tzdDrawing').css("transform", `rotate(${self.inputRotationRange}deg)`)
self.startPlace = self.inputRotationRange;
let canvasImage = self.imageEditor._graphics.getCanvasImage();
// 每次旋转时，位置都会改变，需要重新定位
......@@ -1247,6 +1280,9 @@ export default {
}deg)`
);
}
// 特征点的图层也要跟着转
$('.tzdDrawing').css("transform", `rotate(${self.inputRotationRange}deg)`)
self.startPlace = self.inputRotationRange;
self.historys.push("旋转");
let canvasImage = self.imageEditor._graphics.getCanvasImage();
......@@ -1378,6 +1414,10 @@ export default {
imageEditor.resetZoom()
self.sourceImage = sourceImage
imageEditor.loadImageFromURL('data:image/jpeg;base64,' + sourceImage, 'SampleImage').then(function (sizeValue) {
console.log(sizeValue);
// 更新newHeight和newWidth
self.newHeight = sizeValue.newHeight
self.newWidth = sizeValue.newWidth
// 清除自由绘制和圆形绘制
$('.td_circle').remove()
$('.auto_td_circle').remove()
......@@ -1748,6 +1788,7 @@ export default {
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
}
......@@ -1768,12 +1809,12 @@ export default {
$(`#tzd${self.tzdId}`).css(
"left",
x-4 +
x - 4 +
"px"
);
$(`#tzd${self.tzdId}`).css(
"top",
y-4 +
y - 4 +
"px"
);
$(`#tzd${self.tzdId}`).css("box-sizing", "border-box");
......@@ -2023,6 +2064,7 @@ export default {
self.zoomLevel = 2;
}
console.log(self.newWidth);
console.log(self.newHeight);
imageEditor.zoom({
x: self.newWidth / 2,
y: self.newHeight / 2,
......@@ -2038,6 +2080,7 @@ export default {
);
//开始缩放
Fcanvas.zoomToPoint(zoomPoint, self.zoomLevel);
console.log(Fcanvas);
// Fcanvas.setZoom(self.zoomLevel);
// Fcanvas.setWidth(self.newWidth*Fcanvas.getZoom())
......@@ -2670,7 +2713,7 @@ export default {
"SampleImage"
)
.then(function (sizeValue) {
// console.log(sizeValue);
console.log(sizeValue);
imageEditor.clearUndoStack();
});
});
......@@ -3072,6 +3115,23 @@ export default {
console.log(self.newWidth);
},
/**
* @description: 比例尺数值变化
* @param {*}
* @return {*}
*/
handleChangeSZ (value) {
console.log(value);
this.rule_num = value
},
/**
* @description: 比例尺确认
* @param {*}
* @return {*}
*/
blcConfirm () {
this.calcChange()
},
/**
* @description: 计算比例
* @param {*}
* @return {*}
......@@ -3173,6 +3233,9 @@ export default {
this.isSwk_flag = false;
this.isTpdr_flag = false;
this.startEditImage = false;
// 裁剪
this.cutImage()
},
/**
* @description: 添加手纹框
......@@ -3190,6 +3253,10 @@ export default {
let isMove = false;
if (this.isSwk_flag) {
// 手纹框层级提升
$('.blc').css('z-index', '999999')
$('.tzdDrawing').css('z-index', '1')
// document.querySelector('.blc_small').addEventListener('mousedown', function (e) {
// console.log($('.small-drawing').offset().left);
// // console.log(e);
......@@ -3322,12 +3389,14 @@ export default {
dragable("blc_small");
function dragable_blc (id) {
console.log(id);
var d = document,
o = d.getElementById(id),
s = o.style,
x,
y,
p = "onmousemove";
console.log(o);
o.onmousedown = function (e) {
e = e || event;
x = e.clientX - o.offsetLeft;
......@@ -3404,6 +3473,10 @@ export default {
};
}
dragable_blc("blc");
} else {
// 手纹框层级降低
$('.blc').css('z-index', '1')
$('.tzdDrawing').css('z-index', '9999')
}
},
/**
......@@ -5155,6 +5228,8 @@ export default {
if (self.isTpdr_flag) {
$(".small-drawing-img").css("transform", `rotate(${deg}deg)`);
}
// 特征点的图层也要跟着转
$('.tzdDrawing').css("transform", `rotate(${newValue}deg)`)
},
inputRemoveWhiteRange (newValue, oldValue) {
this.imageEditor
......
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