645 lines
17 KiB
Vue
645 lines
17 KiB
Vue
<template>
|
||
<view class="simple-image-annotator">
|
||
<view class="fixedheader">
|
||
<headers :showBack="true" :themeType="true">
|
||
<view class="headerName">
|
||
{{form.drawingName}}
|
||
</view>
|
||
</headers>
|
||
</view>
|
||
<view class="controls" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
|
||
<!-- 只有在编辑模式下才显示操作按钮 -->
|
||
<!-- <view v-if="viewMode === 'edit'">
|
||
<button class="control-btn" :class="{ active: mode === 'add' }" @click="setAddMode">
|
||
新增点位
|
||
</button>
|
||
<button class="control-btn delete-btn" :class="{ active: mode === 'delete' }" @click="setDeleteMode">
|
||
删除点位
|
||
</button>
|
||
</view> -->
|
||
</view>
|
||
<view class="image-container" ref="imageContainer">
|
||
<image class="my-image" ref="image" :src="imagePath" alt="标注图片" mode="aspectFit" @load="handleImageLoad"
|
||
@tap="handleImageClick" />
|
||
<view class="annotation-layer" ref="annotationLayer">
|
||
<view v-for="point in points" :key="point.id" class="annotation-point" :style="{
|
||
left: calculatePointPosition(point, 'x') + 'px',
|
||
top: calculatePointPosition(point, 'y') + 'px'
|
||
}" @tap.stop="handlePointClick(point.id)" @longpress.stop="handleRightClick(point.id)">
|
||
<view class="bubble" @click="deletePoint(point.id)" v-if="point.isShow">
|
||
删除
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-tip" v-if="viewMode === 'edit'">
|
||
如需修改检查位置需先点击此位置删除，然后重新定位位置
|
||
</view>
|
||
<view class="confrim-btn" v-if="viewMode === 'edit'">
|
||
<view @click="onCancelClick">取消</view>
|
||
<view @click="onSubmitType">保存</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'SimpleImageAnnotator',
|
||
data() {
|
||
return {
|
||
points: [],
|
||
imageNaturalWidth: 0,
|
||
imageNaturalHeight: 0,
|
||
containerWidth: 0,
|
||
containerHeight: 0,
|
||
scale: 1,
|
||
mode: 'add', // 默认模式为新增点位
|
||
form: {},
|
||
imagePath: "",
|
||
viewMode: "edit",
|
||
mobileTopHeight: 0,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initContainerSize()
|
||
window.addEventListener('resize', this.handleResize)
|
||
// 初始化时根据viewMode设置mode
|
||
if (this.viewMode === 'detail') {
|
||
this.mode = 'detail'
|
||
}
|
||
},
|
||
onLoad(opts) {
|
||
console.log(opts);
|
||
this.points = JSON.parse(opts.drawingPointData).map(item => {
|
||
// 确保点位对象包含必要的属性，为旧数据添加默认值
|
||
return {
|
||
...item,
|
||
isShow: false,
|
||
platform: item.platform || 'unknown',
|
||
originalImageWidth: item.originalImageWidth || 0,
|
||
originalImageHeight: item.originalImageHeight || 0,
|
||
// 保存原始坐标用于后续计算
|
||
originalX: item.x,
|
||
originalY: item.y
|
||
};
|
||
});
|
||
if (opts.viewMode) {
|
||
this.viewMode = opts.viewMode;
|
||
}
|
||
this.getQualityRegionConstructionDrawById(opts.regionDrawId);
|
||
},
|
||
mounted() {
|
||
const that = this;
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
||
}
|
||
})
|
||
this.initContainerSize()
|
||
window.addEventListener('resize', this.handleResize)
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener('resize', this.handleResize)
|
||
},
|
||
methods: {
|
||
onCancelClick() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
onSubmitType() {
|
||
if(this.points.length == 0) {
|
||
uni.showToast({
|
||
title: '请至少选择一个点位！',
|
||
icon: "none",
|
||
});
|
||
return
|
||
}
|
||
uni.$emit('updateData', JSON.stringify(this.points))
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
getQualityRegionConstructionDrawById(regionDrawId) {
|
||
this.sendRequest({
|
||
url: 'xmgl/qualityRegionConstructionDraw/queryById',
|
||
method: 'get',
|
||
data: {
|
||
projectSn: this.projectSn,
|
||
id: regionDrawId,
|
||
},
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
const data = res.result;
|
||
this.imagePath = this.url_config + 'image/' + data.fileUrl;
|
||
this.form.drawingName = data.drawingName;
|
||
this.resetViewer()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 初始化容器大小
|
||
initContainerSize() {
|
||
if (this.$refs.imageContainer) {
|
||
// 在uni-app中使用uni.createSelectorQuery获取元素尺寸
|
||
uni.createSelectorQuery().in(this)
|
||
.select('.image-container')
|
||
.boundingClientRect(res => {
|
||
if (res) {
|
||
this.containerWidth = res.width
|
||
this.containerHeight = res.height
|
||
|
||
// 如果图片已经加载，重新计算缩放
|
||
if (this.imageNaturalWidth && this.imageNaturalHeight) {
|
||
this.calculateScale()
|
||
}
|
||
}
|
||
}).exec()
|
||
}
|
||
},
|
||
|
||
// 处理窗口大小变化
|
||
handleResize() {
|
||
this.initContainerSize()
|
||
},
|
||
|
||
// 处理图片加载
|
||
handleImageLoad(event) {
|
||
// 在uni-app中使用宽高比计算
|
||
const {
|
||
width,
|
||
height
|
||
} = event.detail;
|
||
|
||
// 不使用原始宽度，而是获取图片的实际渲染尺寸
|
||
uni.createSelectorQuery().in(this)
|
||
.select('.image-container .my-image')
|
||
.boundingClientRect(imgRes => {
|
||
console.log(6666, imgRes)
|
||
if (imgRes) {
|
||
// 使用图片的实际渲染宽度和高度
|
||
this.imageNaturalWidth = imgRes.width
|
||
this.imageNaturalHeight = imgRes.height
|
||
console.log(`使用实际渲染尺寸: ${this.imageNaturalWidth}x${this.imageNaturalHeight}`)
|
||
this.calculateScale()
|
||
} else {
|
||
// 降级方案，如果获取不到实际渲染尺寸，则使用原始尺寸
|
||
this.imageNaturalWidth = width
|
||
this.imageNaturalHeight = height
|
||
this.calculateScale()
|
||
}
|
||
})
|
||
.exec()
|
||
},
|
||
|
||
// 计算缩放比例
|
||
calculateScale() {
|
||
if (!this.imageNaturalWidth || !this.imageNaturalHeight || !this.$refs.image || !this.$refs
|
||
.annotationLayer) {
|
||
return
|
||
}
|
||
|
||
// 在uni-app中使用动态计算
|
||
uni.createSelectorQuery().in(this)
|
||
.select('.image-container')
|
||
.boundingClientRect(containerRes => {
|
||
if (!containerRes) return
|
||
|
||
uni.createSelectorQuery().in(this)
|
||
.select('.image-container image')
|
||
.boundingClientRect(imgRes => {
|
||
if (!imgRes) return
|
||
|
||
// 计算实际显示的缩放比例
|
||
this.scale = imgRes.width / this.imageNaturalWidth
|
||
console.log(`计算缩放比例: 图片尺寸(${this.imageNaturalWidth}x${this.imageNaturalHeight}), 显示尺寸(${imgRes.width}x${imgRes.height}), 缩放比例: ${this.scale}`)
|
||
|
||
// 直接将标注层与图片完全重叠
|
||
const layer = this.$refs.annotationLayer
|
||
layer.style.width = imgRes.width + 'px'
|
||
layer.style.height = imgRes.height + 'px'
|
||
layer.style.left = (containerRes.width - imgRes.width) / 2 + 'px'
|
||
layer.style.top = (containerRes.height - imgRes.height) / 2 + 'px'
|
||
|
||
// 更新所有点位位置
|
||
this.$nextTick(() => {
|
||
this.updateAllPointsPosition();
|
||
});
|
||
})
|
||
.exec()
|
||
}).exec()
|
||
},
|
||
|
||
// 处理图片点击事件
|
||
handleImageClick(event) {
|
||
// 只有在编辑模式且为新增模式时才允许添加点位
|
||
if (this.viewMode === 'edit' && this.mode === 'add') {
|
||
// 在uni-app中获取点击位置
|
||
const {
|
||
x,
|
||
y
|
||
} = event.detail
|
||
|
||
// 获取标注层位置信息
|
||
uni.createSelectorQuery().in(this)
|
||
.select('.annotation-layer')
|
||
.boundingClientRect(layerRes => {
|
||
if (!layerRes) return
|
||
|
||
// 计算相对位置
|
||
const relX = (x - layerRes.left) / this.scale
|
||
const relY = (y - layerRes.top) / this.scale
|
||
this.addPoint(relX, relY)
|
||
})
|
||
.exec()
|
||
}
|
||
// 删除模式或详情模式下，点击图片空白区域不执行操作
|
||
},
|
||
|
||
// 生成唯一ID
|
||
generateUniqueId() {
|
||
return Date.now() + '_' + Math.floor(Math.random() * 10000)
|
||
},
|
||
|
||
// 添加标注点
|
||
addPoint(x, y) {
|
||
console.log('Adding point at:', x, y)
|
||
console.log(this.imageNaturalWidth, this.imageNaturalHeight)
|
||
// 确保坐标在有效范围内
|
||
const validX = Math.max(0, Math.min(x, this.imageNaturalWidth))
|
||
const validY = Math.max(0, Math.min(y, this.imageNaturalHeight))
|
||
console.log('Valid X, Y:', validX, validY)
|
||
const newPoint = {
|
||
id: this.generateUniqueId(),
|
||
x: validX,
|
||
y: validY,
|
||
isShow: false,
|
||
originalImageWidth: this.imageNaturalWidth, // 记录点位创建时的图片宽度
|
||
originalImageHeight: this.imageNaturalHeight // 记录点位创建时的图片高度
|
||
}
|
||
|
||
this.points.push(newPoint)
|
||
this.$emit('pointsChanged', this.points)
|
||
this.$emit('pointAdded', newPoint)
|
||
},
|
||
|
||
// 处理标注点点击
|
||
handlePointClick(pointId) {
|
||
// 只有在编辑模式且为删除模式时才允许删除点位
|
||
if (this.viewMode === 'edit' && this.mode === 'delete') {
|
||
this.deletePoint(pointId)
|
||
} else if (this.viewMode === 'edit') {
|
||
// 新增模式或详情模式下，触发点位选中事件
|
||
const point = this.points.find(p => p.id === pointId)
|
||
if (point) {
|
||
point.isShow = !point.isShow
|
||
}
|
||
}
|
||
},
|
||
|
||
// 设置为新增模式
|
||
setAddMode() {
|
||
if (this.viewMode === 'edit') {
|
||
this.mode = 'add'
|
||
// uni-app中不直接操作cursor样式
|
||
this.$emit('modeChanged', 'add')
|
||
}
|
||
},
|
||
|
||
// 设置为删除模式
|
||
setDeleteMode() {
|
||
if (this.viewMode === 'edit') {
|
||
this.mode = 'delete'
|
||
this.$emit('modeChanged', 'delete')
|
||
}
|
||
},
|
||
|
||
// 设置为详情模式
|
||
setDetailMode() {
|
||
this.mode = 'detail'
|
||
if (this.$refs.image) {
|
||
this.$refs.image.style.cursor = 'default'
|
||
}
|
||
this.$emit('modeChanged', 'detail')
|
||
},
|
||
|
||
// 处理右键点击
|
||
handleRightClick(pointId) {
|
||
// 只有在编辑模式下才允许右键删除点位
|
||
if (this.viewMode === 'edit') {
|
||
this.deletePoint(pointId)
|
||
}
|
||
},
|
||
|
||
// 删除标注点
|
||
deletePoint(pointId) {
|
||
const pointIndex = this.points.findIndex(p => p.id === pointId)
|
||
if (pointIndex !== -1) {
|
||
const deletedPoint = this.points[pointIndex]
|
||
this.points.splice(pointIndex, 1)
|
||
this.$emit('pointsChanged', this.points)
|
||
this.$emit('pointDeleted', deletedPoint)
|
||
}
|
||
},
|
||
|
||
// 清空所有标注点
|
||
clearAllPoints() {
|
||
this.points = []
|
||
this.$emit('allPointsCleared')
|
||
},
|
||
|
||
// 重置查看器
|
||
resetViewer() {
|
||
// this.points = []
|
||
this.imageNaturalWidth = 0
|
||
this.imageNaturalHeight = 0
|
||
this.scale = 1
|
||
// 根据视图模式重置mode
|
||
if (this.viewMode === 'detail') {
|
||
this.mode = 'detail'
|
||
} else {
|
||
this.mode = 'add' // 重置为新增模式
|
||
}
|
||
if (this.$refs.image) {
|
||
this.$refs.image.style.cursor = this.mode === 'add' ? 'crosshair' : 'default'
|
||
}
|
||
// 确保在下一次图片加载后更新点位位置
|
||
this.$nextTick(() => {
|
||
if (this.imageNaturalWidth && this.imageNaturalHeight) {
|
||
this.calculateScale();
|
||
}
|
||
});
|
||
},
|
||
resetPosit() {
|
||
this.points = JSON.parse(JSON.stringify(this.drawingPointData));
|
||
this.mode = 'add' // 重置为新增模式
|
||
if (this.$refs.image) {
|
||
this.$refs.image.style.cursor = 'crosshair'
|
||
}
|
||
},
|
||
// 获取所有点位
|
||
getAllPoints() {
|
||
// 返回点位数组的深拷贝，避免外部直接修改原始数据
|
||
return JSON.parse(JSON.stringify(this.points))
|
||
},
|
||
|
||
// 获取当前模式
|
||
getCurrentMode() {
|
||
return this.mode
|
||
},
|
||
|
||
// 计算点位在当前图片上的实际位置
|
||
calculatePointPosition(point, axis) {
|
||
// 如果点位没有记录原始图片尺寸，使用默认缩放
|
||
if (!point.originalImageWidth || !point.originalImageHeight || point.originalImageWidth === 0 || point.originalImageHeight === 0) {
|
||
return axis === 'x' ? point.x * this.scale : point.y * this.scale;
|
||
}
|
||
|
||
// 计算原始图片到当前图片的缩放比例
|
||
const widthRatio = this.imageNaturalWidth / point.originalImageWidth;
|
||
const heightRatio = this.imageNaturalHeight / point.originalImageHeight;
|
||
// 使用平均比例确保点位位置正确
|
||
const avgRatio = (widthRatio + heightRatio) / 2;
|
||
|
||
// 获取原始坐标，如果存在则使用原始坐标进行计算
|
||
const originalCoord = point[axis === 'x' ? 'originalX' : 'originalY'] || point[axis];
|
||
console.log(888888888, originalCoord * avgRatio * this.scale)
|
||
// 返回计算后的位置
|
||
return originalCoord * avgRatio * this.scale;
|
||
},
|
||
|
||
// 更新所有点位位置
|
||
updateAllPointsPosition() {
|
||
// 根据当前平台和图片尺寸重新计算所有点位位置
|
||
if (!this.scale || this.points.length === 0) return;
|
||
|
||
console.log('更新点位位置，缩放比例:', this.scale);
|
||
|
||
// 为每个点位计算基于当前图片尺寸的实际位置
|
||
this.points.forEach(point => {
|
||
// 如果点位记录了原始图片尺寸，则进行尺寸适配计算
|
||
if (point.originalImageWidth && point.originalImageHeight && point.originalImageWidth !== 0 && point.originalImageHeight !== 0) {
|
||
// 计算原始图片到当前图片的缩放比例
|
||
const widthRatio = this.imageNaturalWidth / point.originalImageWidth;
|
||
const heightRatio = this.imageNaturalHeight / point.originalImageHeight;
|
||
|
||
// 存储原始坐标用于调试
|
||
if (!point.originalX) {
|
||
point.originalX = point.x;
|
||
point.originalY = point.y;
|
||
}
|
||
|
||
// 使用平均比例进行缩放，确保点位比例正确
|
||
const avgRatio = (widthRatio + heightRatio) / 2;
|
||
console.log(`点位 ${point.id} 缩放: 原图(${point.originalImageWidth}x${point.originalImageHeight}) -> 当前图(${this.imageNaturalWidth}x${this.imageNaturalHeight}), 比例: ${avgRatio}`);
|
||
}
|
||
});
|
||
|
||
this.$forceUpdate();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.text-tip {
|
||
font-size: 24rpx;
|
||
color: #B3B3B3;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-bottom: 26rpx;
|
||
}
|
||
.confrim-btn {
|
||
padding: 18rpx 26rpx;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
|
||
>view {
|
||
width: 50%;
|
||
height: 76rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
>view:first-child {
|
||
background-color: rgba(81, 129, 246, 0.1);
|
||
border-radius: 6rpx 0rpx 0rpx 6rpx;
|
||
color: #5181F6;
|
||
}
|
||
|
||
>view:last-child {
|
||
background-color: #5181F6;
|
||
border-radius: 0rpx 6rpx 6rpx 0rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.simple-image-annotator {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.image-container {
|
||
position: relative;
|
||
// flex: 1;
|
||
overflow: hidden;
|
||
// background-color: #f5f5f5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: auto 0;
|
||
}
|
||
|
||
.image-container image {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
transition: transform 0.2s;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 详情模式下图片指针样式 */
|
||
.detail-mode img {
|
||
cursor: default !important;
|
||
}
|
||
|
||
.annotation-layer {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
transform-origin: top left;
|
||
}
|
||
|
||
.annotation-point {
|
||
position: absolute;
|
||
width: 20rpx;
|
||
height: 30rpx;
|
||
/* background-color: rgba(255, 69, 0, 0.8); */
|
||
/* border-radius: 50%; */
|
||
background-image: url("@/static/draw-point.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
transform: translate(-50%, -50%);
|
||
pointer-events: all;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: bold;
|
||
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); */
|
||
}
|
||
|
||
.bubble {
|
||
width: calc(120rpx);
|
||
height: 70rpx;
|
||
padding: 10rpx 32rpx;
|
||
background-image: url("@/static/bubble.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
bottom: 100%;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.annotation-point:hover {
|
||
/* background-color: rgba(255, 0, 0, 0.9); */
|
||
transform: translate(-50%, -50%) scale(1.1);
|
||
}
|
||
|
||
.annotation-point .delete-btn {
|
||
position: absolute;
|
||
top: -16rpx;
|
||
right: -16rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background-color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #ff4500;
|
||
font-size: 24rpx;
|
||
cursor: pointer;
|
||
border: 2rpx solid #ff4500;
|
||
}
|
||
|
||
.annotation-point .delete-btn:hover {
|
||
background-color: #ff4500;
|
||
color: white;
|
||
}
|
||
|
||
.point-index {
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.controls {
|
||
padding: 0 20rpx 20rpx;
|
||
background-color: white;
|
||
/* border-top: 1px solid #e0e0e0; */
|
||
display: flex;
|
||
gap: 20rpx;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.control-btn {
|
||
padding: 12rpx 32rpx;
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8rpx;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
}
|
||
|
||
.control-btn:hover {
|
||
background-color: #45a049;
|
||
}
|
||
|
||
.control-btn.active {
|
||
background-color: #2196F3;
|
||
}
|
||
|
||
.clear-btn {
|
||
padding: 12rpx 32rpx;
|
||
background-color: #ff4500;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8rpx;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.clear-btn:hover {
|
||
background-color: #ff6347;
|
||
}
|
||
|
||
.point-count {
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.fixedheader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 2;
|
||
|
||
.headerName {
|
||
z-index: 1;
|
||
}
|
||
}
|
||
</style> |