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
ee986d75
Commit
ee986d75
authored
Nov 13, 2021
by
张超军
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
人员指纹编辑滑块特征点位置调整
parent
d97acfca
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
89 additions
and
13 deletions
+89
-13
src/views/Editor/modules/imageEd.scss
+7
-0
src/views/Editor/modules/imageEd.vue
+75
-12
src/views/Editor/modules/imageEdAJ.vue
+7
-1
No files found.
src/views/Editor/modules/imageEd.scss
View file @
ee986d75
...
...
@@ -954,6 +954,13 @@ $transOrigin: var(--transOrigin, 0px, 0px);
// transform-origin: $transOrigin;
// background-color: #999;
}
.tzdDrawing_2 {
width: 640px;
height: 640px;
position: absolute;
background: transparent;
transform-origin: 320px 320px;
}
}
.preview-source {
z-index: 9999;
...
...
src/views/Editor/modules/imageEd.vue
View file @
ee986d75
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-11-13 1
4:38:3
9
* @LastEditTime: 2021-11-13 1
5:01:2
9
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
...
...
@@ -139,6 +139,7 @@
<img
id=
"sourceImage"
style=
"display:none"
:src=
"'data:image/jpeg;base64,'+sourceImage"
alt=
""
>
</div>
<div
class=
"tzdDrawing"
></div>
<div
class=
"tzdDrawing_2"
></div>
</div>
<!-- 展示方向 -->
<!--
<svg-icon
v-show=
"isdirection"
icon-class=
"direction"
class=
"direction"
/>
-->
...
...
@@ -1073,6 +1074,9 @@ export default {
imageEditor
.
rotate
(
parseInt
(
$inputRotationRange
.
val
(),
10
)
-
self
.
startPlace
)
self
.
startPlace
=
self
.
inputRotationRange
;
// 特征点的图层也要跟着转
$
(
'.tzdDrawing'
).
css
(
"transform"
,
`rotate(
${
self
.
inputRotationRange
}
deg)`
)
};
$
(
document
).
on
(
'mousemove'
,
changeAngle
);
$
(
document
).
on
(
'mouseup'
,
function
stopChangingAngle
()
{
...
...
@@ -1086,6 +1090,8 @@ export default {
imageEditor
.
rotate
(
parseInt
(
$inputRotationRange
.
val
(),
10
)
-
self
.
startPlace
)
self
.
startPlace
=
self
.
inputRotationRange
;
self
.
historys
.
push
(
'旋转'
)
// 特征点的图层也要跟着转
$
(
'.tzdDrawing'
).
css
(
"transform"
,
`rotate(
${
self
.
inputRotationRange
}
deg)`
)
});
// 划线事件
...
...
@@ -1341,13 +1347,57 @@ export default {
$
(
'.tzdDom .direction'
).
css
(
'height'
,
'2px'
)
$
(
'.tzdDom .direction'
).
css
(
'background-color'
,
'#FFFD0F'
)
let
src
=
{
x
:
(
e
.
pageX
-
$
(
".tzdDrawing_2"
).
offset
().
left
)
/
self
.
zoomLevel
,
y
:
(
e
.
pageY
-
$
(
".tzdDrawing_2"
).
offset
().
top
)
/
self
.
zoomLevel
}
console
.
log
(
src
);
let
det
=
{
x
:
Number
(
$
(
'.tzdDrawing_2'
).
width
())
/
2
,
y
:
Number
(
$
(
'.tzdDrawing_2'
).
height
())
/
2
}
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
=
-
self
.
startPlace
*
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
)
$
(
`#tzd
${
self
.
tzdId
}
`
).
css
(
"left"
,
x
-
4
+
"px"
);
$
(
`#tzd
${
self
.
tzdId
}
`
).
css
(
"top"
,
y
-
4
+
"px"
);
$
(
`#tzd
${
self
.
tzdId
}
`
).
css
(
"box-sizing"
,
"border-box"
);
// self.zoomLevel
// $(`#tzd${self.tzdId}`).css("left", e.pageX - $('.tzdDrawing').offset().left - 4 + "px");
// $(`#tzd${self.tzdId}`).css("top", e.pageY - $('.tzdDrawing').offset().top - 4 + "px");
$
(
`#tzd
${
self
.
tzdId
}
`
).
css
(
"left"
,
(
e
.
pageX
-
$
(
'.tzdDrawing'
).
offset
().
left
-
4
)
/
self
.
zoomLevel
+
"px"
);
$
(
`#tzd
${
self
.
tzdId
}
`
).
css
(
"top"
,
(
e
.
pageY
-
$
(
'.tzdDrawing'
).
offset
().
top
-
4
)
/
self
.
zoomLevel
+
"px"
);
$
(
`#tzd
${
self
.
tzdId
}
`
).
css
(
"box-sizing"
,
"border-box"
);
//
$(`#tzd${self.tzdId}`).css("left", (e.pageX - $('.tzdDrawing').offset().left - 4) / self.zoomLevel + "px");
//
$(`#tzd${self.tzdId}`).css("top", (e.pageY - $('.tzdDrawing').offset().top - 4) / self.zoomLevel + "px");
//
$(`#tzd${self.tzdId}`).css("box-sizing", "border-box");
}
// 鼠标右击
if
(
e
.
which
===
3
)
{
...
...
@@ -1459,6 +1509,8 @@ export default {
$
(
'.tzdDrawing'
).
css
(
'transform'
,
`translate(
${
Number
(
self
.
tzdDrawingLeft
)
+
(
x2
-
x1
)}
px,
${
Number
(
self
.
tzdDrawingTop
)
+
(
y2
-
y1
)}
px) scale(
${
self
.
zoomLevel
}
)`
)
$
(
'.tzdDrawing_2'
).
css
(
'transform'
,
`translate(
${
Number
(
self
.
tzdDrawingLeft
)
+
(
x2
-
x1
)}
px,
${
Number
(
self
.
tzdDrawingTop
)
+
(
y2
-
y1
)}
px) scale(
${
self
.
zoomLevel
}
)`
)
self
.
move_left
=
originleft
+
((
x2
-
x1
)
*
self
.
newWidth
/
self
.
canvasWidth
/
self
.
zoomLevel
)
self
.
move_top
=
origintop
+
((
y2
-
y1
)
*
self
.
newHeight
/
self
.
canvasHeight
/
self
.
zoomLevel
)
...
...
@@ -1479,6 +1531,7 @@ export default {
})
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
$
(
'.tzdDrawing'
).
css
(
'transform'
,
`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`;
...
...
@@ -1498,6 +1551,7 @@ export default {
// $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`)
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
$
(
'.tzdDrawing'
).
css
(
'transform'
,
`scale(
${
self
.
zoomLevel
}
)`
)
$
(
".tzdDrawing_2"
).
css
(
"transform"
,
`scale(
${
self
.
zoomLevel
}
)`
);
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// $('.tzdDrawing').css('z-index', `99`)
...
...
@@ -1550,7 +1604,7 @@ export default {
deg
=
0
}
console
.
log
(
self
.
startPlace
,
'原点 '
);
console
.
log
(
self
.
startPlace
,
'原点 '
);
if
(
deg
)
{
$
(
"#tzd"
+
self
.
tzdId
).
css
(
"transform"
,
`rotate(
${
deg
-
self
.
startPlace
}
deg)`
);
}
else
{
...
...
@@ -1996,7 +2050,10 @@ export default {
})
this
.
zoomLevel
=
1.2
this
.
xsType
=
'shizhong'
if
(
!
type
){
// 特征点图层缩放设置为1.2
$
(
'.tzdDrawing'
).
css
(
'transform'
,
'scale(1.2)'
);
$
(
'.tzdDrawing_2'
).
css
(
'transform'
,
'scale(1.2)'
);
if
(
!
type
)
{
// isActive
this
.
isActive
=
true
;
$
(
'.icon_size'
).
css
(
'background'
,
'rgba(5, 95, 231, 0.05)'
)
...
...
@@ -2007,7 +2064,7 @@ export default {
this
.
isShowsizeOptions
=
false
this
.
sizeChange
();
}
},
/**
* @description: 原图显示
...
...
@@ -2040,10 +2097,13 @@ export default {
});
$
(
'.tzdDrawing'
).
css
(
'transform'
,
'rotateX(0)'
)
$
(
'.tzdDrawing'
).
css
(
'transform'
,
'rotateY(0)'
)
// 特征点图层缩放设置为1
$
(
'.tzdDrawing'
).
css
(
'transform'
,
'scale(1)'
);
$
(
'.tzdDrawing_2'
).
css
(
'transform'
,
'scale(1)'
);
this
.
issize
=
true
this
.
ismoderate
=
false
if
(
!
type
)
{
if
(
!
type
)
{
// isActive
this
.
isActive
=
true
;
$
(
'.icon_size'
).
css
(
'background'
,
'rgba(5, 95, 231, 0.05)'
)
...
...
@@ -3016,10 +3076,10 @@ export default {
this
.
isActive
=
!
this
.
isActive
if
(
this
.
isActive
)
{
//重置图像大小,旋转方向的方法
if
(
this
.
xsType
==
'yuantu'
)
{
if
(
this
.
xsType
==
'yuantu'
)
{
this
.
OriginalChange
(
'yes'
);
this
.
issize
=
true
}
else
{
}
else
{
this
.
ModerateChange
(
'yes'
);
this
.
ismoderate
=
true
;
}
...
...
@@ -3028,6 +3088,7 @@ export default {
this
.
isShowsizeOptions
=
true
// 特征点图层缩放设置为1
$
(
'.tzdDrawing'
).
css
(
'transform'
,
'scale(1)'
);
$
(
'.tzdDrawing_2'
).
css
(
'transform'
,
'scale(1)'
);
// // 是否原尺寸同步
// this.isSizeSynchro = false
// 是否展示原尺寸同步下拉框
...
...
@@ -3435,8 +3496,8 @@ export default {
}
},
watch
:
{
isActive
(
val
)
{
if
(
val
==
false
)
{
isActive
(
val
)
{
if
(
val
==
false
)
{
this
.
isShowsizeOptions
=
false
;
}
},
...
...
@@ -3447,6 +3508,8 @@ export default {
let
canvasImage
=
this
.
imageEditor
.
_graphics
.
getCanvasImage
()
this
.
startPlace
=
newValue
;
$
(
'.tzdDrawing'
).
css
(
'transform'
,
`rotate(
${
canvasImage
.
angle
}
deg)`
)
// 特征点的图层也要跟着转
$
(
'.tzdDrawing'
).
css
(
"transform"
,
`rotate(
${
newValue
}
deg)`
)
},
inputRemoveWhiteRange
(
newValue
,
oldValue
)
{
this
.
imageEditor
.
applyFilter
(
'removeColor'
,
{
...
...
src/views/Editor/modules/imageEdAJ.vue
View file @
ee986d75
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-11-13 14:
37:32
* @LastEditTime: 2021-11-13 14:
49:54
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
...
...
@@ -2047,6 +2047,12 @@ export default {
}
px) scale(
${
self
.
zoomLevel
}
)`
);
$
(
".tzdDrawing_2"
).
css
(
"transform"
,
`translate(
${
Number
(
self
.
tzdDrawingLeft
)
+
(
x2
-
x1
)}
px,
${
Number
(
self
.
tzdDrawingTop
)
+
(
y2
-
y1
)
}
px) scale(
${
self
.
zoomLevel
}
)`
);
// $('.tzdDrawing').css('transform', `translate(${(originleft + (x2 - x1))/16}rem,${(origintop + (y2 - y1))/16}rem) scale(${self.zoomLevel})`)
}
// console.log(self.mouseEnlarge);
...
...
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