优化完成(前置图片旋转处理)

This commit is contained in:
TimSpan 2024-11-13 10:35:59 +08:00
parent 875b026a3e
commit a9b34e672e
3 changed files with 33 additions and 57 deletions

View File

@ -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
}
}
})

View File

@ -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[]>([])

View File

@ -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>