优化完成(前置图片旋转处理)
This commit is contained in:
parent
875b026a3e
commit
a9b34e672e
|
@ -5,11 +5,6 @@ export const useDailyStore = defineStore('daily', {
|
|||
userdailyinspection: [],
|
||||
base64_1: '',
|
||||
base64_2: '',
|
||||
direction: true,
|
||||
direction_1: true,
|
||||
direction_2: true,
|
||||
|
||||
|
||||
}),
|
||||
actions: {
|
||||
dailyinspectionList(data) {
|
||||
|
@ -25,18 +20,7 @@ export const useDailyStore = defineStore('daily', {
|
|||
this.base64_1 = ''
|
||||
this.base64_2 = ''
|
||||
},
|
||||
changeDirection() {
|
||||
this.direction = !this.direction
|
||||
},
|
||||
changeDirection__(data) {
|
||||
this.direction = data
|
||||
},
|
||||
changeDirection1(data) {
|
||||
this.direction_1 = data
|
||||
},
|
||||
changeDirection2(data) {
|
||||
this.direction_2 = data
|
||||
}
|
||||
|
||||
},
|
||||
getters: {
|
||||
getdailyinspection(state) {
|
||||
|
@ -48,14 +32,6 @@ export const useDailyStore = defineStore('daily', {
|
|||
get_base64_2(state) {
|
||||
return state.base64_2
|
||||
},
|
||||
getDirection(state) {
|
||||
return state.direction
|
||||
},
|
||||
getDirection1(state) {
|
||||
return state.direction_1
|
||||
},
|
||||
getDirection2(state) {
|
||||
return state.direction_2
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
|
|
@ -46,8 +46,8 @@
|
|||
</navigator>
|
||||
</nut-form-item>
|
||||
<view style="display: flex; justify-content: center">
|
||||
<!-- :class="direction1 ? 'sigh_btns' : 'sigh_btns_noRotate'" -->
|
||||
<image v-if="_form.assessmentUserSignature" :src="_form.assessmentUserSignature" mode="heightFix" style="height: 300rpx"></image>
|
||||
|
||||
<image v-if="_form.assessmentUserSignature" :src="_form.assessmentUserSignature" mode="aspectFit" style="height: 300rpx"></image>
|
||||
</view>
|
||||
|
||||
<nut-form-item label="被考评学校签名:">
|
||||
|
@ -56,7 +56,7 @@
|
|||
</navigator>
|
||||
</nut-form-item>
|
||||
<view style="display: flex; justify-content: center">
|
||||
<!-- :class="direction2 ? 'sigh_btns' : 'sigh_btns_noRotate'" -->
|
||||
|
||||
<image v-if="_form.byAssessmentEnterprisesUnitUserSignature" :src="_form.byAssessmentEnterprisesUnitUserSignature" mode="heightFix" style="height: 300rpx"></image>
|
||||
</view>
|
||||
</nut-form>
|
||||
|
@ -79,9 +79,6 @@ const store = useDailyStore()
|
|||
const daily = computed(() => store.getdailyinspection)
|
||||
const base64_1 = computed(() => store.get_base64_1)
|
||||
const base64_2 = computed(() => store.get_base64_2)
|
||||
// const direction = computed(() => store.getDirection)
|
||||
const direction1 = computed(() => store.getDirection1)
|
||||
const direction2 = computed(() => store.getDirection2)
|
||||
|
||||
const currentCkProjectId = ref('')
|
||||
const submitData = ref<Item[]>([])
|
||||
|
|
|
@ -26,9 +26,7 @@ import icon from '@/assets/images/rotate1.png'
|
|||
const _index = ref(0)
|
||||
import { useDailyStore } from '@/store/daily'
|
||||
const store = useDailyStore()
|
||||
const direction = computed(() => store.getDirection)
|
||||
const direction1 = computed(() => store.getDirection1)
|
||||
const direction2 = computed(() => store.getDirection2)
|
||||
|
||||
|
||||
const width = ref(0)
|
||||
const height = ref(300)
|
||||
|
@ -42,11 +40,7 @@ useLoad((options) => {
|
|||
Taro.setNavigationBarTitle({
|
||||
title: options.name,
|
||||
})
|
||||
// if (_index.value === 1) {
|
||||
// store.changeDirection__(direction1.value)
|
||||
// } else {
|
||||
// store.changeDirection__(direction2.value)
|
||||
// }
|
||||
|
||||
})
|
||||
const ctx = ref(null)
|
||||
onMounted(() => {
|
||||
|
@ -116,14 +110,30 @@ const handleConfirm = () => {
|
|||
|
||||
const tempPath = res.tempFilePath
|
||||
const ctx = Taro.createCanvasContext('camCacnvs', that)
|
||||
var targetWidth
|
||||
var targetHeight
|
||||
// 前置图片旋转处理 ___________________________________________________________________
|
||||
if (direction.value) {
|
||||
targetWidth = height.value * 0.5
|
||||
targetHeight = width.value * 0.5
|
||||
// 计算旋转后的外接矩形尺寸
|
||||
const angle = (270 * Math.PI) / 180 // 逆时针旋转 270 度
|
||||
const rotatedWidth = Math.abs(width.value * Math.cos(angle)) + Math.abs(height.value * Math.sin(angle))
|
||||
const rotatedHeight = Math.abs(height.value * Math.cos(angle)) + Math.abs(width.value * Math.sin(angle))
|
||||
// 计算平移量
|
||||
const offsetX = 0 // 如果不需要水平偏移,则为 0
|
||||
const offsetY = rotatedHeight - targetHeight // 计算 y 轴的平移量
|
||||
// 将画布原点平移到适当位置
|
||||
ctx.translate(offsetX, offsetY)
|
||||
// 旋转画布
|
||||
ctx.rotate(angle)
|
||||
ctx.drawImage(tempPath, 0, 0, targetHeight, targetWidth)
|
||||
} else {
|
||||
targetWidth = width.value * 0.5
|
||||
targetHeight = height.value * 0.5
|
||||
ctx.drawImage(tempPath, 0, 0, targetWidth, targetHeight)
|
||||
}
|
||||
|
||||
// 调整缩放比例,例如压缩到 50%
|
||||
const targetWidth = width.value * 0.5
|
||||
const targetHeight = height.value * 0.5
|
||||
|
||||
ctx.translate(0, targetWidth)
|
||||
ctx.rotate((-90 * Math.PI) / 180)
|
||||
ctx.drawImage(tempPath, 0, 0, targetWidth, targetHeight)
|
||||
ctx.draw(false, () => {
|
||||
Taro.canvasToTempFilePath({
|
||||
canvasId: 'camCacnvs',
|
||||
|
@ -157,17 +167,10 @@ const handleConfirm = () => {
|
|||
* @direction false 竖屏,true 横屏
|
||||
*/
|
||||
|
||||
// const direction = ref(true)
|
||||
const direction = ref(true)
|
||||
const changeDirection = () => {
|
||||
// direction.value = !direction.value
|
||||
store.changeDirection()
|
||||
direction.value = !direction.value
|
||||
Taro.vibrateShort({ type: 'medium' }).then()
|
||||
}
|
||||
useUnload(() => {
|
||||
if (_index.value === 1) {
|
||||
store.changeDirection1(direction.value)
|
||||
} else {
|
||||
store.changeDirection2(direction.value)
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue