uniapp 图片旋转
图片旋转实现方法
在UniApp中实现图片旋转功能，可以通过CSS样式或JavaScript操作来实现。以下是几种常见的实现方式：
使用CSS transform属性
通过CSS的transform属性可以实现图片旋转效果，这是最简单的方法。
<template>
<view>
<image
class="rotated-image"
src="/static/logo.png"
mode="aspectFit"
></image>
<button @click="rotateImage">旋转图片</button>
</view>
</template>
<script>
export default {
data() {
return {
rotateDeg: 0
}
},
methods: {
rotateImage() {
this.rotateDeg += 90
}
}
}
</script>
<style>
.rotated-image {
transform: rotate({{rotateDeg}}deg);
transition: transform 0.3s ease;
}
</style>使用JavaScript动态计算
对于更复杂的旋转控制，可以使用JavaScript动态计算旋转角度。
methods: {
rotateImage() {
this.rotateDeg = (this.rotateDeg + 90) % 360
}
}使用canvas实现高级旋转
如果需要更精确的控制或处理后的图片数据，可以使用canvas API。
rotateWithCanvas() {
const canvas = uni.createCanvasContext('myCanvas')
canvas.translate(50, 50)
canvas.rotate(Math.PI / 180 * this.rotateDeg)
canvas.drawImage('/static/logo.png', -25, -25, 50, 50)
canvas.draw()
}注意事项
- 旋转角度以度为单位，顺时针方向为正
- 添加transition属性可以实现平滑的旋转动画
- 对于canvas旋转，需要注意坐标系变换
- 在H5端和App端表现一致，但小程序端可能有细微差异
性能优化建议
对于频繁旋转或大量图片旋转的情况，建议：
- 使用CSS硬件加速（添加
transform: translateZ(0)） - 避免在旋转过程中频繁重绘
- 对于静态旋转，预生成旋转后的图片资源
跨平台兼容性处理
不同平台对旋转的支持略有差异：
- H5和App端支持完整的CSS transform
- 小程序端可能需要使用特定API
- 微信小程序中canvas旋转中心点处理方式不同
可以通过条件编译处理平台差异：
// #ifdef MP-WEIXIN
// 微信小程序特定代码
// #endif
