优化完成(前置图片旋转处理)
This commit is contained in:
parent
875b026a3e
commit
a9b34e672e
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -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[]>([])
|
||||||
|
|
|
@ -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
|
||||||
|
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, () => {
|
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>
|
||||||
|
|
Loading…
Reference in New Issue