小程序转盘抽奖，已知圆心、半径、角度求圆上点的坐标
因公司的需求，要在小程序语音房内部迭代一个真心话大冒险的功能，也等同于幸运转盘；
业务场景：
发送一个socket，拿到响应的结果，根据返回的数值开始启动幸运转盘，由于转盘上的人数不是固定的，所以要根据角度定位到每一个人x轴和y轴的坐标。
简单来说的话就是一个初中的数学题目：
已知圆心、半径、角度求圆上点的坐标，也就是初中的数学知识sin和cos，当然这种数学公式的话在伟大的JavaScript中也是有的：Math.sin()和Math.cos()
话不多说直接上代码：
<view class="bg"><view bindtap="start" class="pointer" bindtransitionend="animationend" animation="{{animationData}}"></view><view class="origin"><view wx:for="{{coordinate}}" style="top: {{item.y}}rpx; left: {{item.x}}rpx;" class="user">{{index}}</view></view>
</view>.bg{position: relative;width: 600rpx;height: 600rpx;border-radius: 50%;background-color: aqua;
}.pointer{width: 30px;height: 30px;background-color: #333;border-radius: 50%;position: absolute;left: 270rpx;top: 270rpx;
}.pointer::after{content: ' ';width:0;height:0;border-right:12rpx solid transparent;border-left:12rpx solid transparent;border-bottom:52rpx solid #333;z-index: 10;position: absolute;left: 17rpx;top: -48rpx;
}.origin{position: relative;top: 300rpx;left: 300rpx;
}.user{width: 70rpx;height: 70rpx;background-color: darkgray;border-radius: 50%;position: absolute;
}Page({data: {num: 11, // 圆分成多少份},onLoad() {this.setCoordinate(this.data.num, 200, -90, 35)},/*** 设置坐标* @param {圆分成多少份} num* @param {从圆心向外的半径位置} r* @param {初始角度，已x轴正半轴为起始角度0，顺时针旋转+，逆时针旋转-} initialDeg* @param {小圆的半径} s_r*/setCoordinate(num, r, initialDeg, s_r) {const coordinate = []const deg = 360 / num // 每一个间隔多少度for (let index = 0; index < num; index++) {const degItem = (deg * index) + initialDegconst x = r * Math.cos(degItem * Math.PI / 180) - s_rconst y = r * Math.sin(degItem * Math.PI / 180) - s_rcoordinate.push({x, y})}this.setData({coordinate})},// 随机一个角度setAngle() {const random = Math.floor(Math.random() * this.data.num)return random * (360 / this.data.num)},// 开始执行动画start() {if (this.data.disable) {return}this.setData({disable: true})let animation = wx.createAnimation({duration: 3000,timingFunction:'ease'})const angle = this.setAngle()animation.rotate(360*8+angle).step()this.setData({animationData: animation.export(),angle})},// 动画结束时候调用animationend() {const { angle } = this.datalet animation = wx.createAnimation({duration: 0})animation.rotate(angle).step()this.setData({animationData: animation.export()})setTimeout(() => {this.setData({disable: false})}, 200)}
})分成11份的情况，如下图：
改变num值分成6份，如下图：
改变r值，从圆心向外的半径位置为150，如下图：
改变initialDeg值，初始角度为0，如下图：
✨原 创 不 易 ， 大 佬 们 给 个 支 持 ！ ！ ！
微信小程序-转盘抽奖代码: lucky-draw.wxss: .lucky_draw_zp{ width: 502rpx; height: 502rpx; margin: 0 auto; positi ... 如题,该小程序为一款利用canvas实现的转盘抽奖效果,今天我就来总结一下转盘旋转具体实现原理,首先还是上图上代码(一下代码为转盘部分代码,想要查看完整代码,请移步支我的github,飞机票,点击跳转 ... 主要内容:主要谈数系的发展,从数系扩展或者历史角度来谈.主要涵盖:自然数.整数.有理数.无理数.代数数.超越数.实数等.各类数集应包含各类别的定义.数的性质等. 数学史的发展,伴随着数系的扩展.随着时 ... 很简单一个小学算法- 圆点坐标:(x0,y0) 半径:r 角度:a0 则圆上任一点为:(x1,y1) x1 = x0 + r * cos(ao) y1 = y0 + r * sin(ao ) 转换成j ... 当需要用时才发现,初中学的东西都已经忘了,在网上搜到以下公式,需要用时也好找了. 圆点坐标:(x0,y0) 半径:r 角度:a0 则圆上任一点为:(x1,y1) x1 = x0 + ... 很多地方都会用到就记录一下,有懒的到处找,可以随机,也可以从后台获取数据,改一下参数就可以用,如果帮到了你就点个赞吧 下载地址 今天在用MATLAB编程的时候,用到了已知圆心和半径,画圆的程序,上网搜了一下,主要有下面两种,在这里总结一下:(这里我都是放在函数中做的,想画多个圆的话可以加个for循环调用一下函数,或者直接用向量 ... 今天在用MATLAB编程的时候,用到了已知圆心和半径,画圆的程序,上网搜了一下,主要有下面两种,在这里总结一下:(这里我都是放在函数中做的,想画多个圆的话可以加个for循环调用一下函数,或者直接用向量 ... JAVA已知圆心经纬度和半径求圆周点的经纬度 项目中遇到一个需求,需要根据传入的圆心经纬度和半径参数获得圆周点的经纬度,在网上查询了很多没有找到能用的算法,从GPT中获取到了一个简洁的用java实现的 ...小程序转盘抽奖，已知圆心、半径、角度求圆上点的坐标相关推荐
最新文章
热门文章