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适合需要精确控制的场景。