uniapp image旋转
时间: 2025-01-11 14:17:18 浏览: 94
### 实现图像旋转效果
在 UniApp 中实现图像旋转效果可以通过创建一个自定义组件来完成。此方法涉及使用 CSS 和 JavaScript 来处理触摸事件并动态更新图像的角度。
#### 创建自定义组件
为了更好地管理和重用代码,建议先建立一个新的公共组件 `cropping.vue` 放置于 `components/cropping/` 文件夹下[^1]:
```vue
<template>
<view class="container">
<!-- 图像展示区 -->
<image :style="{ transform: 'rotate(' + rotateAngle + 'deg)' }" :src="imgSrc"></image>
<!-- 控制按钮 -->
<button @click="handleRotate">旋转</button>
</view>
</template>
<script>
export default {
data() {
return {
imgSrc: '', // 图片路径
rotateAngle: 0, // 初始角度设为0度
};
},
methods: {
handleRotate() {
this.rotateAngle += 90; // 每次点击增加90度角
}
},
onLoad(options) {
if (options && options.imgUrl) {
this.imgSrc = decodeURIComponent(options.imgUrl);
}
}
};
</script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
```
上述代码展示了如何通过修改样式属性中的 `transform` 属性来进行简单的顺时针方向的90度增量式的图片旋转操作。
阅读全文
相关推荐

















