Skip to content

F
founder_vue
Commit fcde8163 by 米嘉伟
Options

Merge branch 'dev_zwpt' of http://47.92.108.28/changchao/founder_vue into dev_zwpt

parents e78075b1 d6c4c812
Showing with 151 additions and 18 deletions
public/image-edit/js/fabric-irregular.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
public/index.html
<!--
* @Author: your name
* @Date: 2021-09-07 09:58:13
* @LastEditTime: 2021-11-01 10:00:09
* @LastEditTime: 2021-11-03 20:21:15
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\public\index.html
......@@ -39,6 +39,7 @@
<script src="<%= BASE_URL %>image-edit/js/jquery.min.js"></script>
<script src="<%= BASE_URL %>image-edit/js/FileSaver.min.js"></script>
<script src="<%= BASE_URL %>image-edit/js/tui-image-editor.js"></script>
<script src="<%= BASE_URL %>image-edit/js/fabric-irregular.js"></script>
<!-- <script src="<%= BASE_URL %>image-edit/js/ui.js"></script>
<script src="<%= BASE_URL %>image-edit/js/action.js"></script> -->
<!-- <script src="<%= BASE_URL %>image-edit/js/service-basic.js"></script> -->
......
src/components/ImageEd.vue
<!--
* @Author: your name
* @Date: 2021-09-09 09:28:46
* @LastEditTime: 2021-10-30 13:41:22
* @LastEditTime: 2021-11-03 15:12:59
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\cxyrd\LTz.vue
......@@ -316,7 +316,7 @@
</div>
<!-- </el-tooltip> -->
<el-tooltip class="item" effect="dark" content="橡皮擦">
<div class="icon rubber">
<div class="icon rubber" @click="xpcChange">
<img src="../assets/img/zcedit/rubber.png" alt="">
</div>
</el-tooltip>
......@@ -1809,6 +1809,13 @@ export default {
},
methods: {
/**
* @description: 橡皮擦
* @param {*}
* @return {*}
*/
xpcChange() {
},
/**
* @description: 缩略图
* @param {*}
* @return {*}
......
src/views/Editor/modules/imageEd.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-11-03 10:18:04
* @LastEditTime: 2021-11-03 20:14:42
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -204,11 +204,11 @@
<div class="save-type-options" v-show="isShowSaveTypeOptions">
<div class="save-type-options-item" @click.stop="changeSaveType('当前特征')">
<div class="item-selected"><span v-show="saveType==='当前特征'">√</span></div>
<div class="item-name">当前特征</div>
<div class="item-name">当前指位特征</div>
</div>
<div class="save-type-options-item" @click.stop="changeSaveType('全部特征')">
<div class="item-selected"><span v-show="saveType==='全部特征'">√</span></div>
<div class="item-name">全部特征</div>
<div class="item-name">全部指位特征</div>
</div>
<div class="save-type-options-item" @click.stop="changeSaveType('当前特征和图片')">
<div class="item-selected"><span v-show="saveType==='当前特征和图片'">√</span></div>
......@@ -988,7 +988,7 @@ export default {
// imageEditor.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](function () { });
imageEditor.rotate(parseInt($inputRotationRange.val(), 10) - self.startPlace)
self.startPlace = self.inputRotationRange;
console.log(parseInt($inputRotationRange.val(), 10));
// console.log(parseInt($inputRotationRange.val(), 10));
// let deg = (parseInt($inputRotationRange.val(), 10) * 180) / Math.PI - 90
// imageEditor.rotate(deg)
};
......@@ -1004,7 +1004,7 @@ export default {
// imageEditor.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](function () { });
imageEditor.rotate(parseInt($inputRotationRange.val(), 10) - self.startPlace)
self.startPlace = self.inputRotationRange;
console.log(parseInt($inputRotationRange.val(), 10));
// console.log(parseInt($inputRotationRange.val(), 10));
// console.log(parseInt($inputRotationRange.val(), 10)); deg = (a * 180) / Math.PI - 90; //弧度转角度
// let deg = (parseInt($inputRotationRange.val(), 10) * 180) / Math.PI - 90
// imageEditor.rotate(deg)
......
src/views/Editor/modules/imageEdAJ.scss
......@@ -843,6 +843,19 @@ $directionRotate: var(--directionRotate, 0deg);
// transform-origin: $transOrigin;
// background-color: #999;
}
.irregular {
width: 640px;
height: 640px;
position: absolute;
background: transparent;
overflow: hidden;
transform-origin: 320px 320px;
}
/deep/.canvas-container {
position: absolute !important;
width: 640px !important;
height: 640px !important;
}
}
.zzwswitch {
position: absolute;
......
src/views/Editor/modules/imageEdAJ.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-11-02 21:17:11
* @LastEditTime: 2021-11-03 22:29:01
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -91,6 +91,7 @@
<img id="sourceImage" style="display:none" :src="'data:image/jpeg;base64,'+sourceImage" alt="">
</div>
<div class="tzdDrawing"></div>
<canvas :width="canvasWidth" :height="canvasHeight" class="irregular" id="irregular"></canvas>
</div>
<!-- 展示方向 -->
<div class="greendirection" v-show="isdirection">
......@@ -299,11 +300,11 @@
<div class="save-type-options" v-show="isShowSaveTypeOptions">
<div class="save-type-options-item" @click.stop="changeSaveType('当前特征')">
<div class="item-selected"><span v-show="saveType==='当前特征'">√</span></div>
<div class="item-name">当前特征</div>
<div class="item-name">当前序号特征</div>
</div>
<div class="save-type-options-item" @click.stop="changeSaveType('全部特征')">
<div class="item-selected"><span v-show="saveType==='全部特征'">√</span></div>
<div class="item-name">全部特征</div>
<div class="item-name">全部序号特征</div>
</div>
<div class="save-type-options-item" @click.stop="changeSaveType('当前特征和图片')">
<div class="item-selected"><span v-show="saveType==='当前特征和图片'">√</span></div>
......@@ -394,6 +395,8 @@ import MouseGesture from "./tzd_rotate.js";
export default {
data () {
return {
// 是否选择了自由绘制
isSelectedFreePaint: false,
// 是否选择了圆形绘制
isSelectedCirclePaint: false,
// 是否可以对指纹进行编辑
......@@ -1302,6 +1305,12 @@ export default {
originY: 'top'
}, true)
// 平移
Fcanvas.absolutePan({
x: -(originleft + ((x2 - x1) * self.newWidth / self.canvasWidth / self.zoomLevel)),
y: -(origintop + ((y2 - y1) * self.newHeight / self.canvasHeight / self.zoomLevel))
})
// console.log(imageEditor._graphics.getImageProperties());
// console.log(imageEditor._graphics.getCanvasImage());
......@@ -1333,6 +1342,18 @@ export default {
y: self.newHeight / 2,
zoomLevel: self.zoomLevel
})
// Fcanvas.absolutePan({ x: self.newWidth / 2, y: self.newHeight / 2 })
//计算缩放中心
var zoomPoint = new fabric.Point(Fcanvas.width / 2, Fcanvas.height / 2);
//开始缩放
Fcanvas.zoomToPoint(zoomPoint, self.zoomLevel);
// Fcanvas.setZoom(self.zoomLevel);
// Fcanvas.setWidth(self.newWidth*Fcanvas.getZoom())
// Fcanvas.setHeight(self.newHeight*Fcanvas.getZoom())
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
$('.tzdDrawing').css('transform', `scale(${self.zoomLevel})`)
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
......@@ -1350,6 +1371,19 @@ export default {
y: self.newHeight / 2,
zoomLevel: self.zoomLevel
})
// 平移
// Fcanvas.absolutePan({ x: self.newWidth / 2, y: self.newHeight / 2 })
//计算缩放中心
var zoomPoint = new fabric.Point(Fcanvas.width / 2, Fcanvas.height / 2);
//开始缩放
Fcanvas.zoomToPoint(zoomPoint, self.zoomLevel);
// Fcanvas.setZoom(self.zoomLevel);
// Fcanvas.setWidth(self.newWidth*Fcanvas.getZoom())
// Fcanvas.setHeight(self.newHeight*Fcanvas.getZoom())
// $('.tzdDom').css('z-index', `9999`)
// $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`)
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
......@@ -1493,6 +1527,62 @@ export default {
}
});
var Fcanvas = new fabric_irregular.Canvas("irregular");
var Fcanvasarr = [];
var Fcanvasline1 = [];
var findIndex = 0
// 去掉鼠标默认事件
$(".upper-canvas.irregular").bind("contextmenu", function (e) {
return false;
});
$(".upper-canvas.irregular").mousedown(function (e) {
if (self.isSelectedFreePaint) {
// console.log(e);
// 鼠标左击
if (e.which === 1) {
var object = Fcanvas.getActiveObject();
if (object) {
for (let i = 0; i < Fcanvasarr.length; i++) {
if (JSON.stringify(Fcanvasarr[i]) === JSON.stringify(object.points)) {
findIndex = i
}
}
Fcanvasarr.splice(findIndex, 1)
console.log(Fcanvasarr);
// console.log(object);
Fcanvas.remove(object);
return
}
Fcanvasline1.push({
x: e.offsetX,
y: e.offsetY,
});
}
// 鼠标右击
if (e.which === 3) {
console.log(Fcanvasline1);
var polygon = new fabric.Polygon(Fcanvasline1, {
// left: 100,
// top: 0,
fill: "rgba(0,0,0,0)",
strokeWidth: 4,
stroke: "red",
// scaleX: 4,
// scaleY: 4,
objectCaching: false,
transparentCorners: false,
cornerColor: "rgba(0,0,0,0)",
});
// Fcanvas.viewportTransform = [0.7, 0, 0, 0.7, -50, 50];
Fcanvas.add(polygon);
Fcanvasarr.push(Fcanvasline1)
Fcanvasline1 = []
}
}
});
// 角度
self.preangle = 0
var angle = 0
......@@ -2213,6 +2303,11 @@ export default {
this.isyxhz = !this.isyxhz
this.isShowzyhzOptions = false
this.isSelectedCirclePaint = !this.isSelectedCirclePaint
this.isSelectedFreePaint = false
// 提升层级
$('.canvas-container').css('z-index', 999)
$('.tzdDrawing').css('z-index', 9999)
},
/**
* @description: 切换自由绘制
......@@ -2220,8 +2315,14 @@ export default {
* @return {*}
*/
changezyhz () {
this.iszyhz = true
this.iszyhz = !this.iszyhz
this.isyxhz = false
this.isShowzyhzOptions = false
this.isSelectedFreePaint = !this.isSelectedFreePaint
this.isSelectedCirclePaint = false
// 提升层级
$('.canvas-container').css('z-index', 9999)
$('.tzdDrawing').css('z-index', 999)
},
/**
* @description: 开启/关闭自由绘制下拉框
......@@ -2293,9 +2394,9 @@ export default {
this.isBoldActiveIcon = false
this.isBoldActiveName = false
// 辅助线的id数组
this.lines = [],
// 是否点击了圆标记
this.isActive_circle = false
this.lines = []
// 是否点击了圆标记
this.isActive_circle = false
// 是否展示园标记弹出框
this.isCircleOptions = false
// 是否隐藏标记点
......@@ -2376,6 +2477,9 @@ export default {
this.isEnlarge = !this.isEnlarge
if (this.isEnlarge) {
$('.enlarge').css('background', '#055FE7')
// 提升层级
$('.canvas-container').css('z-index', 999)
$('.tzdDrawing').css('z-index', 9999)
this.imageEditor.changeCursor('zoom-in');
this.isShowEnlargeSynchro = true
this.isEnlargeSynchro = false
......@@ -2638,9 +2742,9 @@ export default {
this.isBoldActiveIcon = false
this.isBoldActiveName = false
// 辅助线的id数组
this.lines = [],
// 是否点击了圆标记
this.isActive_circle = false
this.lines = []
// 是否点击了圆标记
this.isActive_circle = false
// 是否展示园标记弹出框
this.isCircleOptions = false
// 是否隐藏标记点
......@@ -2726,10 +2830,18 @@ export default {
$('.drag').css('background', '#055FE7')
// 开启拖拽
this.imageEditor._graphics._attachZoomEvents2()
// 提升层级
$('.canvas-container').css('z-index', 999)
$('.tzdDrawing').css('z-index', 9999)
} else {
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
// 停止拖拽
this.imageEditor._graphics._attachZoomEvents3()
// 提升层级
$('.canvas-container').css('z-index', 999)
$('.tzdDrawing').css('z-index', 9999)
}
},
},
......
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