uniapp 图片旋转
图片旋转方法
在UniApp中实现图片旋转可以通过CSS动画或JavaScript动态计算角度实现。以下是几种常见方法：
CSS transform 属性
通过修改元素的transform属性实现静态旋转：
.rotated-image {
transform: rotate(45deg); /* 旋转45度 */
transition: transform 0.3s ease; /* 可选：添加过渡动画 */
}动态绑定旋转角度
在Vue模板中动态绑定style实现可控旋转：
<template>
<image
:style="{ transform: `rotate(${angle}deg)` }"
src="/static/logo.png"
/>
<button @click="rotateImage">旋转图片</button>
</template>
<script>
export default {
data() {
return {
angle: 0
}
},
methods: {
rotateImage() {
this.angle += 90; // 每次点击旋转90度
}
}
}
</script>使用动画库
通过uni-app的动画API实现更复杂效果：
const animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
this.animation.rotate(360).step()
this.setData({
animationData: animation.export()
})Canvas 绘制旋转
需要精确控制时可通过Canvas实现：
const ctx = uni.createCanvasContext('myCanvas')
ctx.translate(150, 150)
ctx.rotate(Math.PI / 4)
ctx.drawImage('/static/image.png', -75, -75, 150, 150)
ctx.draw()注意事项
- 旋转中心默认是元素中心点，可通过
transform-origin调整 - 大量图片旋转可能影响性能，建议使用CSS硬件加速
- 在部分Android设备上可能需要添加
-webkit-前缀 - 使用Canvas时注意坐标系转换顺序
以上方法可根据具体需求选择，CSS transform适合简单场景，Canvas适合需要精确控制的场景。
