Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
founder_vue
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
常超
founder_vue
Commits
44e46cbf
Commit
44e46cbf
authored
Nov 13, 2021
by
张超军
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
旋转时,特征点的位置
parent
ebde5cda
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
180 additions
and
15 deletions
+180
-15
src/components/ImageEd.vue
+7
-4
src/views/Editor/modules/imageEd.vue
+4
-1
src/views/Editor/modules/imageEdAJ.scss
+84
-0
src/views/Editor/modules/imageEdAJ.vue
+85
-10
No files found.
src/components/ImageEd.vue
View file @
44e46cbf
<!--
* @Author: your name
* @Date: 2021-09-09 09:28:46
* @LastEditTime: 2021-11-1
2 21:00:12
* @LastEditTime: 2021-11-1
3 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
View file @
44e46cbf
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-11-1
2 21:00:34
* @LastEditTime: 2021-11-1
3 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
View file @
44e46cbf
...
...
@@ -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
View file @
44e46cbf
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-11-13 1
1:26:26
* @LastEditTime: 2021-11-13 1
4: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"
>
<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>
-->
</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
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment