8 changed files with 998 additions and 94 deletions
-
1package.json
-
43src/api/area/index.js
-
9src/api/floor/index.js
-
BINsrc/assets/images/closed.png
-
667src/views/components/mark.vue
-
165src/views/visualCheck/venueDevice/area/index.vue
-
188src/views/visualCheck/venueDevice/device/index.vue
-
19src/views/visualCheck/venueDevice/floor/index.vue
@ -0,0 +1,43 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
export function add(data) { |
|||
return request({ |
|||
url: 'api/libraryRegion/editLibraryRegion', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
export function edit(data) { |
|||
return request({ |
|||
url: 'api/libraryRegion/editLibraryRegion', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
export function del(ids) { |
|||
return request({ |
|||
url: 'api/libraryRegion/delLibraryRegion', |
|||
method: 'post', |
|||
data: ids |
|||
}) |
|||
} |
|||
|
|||
export function sort(parameter) { |
|||
return request({ |
|||
url: 'api/libraryRegion/libraryRegionSort', |
|||
method: 'post', |
|||
data: parameter |
|||
}) |
|||
} |
|||
|
|||
export function saveLibraryRegionSignPoint(parameter) { |
|||
return request({ |
|||
url: 'api/libraryRegion/saveLibraryRegionSignPoint', |
|||
method: 'post', |
|||
data: parameter |
|||
}) |
|||
} |
|||
|
|||
export default { add, edit, del, sort, saveLibraryRegionSignPoint } |
|||
|
After Width: 30 | Height: 30 | Size: 1.5 KiB |
@ -0,0 +1,667 @@ |
|||
<template> |
|||
<div class="mark-handle"> |
|||
<div class="mark-img"> |
|||
<!-- <img :src="imageFloorUrl" :onerror="defaultImg" alt=""> --> |
|||
<canvas id="canvas" :width="width" :height="height" /> |
|||
</div> |
|||
<div class="mark-right"> |
|||
<ul class="mark-info"> |
|||
<li> |
|||
<p>所属机构</p> |
|||
<span>{{ user.fonds.fondsName }}</span> |
|||
</li> |
|||
<li> |
|||
<p>所属楼层</p> |
|||
<span>{{ currentMarkData && currentMarkData.floorName }}</span> |
|||
</li> |
|||
<li> |
|||
<p>书架</p> |
|||
<span>{{ currentMarkData && currentMarkData.booksheflCount }}</span> |
|||
</li> |
|||
<li><span :class="['row-state', currentMarkData && currentMarkData.signPoint ? 'end-state' : 'cancel-state' ]">{{ currentMarkData && currentMarkData.signPoint ? '已标注': '未标注' }}</span></li> |
|||
</ul> |
|||
<div class="mark-button"> |
|||
<el-button type="primary" :disabled="!isDrawing" @click="clean"><i class="iconfont icon-shanchu" />清空</el-button> |
|||
<el-button type="primary" :disabled="isDrawing" @click="drawPolygon"><i class="el-icon-edit" style="font-weight: bold; padding-right: 4px; font-size: 16px;" />标注</el-button> |
|||
<el-button type="primary" :disabled="!isDrawing" @click="submitDraw"><i class="el-icon-folder-checked" style="font-weight: bold; padding-right: 4px; font-size: 16px;" />保存</el-button> |
|||
</div> |
|||
</div> |
|||
<img id="expImg" :src="imageFloorUrl"> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { saveLibraryRegionSignPoint } from '@/api/area/index' |
|||
import { fabric } from 'fabric' |
|||
import { mapGetters } from 'vuex' |
|||
export default { |
|||
name: 'Mark', |
|||
props: { |
|||
currentMarkData: { |
|||
type: Object, |
|||
require: true, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
imageFloorUrl: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
bgImgFlag: true, |
|||
bgImgSrc: this.imageFloorUrl, |
|||
width: 900, |
|||
height: 600, |
|||
canvas: {}, |
|||
mouseFrom: {}, |
|||
mouseTo: {}, |
|||
drawWidth: 2, // 笔触宽度 |
|||
drawingObject: null, // 当前绘制对象 |
|||
moveCount: 1, // 绘制移动计数器 |
|||
doDrawing: false, // 绘制状态 |
|||
// polygon 相关参数 |
|||
polygonMode: false, |
|||
pointArray: [], |
|||
lineArray: [], |
|||
savePointsGroup: [], |
|||
activeShape: false, |
|||
activeLine: '', |
|||
line: {}, |
|||
deleteIconURL: require('@/assets/images/closed.png'), |
|||
drawinfo: null, |
|||
isDrawing: false |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'user', |
|||
'baseApi' |
|||
]) |
|||
}, |
|||
watch: { |
|||
width() { |
|||
this.canvas.setWidth(this.width) |
|||
}, |
|||
height() { |
|||
this.canvas.setHeight(this.height) |
|||
}, |
|||
currentMarkData(newVal) { |
|||
if (newVal) { |
|||
// console.log(newVal.signPoint) |
|||
// if (newVal.signPoint !== null) { |
|||
// this.drawinfo = JSON.parse(newVal.signPoint) |
|||
// } else { |
|||
// this.drawinfo = null |
|||
// } |
|||
this.initCanvas() |
|||
} |
|||
}, |
|||
imageFloorUrl(newVal) { |
|||
if (newVal) { |
|||
console.log('newVal', newVal) |
|||
this.isDrawing = false |
|||
this.bgImgFlag = true |
|||
const imgElement = document.getElementById('expImg') |
|||
imgElement.src = this.imageFloorUrl |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.initCanvas() |
|||
}, |
|||
methods: { |
|||
initCanvas() { |
|||
if (this.currentMarkData && (this.currentMarkData.signPoint !== '' || this.currentMarkData.signPoint !== null)) { |
|||
this.drawinfo = JSON.parse(this.currentMarkData.signPoint) |
|||
} else { |
|||
this.drawinfo = null |
|||
} |
|||
this.canvas = new fabric.Canvas('canvas', { |
|||
skipTargetFind: false, // 当为真时，跳过目标检测。目标检测将返回始终未定义。点击选择将无效 |
|||
selectable: false, // 为false时，不能选择对象进行修改 |
|||
selection: false // 是否可以多个对象为一组 |
|||
}) |
|||
this.canvas.selectionColor = 'rgba(0,0,0,0.05)' |
|||
this.canvas.on('mouse:down', this.mousedown) |
|||
this.canvas.on('mouse:move', this.mousemove) |
|||
this.canvas.on('object:moving', this.objectMoving) |
|||
// this.canvas.on('mouse:wheel', this.mouse) |
|||
// this.$nextTick(() => { |
|||
// console.log(this.drawinfo) |
|||
if (this.drawinfo) { |
|||
this.loadDraw() |
|||
this.canvas.on('mouse:wheel', this.mouse) |
|||
} else { |
|||
this.loadExpImg() |
|||
} |
|||
// }) |
|||
}, |
|||
// 从已渲染的DOM元素加载图片至canvas |
|||
loadExpImg() { |
|||
const imgElement = document.getElementById('expImg') |
|||
const newWidth = this.canvas.width |
|||
imgElement.onload = () => { |
|||
const newHeight = newWidth / (imgElement.width / imgElement.height) |
|||
new fabric.Image.fromURL( |
|||
imgElement.src, |
|||
(img) => { |
|||
img.set( |
|||
{ |
|||
originX: 'center', |
|||
originY: 'center', |
|||
scaleX: newWidth / imgElement.width, |
|||
scaleY: newHeight / imgElement.height |
|||
}, |
|||
{ crossOrigin: 'anonymous' } |
|||
) |
|||
img.on('scaling', (e) => { |
|||
// 拉伸事件 |
|||
const h = img.scaleY |
|||
const w = img.scaleX |
|||
if (h !== w || w === h) { |
|||
// 判断缩放值相等或不相等后执行图片等比缩放 |
|||
if (e.e.movementY === -1 || e.e.movementY === 1) { |
|||
img.scale(h) // 缩放 |
|||
} else { |
|||
img.scale(w) |
|||
} |
|||
} |
|||
}) |
|||
img.setCoords() |
|||
img.centeredScaling = true |
|||
img.centerTransform = true |
|||
this.canvas.add(img) |
|||
this.canvas.centerObject(img) |
|||
this.canvas.renderAll() |
|||
}, |
|||
{ |
|||
selectable: true, |
|||
hasControls: true, |
|||
lockRotation: true, // 禁止旋转 |
|||
centeredScaling: true, |
|||
zIndex: -99, |
|||
isBgImg: true |
|||
} |
|||
) |
|||
} |
|||
}, |
|||
// 对象移动时的事件处理 |
|||
objectMoving(e) { |
|||
const target = e.target |
|||
if (target.type === 'polygon') { |
|||
target.setCoords() |
|||
// 更新params.pointInfo以确保点信息是最新的 |
|||
// const points = target.points.map(p => ({ |
|||
// x: p.x + target.left, |
|||
// y: p.y + target.top |
|||
// })); |
|||
// const index = params.pointInfo.findIndex(info => info.pointInfo[0].x === target.points[0].x && info.pointInfo[0].y === target.points[0].y); |
|||
// if (index !== -1) { |
|||
// params.pointInfo[index] = { pointInfo: points }; |
|||
// } else { |
|||
// params.pointInfo.push({ pointInfo: points }); |
|||
// } |
|||
} |
|||
}, |
|||
submitDraw() { |
|||
const saveCanvasData = { |
|||
pointInfo: [], |
|||
imgInfo: '' |
|||
// img: '' |
|||
} |
|||
this.canvas |
|||
.toJSON(['isBgImg']) |
|||
.objects.forEach((item) => { |
|||
const element = { |
|||
pointInfo: '' |
|||
} |
|||
if (item?.points) { |
|||
element.pointInfo = item.points |
|||
saveCanvasData.pointInfo.push(element) |
|||
} |
|||
if (item.isBgImg) { |
|||
saveCanvasData.imgInfo = item |
|||
// params.img = item.src |
|||
delete saveCanvasData.imgInfo.src |
|||
} |
|||
}) |
|||
console.log('saveCanvasData', saveCanvasData) |
|||
|
|||
const params = { |
|||
'id': this.currentMarkData.id, |
|||
'signPoint': JSON.stringify(saveCanvasData) |
|||
} |
|||
console.log('params', params) |
|||
saveLibraryRegionSignPoint(params).then(res => { |
|||
console.log(res) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 鼠标按下时触发 |
|||
mousedown(e) { |
|||
if (e === undefined) return |
|||
// 记录鼠标按下时的坐标 |
|||
const xy = |
|||
e.pointer || this.transformMouse(e.e.offsetX, e.e.offsetY) |
|||
this.mouseFrom.x = xy.x |
|||
this.mouseFrom.y = xy.y |
|||
this.doDrawing = true |
|||
|
|||
this.canvas.skipTargetFind = false |
|||
try { |
|||
// 判断是否闭合多边形，点击红点时闭合多边形 |
|||
if (this.pointArray.length > 1) { |
|||
// e.target.id == this.pointArray[0].id 表示点击了初始红点 |
|||
if (e.target && e.target.id === this.pointArray[0].id) { |
|||
this.generatePolygon() |
|||
console.log('画完') |
|||
console.log('this.pointArray', this.pointArray) |
|||
this.isDrawing = true |
|||
return |
|||
} else { |
|||
console.log('未画完') |
|||
this.isDrawing = false |
|||
} |
|||
} |
|||
// 未点击红点即闭合点则继续作画 |
|||
if (this.polygonMode) { |
|||
console.log('作画') |
|||
this.addPoint(e) |
|||
} |
|||
} catch (error) { |
|||
console.log(error) |
|||
} |
|||
}, |
|||
// 鼠标松开执行 |
|||
mouseup(e) { |
|||
if (e === undefined) return |
|||
const xy = |
|||
e.pointer || this.transformMouse(e.e.offsetX, e.e.offsetY) |
|||
this.mouseTo.x = xy.x |
|||
this.mouseTo.y = xy.y |
|||
this.drawingObject = null |
|||
this.moveCount = 1 |
|||
|
|||
// 如果当前操作的是多边形，更新坐标 |
|||
if (this.activeShape && this.activeShape.type === 'polygon') { |
|||
this.activeShape.setCoords() |
|||
} |
|||
}, |
|||
// 鼠标滚轮放大缩小 |
|||
mouse(e) { |
|||
if (undefined === e) return |
|||
let zoom = (e.e.deltaY > 0 ? -0.1 : 0.1) + this.canvas.getZoom() |
|||
zoom = Math.max(0.8, zoom) |
|||
// 最小为原来的1/10 |
|||
zoom = Math.min(3, zoom) |
|||
// 最大是原来的3倍 |
|||
const zoomPoint = new fabric.Point(e.e.pageX, e.e.pageY) |
|||
this.canvas.zoomToPoint(zoomPoint, zoom) |
|||
}, |
|||
// 鼠标移动过程中已经完成了绘制 |
|||
mousemove(e) { |
|||
if (e === undefined) return |
|||
if (this.moveCount % 2 === 0 && !this.doDrawing) { |
|||
// 减少绘制频率 |
|||
return |
|||
} |
|||
this.moveCount++ |
|||
const xy = |
|||
e.pointer || this.transformMouse(e.e.offsetX, e.e.offsetY) |
|||
this.mouseTo.x = xy.x |
|||
this.mouseTo.y = xy.y |
|||
if (this.activeLine && this.activeLine.class === 'line') { |
|||
const pointer = this.canvas.getPointer(e.e) |
|||
this.activeLine.set({ |
|||
x2: pointer.x, |
|||
y2: pointer.y |
|||
}) |
|||
const points = this.activeShape.get('points') |
|||
points.push({ |
|||
x: pointer.x, |
|||
y: pointer.y, |
|||
zIndex: 1 |
|||
}) |
|||
this.activeShape.set({ |
|||
points: points |
|||
}) |
|||
this.canvas.renderAll() |
|||
} |
|||
}, |
|||
// 从画布中删除当前选中的对象 |
|||
deleteObj() { |
|||
const activeObjects = this.canvas.getActiveObjects() |
|||
if (activeObjects.length > 0) { |
|||
activeObjects.forEach((item) => { |
|||
this.canvas.remove(item) |
|||
}) |
|||
this.canvas.renderAll() |
|||
} |
|||
}, |
|||
// 转换鼠标坐标 |
|||
transformMouse(mouseX, mouseY) { |
|||
return { |
|||
x: mouseX, |
|||
y: mouseY |
|||
} |
|||
}, |
|||
// 绘制多边形开始 |
|||
drawPolygon() { |
|||
if (this.bgImgFlag) { |
|||
this.canvas.getObjects().forEach((obj) => { |
|||
if (obj.isBgImg) { |
|||
obj.hasControls = false |
|||
obj.selectable = false |
|||
obj.evented = false |
|||
} |
|||
}) |
|||
this.bgImgFlag = false |
|||
this.canvas.renderAll() |
|||
} |
|||
this.polygonMode = true |
|||
this.pointArray = [] // 顶点集合 |
|||
this.lineArray = [] // 线集合 |
|||
this.canvas.isDrawingMode = false |
|||
}, |
|||
addPoint(e) { |
|||
const random = Math.floor(Math.random() * 10000) |
|||
const id = new Date().getTime() + random |
|||
const circle = new fabric.Circle({ |
|||
radius: 5, |
|||
fill: '#ffffff', |
|||
stroke: '#333333', |
|||
strokeWidth: 0.5, |
|||
left: (e.pointer?.x || e.e.layerX) / this.canvas.getZoom(), |
|||
top: (e.pointer?.y || e.e.layerY) / this.canvas.getZoom(), |
|||
selectable: false, |
|||
hasBorders: false, |
|||
hasControls: false, |
|||
originX: 'center', |
|||
originY: 'center', |
|||
id, |
|||
objectCaching: false |
|||
}) |
|||
if (this.pointArray.length === 0) { |
|||
circle.set({ fill: 'rgba(196,43, 1, 1)' }) |
|||
} |
|||
const points = [ |
|||
(e.pointer?.x || e.e.layerX) / this.canvas.getZoom(), |
|||
(e.pointer?.y || e.e.layerY) / this.canvas.getZoom(), |
|||
(e.pointer?.x || e.e.layerX) / this.canvas.getZoom(), |
|||
(e.pointer?.y || e.e.layerY) / this.canvas.getZoom() |
|||
] |
|||
const line = new fabric.Line(points, { |
|||
strokeWidth: 2, |
|||
fill: 'rgba(196,43, 1, 1)', |
|||
stroke: 'rgba(196,43, 1, 1)', |
|||
class: 'line', |
|||
originX: 'center', |
|||
originY: 'center', |
|||
selectable: false, |
|||
hasBorders: false, |
|||
hasControls: false, |
|||
evented: false, |
|||
objectCaching: false |
|||
}) |
|||
if (this.activeShape) { |
|||
const pos = this.canvas.getPointer(e.e) |
|||
const points = this.activeShape.get('points') |
|||
points.push({ x: pos.x, y: pos.y }) |
|||
const polygon = new fabric.Polygon(points, { |
|||
stroke: '#333333', |
|||
strokeWidth: 1, |
|||
fill: 'rgba(196,43, 1, 0.3)', |
|||
opacity: 0.3, |
|||
selectable: false, |
|||
hasBorders: false, |
|||
hasControls: false, |
|||
evented: false, |
|||
objectCaching: false |
|||
}) |
|||
this.canvas.remove(this.activeShape) |
|||
this.canvas.add(polygon) |
|||
this.activeShape = polygon |
|||
this.canvas.renderAll() |
|||
} else { |
|||
const polyPoint = [ |
|||
{ |
|||
x: (e.pointer?.x || e.e.layerX) / this.canvas.getZoom(), |
|||
y: (e.pointer?.y || e.e.layerY) / this.canvas.getZoom() |
|||
} |
|||
] |
|||
const polygon = new fabric.Polygon(polyPoint, { |
|||
stroke: '#333333', |
|||
strokeWidth: 1, |
|||
fill: '#cccccc', |
|||
opacity: 0.3, |
|||
selectable: false, |
|||
hasBorders: false, |
|||
hasControls: false, |
|||
evented: false, |
|||
objectCaching: false |
|||
}) |
|||
this.activeShape = polygon |
|||
this.canvas.add(polygon) |
|||
} |
|||
this.activeLine = line |
|||
this.pointArray.push(circle) |
|||
this.lineArray.push(line) |
|||
this.canvas.add(line) |
|||
this.canvas.add(circle) |
|||
}, |
|||
generatePolygon() { |
|||
const points = [] |
|||
this.pointArray.forEach((point) => { |
|||
points.push({ x: point.left, y: point.top }) |
|||
this.canvas.remove(point) |
|||
}) |
|||
this.lineArray.forEach((line) => { |
|||
this.canvas.remove(line) |
|||
}) |
|||
if (this.activeShape) { |
|||
this.canvas.remove(this.activeShape) |
|||
} |
|||
if (this.activeLine) { |
|||
this.canvas.remove(this.activeLine) |
|||
} |
|||
|
|||
const polygon = new fabric.Polygon(points, { |
|||
stroke: 'rgba(196,43, 1, 1)', |
|||
strokeWidth: this.drawWidth, |
|||
fill: 'rgba(196,43, 1, 0.3)', |
|||
opacity: 1, |
|||
selectable: false, |
|||
hasBorders: false, |
|||
hasControls: false, |
|||
name: '测试架号name1' |
|||
}) |
|||
|
|||
let maxIndex = 0 |
|||
this.canvas._objects.forEach((obj) => { |
|||
if (obj.index > maxIndex) maxIndex = obj.index |
|||
}) |
|||
polygon.index = maxIndex + 1 |
|||
this.canvas.add(polygon) |
|||
|
|||
this.activeLine = null |
|||
this.activeShape = null |
|||
this.polygonMode = false |
|||
this.doDrawing = false |
|||
fabric.Image.fromURL(this.deleteIconURL, this.deletecallback) |
|||
}, |
|||
// 从画布中删除当前选中的对象 |
|||
deleteObject() { |
|||
const activeObject = this.canvas.getActiveObject() |
|||
if (activeObject) { |
|||
this.canvas._objects.forEach(item => { |
|||
if (item.index === activeObject.index) { |
|||
this.canvas.remove(item) |
|||
} |
|||
}) |
|||
|
|||
const onlyBgImgItems = this.canvas._objects.filter(item => item.isBgImg) |
|||
const allItemsAreBgImg = this.canvas._objects.length / 2 === onlyBgImgItems.length |
|||
console.log('allItemsAreBgImg', allItemsAreBgImg) |
|||
|
|||
if (allItemsAreBgImg) { |
|||
this.canvas.clear() |
|||
this.bgImgFlag = true |
|||
const imgElement = document.getElementById('expImg') |
|||
imgElement.src = this.imageFloorUrl |
|||
this.loadExpImg() |
|||
} |
|||
|
|||
this.canvas.remove(activeObject) |
|||
this.canvas.renderAll() |
|||
} else { |
|||
console.log('this.canvas._objects.length', this.canvas._objects.length) |
|||
} |
|||
}, |
|||
// 渲染删除按钮 |
|||
async deletecallback(img) { |
|||
const self = this |
|||
let max = 0 |
|||
for (let i = 1; i < this.canvas._objects.length; i++) { |
|||
if (this.canvas._objects[i].index > max) max = this.canvas._objects[i].index |
|||
} |
|||
img.index = max |
|||
const oImg = await img.set({ |
|||
name: 'delete-btn', |
|||
left: this.pointArray[0].left - 20, |
|||
top: this.pointArray[0].top - 20, |
|||
width: 40, |
|||
height: 40, |
|||
angle: 0 |
|||
}).scale(0.8) |
|||
this.canvas.add(oImg).renderAll() |
|||
this.canvas.setActiveObject(oImg) |
|||
oImg.on('mousedown', function() { |
|||
self.deleteObject() |
|||
}) |
|||
}, |
|||
// 回显详情信息 |
|||
loadDraw() { |
|||
const self = this |
|||
if (this.drawinfo.id === '') return |
|||
// const pointGroup = JSON.parse(self.drawinfo.pointInfo); |
|||
// const imgInfo = JSON.parse(self.drawinfo.imgInfo); |
|||
const pointGroup = self.drawinfo.pointInfo |
|||
const imgInfo = self.drawinfo.imgInfo |
|||
// self.imageFloorUrl = self.drawinfo.img |
|||
imgInfo.src = self.imageFloorUrl |
|||
|
|||
// 加载底图 |
|||
fabric.util.enlivenObjects([imgInfo], objects => { |
|||
objects.forEach(o => { |
|||
o.selectable = false |
|||
o.hasControls = false |
|||
o.centeredScaling = false |
|||
this.canvas.add(o) |
|||
}) |
|||
// 处理多边形绘制回显操作 |
|||
pointGroup.forEach(async(item, index) => { |
|||
if (item.pointInfo !== '') { |
|||
const polygon = new fabric.Polygon(item.pointInfo, { |
|||
name: item.name, |
|||
stroke: 'rgba(196,43, 1, 1)', |
|||
strokeWidth: self.drawWidth, |
|||
fill: 'rgba(196,43, 1, 0.3)', |
|||
opacity: 1, |
|||
selectable: false, |
|||
hasBorders: false, |
|||
hasControls: false, |
|||
originX: 'left', // 设置原点为左上角 |
|||
originY: 'top' // 设置原点为左上角 |
|||
}) |
|||
polygon.index = index |
|||
|
|||
self.canvas.add(polygon) |
|||
self.activeLine = null |
|||
self.activeShape = null |
|||
self.polygonMode = false |
|||
self.doDrawing = false |
|||
|
|||
polygon.on('mousedown', function(e) { |
|||
console.log('Rect ' + (index + 1) + ' clicked', e) |
|||
console.log('e.target.name', e.target.name) |
|||
}) |
|||
|
|||
polygon.on('mouseover', function(e) { |
|||
console.log('e', e) |
|||
console.log('e.target', e.target) |
|||
console.log('e.target.name', e.target.name) |
|||
// var delta = new fabric.Point(e.e.movementX, e.e.movementY) |
|||
// if(e.target&&e.target.name){ |
|||
// // that.showDialog(e.target.name) |
|||
// } |
|||
this.set({ opacity: 0.3, hoverCursor: 'pointer' }) |
|||
this.canvas.renderAll() |
|||
}) |
|||
|
|||
// 监听鼠标移出事件 |
|||
polygon.on('mouseout', function() { |
|||
this.set({ opacity: 1 }) |
|||
this.canvas.renderAll() |
|||
}) |
|||
|
|||
// if (!self.readstate) { |
|||
// fabric.Image.fromURL(self.deleteIconURL, async img => { |
|||
// const _self = this; |
|||
// img.index = index; |
|||
// const oImg = await img.set({ |
|||
// name: 'delete-btn', |
|||
// left: item.pointInfo[0].x - 20, |
|||
// top: item.pointInfo[0].y - 20, |
|||
// width: 40, |
|||
// height: 40, |
|||
// angle: 0 |
|||
// }).scale(0.8); |
|||
// this.canvas.add(oImg); |
|||
// oImg.on('mousedown', function() { |
|||
// _self.deleteObject(); |
|||
// }); |
|||
// }); |
|||
// } |
|||
} |
|||
}) |
|||
}) |
|||
self.canvas.renderAll() |
|||
}, |
|||
// 清除画布 |
|||
clean() { |
|||
this.$confirm('确认清空标注吗？', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.canvas.clear() |
|||
// 移除所有非背景图对象和删除按钮 |
|||
// this.canvas._objects = this.canvas._objects.filter((item) => { |
|||
// return item.isBgImg; |
|||
// }); |
|||
// 重新渲染画布 |
|||
// this.canvas.renderAll(); |
|||
this.isDrawing = false |
|||
this.bgImgFlag = true |
|||
const imgElement = document.getElementById('expImg') |
|||
imgElement.src = this.imageFloorUrl |
|||
this.loadExpImg() |
|||
}).catch(() => { |
|||
console.log('取消清空标注') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
#expImg{ |
|||
display: none; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue