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

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: [], userdailyinspection: [],
base64_1: '', base64_1: '',
base64_2: '', base64_2: '',
direction: true,
direction_1: true,
direction_2: true,
}), }),
actions: { actions: {
dailyinspectionList(data) { dailyinspectionList(data) {
@ -25,18 +20,7 @@ export const useDailyStore = defineStore('daily', {
this.base64_1 = '' this.base64_1 = ''
this.base64_2 = '' 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: { getters: {
getdailyinspection(state) { getdailyinspection(state) {
@ -48,14 +32,6 @@ export const useDailyStore = defineStore('daily', {
get_base64_2(state) { get_base64_2(state) {
return state.base64_2 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> </navigator>
</nut-form-item> </nut-form-item>
<view style="display: flex; justify-content: center"> <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> </view>
<nut-form-item label="被考评学校签名:"> <nut-form-item label="被考评学校签名:">
@ -56,7 +56,7 @@
</navigator> </navigator>
</nut-form-item> </nut-form-item>
<view style="display: flex; justify-content: center"> <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> <image v-if="_form.byAssessmentEnterprisesUnitUserSignature" :src="_form.byAssessmentEnterprisesUnitUserSignature" mode="heightFix" style="height: 300rpx"></image>
</view> </view>
</nut-form> </nut-form>
@ -79,9 +79,6 @@ const store = useDailyStore()
const daily = computed(() => store.getdailyinspection) const daily = computed(() => store.getdailyinspection)
const base64_1 = computed(() => store.get_base64_1) const base64_1 = computed(() => store.get_base64_1)
const base64_2 = computed(() => store.get_base64_2) 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 currentCkProjectId = ref('')
const submitData = ref<Item[]>([]) const submitData = ref<Item[]>([])

View File

@ -26,9 +26,7 @@ import icon from '@/assets/images/rotate1.png'
const _index = ref(0) const _index = ref(0)
import { useDailyStore } from '@/store/daily' import { useDailyStore } from '@/store/daily'
const store = useDailyStore() const store = useDailyStore()
const direction = computed(() => store.getDirection)
const direction1 = computed(() => store.getDirection1)
const direction2 = computed(() => store.getDirection2)
const width = ref(0) const width = ref(0)
const height = ref(300) const height = ref(300)
@ -42,11 +40,7 @@ useLoad((options) => {
Taro.setNavigationBarTitle({ Taro.setNavigationBarTitle({
title: options.name, title: options.name,
}) })
// if (_index.value === 1) {
// store.changeDirection__(direction1.value)
// } else {
// store.changeDirection__(direction2.value)
// }
}) })
const ctx = ref(null) const ctx = ref(null)
onMounted(() => { onMounted(() => {
@ -116,14 +110,30 @@ const handleConfirm = () => {
const tempPath = res.tempFilePath const tempPath = res.tempFilePath
const ctx = Taro.createCanvasContext('camCacnvs', that) const ctx = Taro.createCanvasContext('camCacnvs', that)
var targetWidth
// 50% var targetHeight
const targetWidth = width.value * 0.5 // ___________________________________________________________________
const targetHeight = height.value * 0.5 if (direction.value) {
targetWidth = height.value * 0.5
ctx.translate(0, targetWidth) targetHeight = width.value * 0.5
ctx.rotate((-90 * Math.PI) / 180) //
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) ctx.drawImage(tempPath, 0, 0, targetWidth, targetHeight)
}
ctx.draw(false, () => { ctx.draw(false, () => {
Taro.canvasToTempFilePath({ Taro.canvasToTempFilePath({
canvasId: 'camCacnvs', canvasId: 'camCacnvs',
@ -157,17 +167,10 @@ const handleConfirm = () => {
* @direction false 竖屏true 横屏 * @direction false 竖屏true 横屏
*/ */
// const direction = ref(true) const direction = ref(true)
const changeDirection = () => { const changeDirection = () => {
// direction.value = !direction.value direction.value = !direction.value
store.changeDirection()
Taro.vibrateShort({ type: 'medium' }).then() Taro.vibrateShort({ type: 'medium' }).then()
} }
useUnload(() => {
if (_index.value === 1) {
store.changeDirection1(direction.value)
} else {
store.changeDirection2(direction.value)
}
})
</script> </script>