原生在小程序中,可以通过监听触摸事件来实现图片的旋转
在wxml中,你可以这样使用:
<view class="container">
<view class="box" style="transform:{{transform}}" bindtouchstart="touchStart" bindtouchmove="touchMove"> abc</view>
</view>
index.wxss 这里的.container
类可以用来设置图片的位置和大小,以及其他任何你需要的样式。
.container {
height: 100vh;
position: relative;
}
.box {
width: 200rpx;
height: 200rpx;
border: 5rpx solid black;
position: absolute;
top: 50%;
left: 50%;
/* transform: translate(-50%, -50%); */
margin-left: -100rpx;
margin-top: -100rpx;
}
js中 touchStart
和touchMove
函数分别处理触摸开始和移动事件,计算旋转角度并更新数据。调用rotateStyle
函数计算旋转样式设置参数,用于实现旋转效果。
Page({
data: {
angle: 0, // 初始角度为0
transform:'rotate(0deg)'
},
// 触摸开始时记录起始坐标
touchStart: function (e) {
this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
this.data.angle = this.data.angle || 0; // 如果没有初始角度,则设置为0
},
// 触摸移动时计算旋转角度
touchMove: function (e) {
const touch = e.touches[0];
const deltaX = touch.pageX - this.startX;
const deltaY = touch.pageY - this.startY;
const angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI; // 计算角度
this.setData({
angle
}); //角度
this.rotateStyle(angle)
},
// 在wxml中使用样式来应用旋转效果
rotateStyle: function (angle) {
this.setData({
transform: ` rotate(${angle}deg);`
});
}
})