图解转盘抽奖布局样式，以小程序为例

目前抽奖最常见的两种：九宫格抽奖 和 转盘抽奖，但转盘抽奖的大多是采用的是将做好的图放在页面上，如果需要变动奖池里面的奖品或数量，就会让设计师重新出一张图片。

分享我自己在自定义转盘抽奖的样式布局思路，这篇文章是样式布局的详解，没有功能实现；如果想可以直接拿来用的转盘抽奖组件，请看这篇文章 小程序转盘组件

布局思路

整个转盘抽奖布局分为两部分：底部转盘背景图 和 奖品内容布局

一. 底部转盘背景图

1 用canvas画个转盘出来（转为临时路径或base64数据，放到底部背景图上）；

2 用默认的转盘背景图，放到底部背景图上；

3 用css画扇形背景图；

扇形css

.fan {
	position: absolute;
	top: 0; 
	right: 0;
	width: 50%;
	height: 50%;
	border: solid 1px #eee;
	transform-origin: left bottom;
	z-index: 1;
}

扇形旋转斜切的计算公式：

`transform: rotate(${(360 / 奖品个数) * 索引 - (360 / 奖品个数 / 2)}deg) skewY(-${(90 - (360 / 奖品个数))}deg)`;

二. 奖品内容布局

首先需要知道每个奖品在它自己的扇形内占多少内容，就需要算出它的宽高。

设圆形直径为：200，半径为：100；

假如奖品总数为：6 ；
每份奖品所占的角度为：60°；

---

如图，α的角度为：30°，半径r为100，求宽度 w 的值？

解：根据三角函数可以算出 d 的值，宽度 w 也就是 2 * d；

const radii = 100; // 半径 r
const angle = 30; // 角度 α
const ratio = Number(Math.sin(angle * (Math.PI * 2 / 360)).toFixed(2)); // 正弦值 0.5
const d = radii * ratio; // 50
const w = 2 * d; // 100

如果奖品总数为：8，用以上的计算方式得出每份奖品宽度 w = 76；

---

每份奖品所在内容就是绿色框框内，给给padding值，图片IMG宽度所占绿色范围为30%（看怎么布局，如果padding给的不一样，所占比重可能就更小了，但大概在30%范围左右）

转盘容器设置相对定位，每份奖品用绝对定位的方式，先固定在如上图的位置，在旋转相对应的角度。

布局代码

提示：我代码种的圆形直径为手机屏幕的92%，也就是690rpx

wxml

<view class="turnplate-wrap" style="background-image: url({{turnplatePath}});">
  <block wx:for="{{prizeList}}" wx:key="name">
    <view class="prize-box"
      style="width: {{perPrize.width}}rpx; transform: translateX(-50%) rotate({{perPrize.degree * index}}deg);">
      <view class="name">{{item.name}}</view>
      <view class="desc">{{item.desc}}</view>
      <image class="img" src="{{item.img}}" mode="widthFix" style="width: {{perPrize.width * .3}}rpx;"></image>
    </view>
  </block>
</view>

wxss

.turnplate-wrap {
  width: 690rpx;
  height: 690rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-origin: center center;
  border-radius: 690rpx;
  /* overflow: hidden; */
  position: relative;
}

.prize-box {
  height: 345rpx;
  text-align: center;
  padding: 50rpx 20rpx;
  position: absolute;
  top: 0;
  left: 50%;
  text-align: center;
  transform-origin: center bottom;
  transform: translateX(-50%);
}

.prize-box .name {
  font-size: 24rpx;
  font-weight: bold;
}

.prize-box .desc {
  font-size: 20rpx;
  color: #ccc;
  margin-top: 8rpx;
}

.prize-box .img {
  margin-top: 20rpx;
}

布局图示：

综合效果

项目地址

github