uniapp 使用css实现大转盘

这里使用vue3+unocss 思路：

1.一个圆形的外壳包裹

2.使用要分配的个数，计算出角度，利用正切函数tan计算出角度对应对边长度

3.使用clip-path画出一个扇形

4.使用v-for循环出对应的份数，依次使用transform rotate旋转对应的角度。

注意：这列之所以要使用三角函数计算对边的长度是因为要在扇形区域添加元素，最后能够一起随着旋转到指定的角度。没有要添加的元素则相对简单了。

<template>
    <!-- 背景图 -->
	<image class="position-absolute w-100% h-100% top-0" src="../../../static/pics/drawBack.png" mode=""></image>
    <!-- 外层圆居中 -->
	<view class="position-absolute top-50% transform-translate-y--50% transform-translate-x--50% left-50%">
        <!-- 每个扇形对应的矩形 -->
		<view class="commom-center  flex flex-items-center flex-justify-center">
			<!-- 大转盘盘面 -->
            <image class="position-absolute w-640rpx h-640rpx" src="../../../static/pics/pan.png" mode=""></image>
			<view
				:class="'position-relative border-rd-50% w-540rpx h-540rpx overflow-hidden transition-all transition-duration-500 transition-ease transition-property-all  '+ start">
                <!-- 扇形对应的矩形使用clip-path变为扇形，并且以底部中心旋转 -->
				<view v-for="(item,index) of 8" :key="index" class="position-absolute left-50% top-0 bg-blue h-270rpx"
					:style="{width:width,transformOrigin:'center bottom',transform:`translateX(-50%) rotate(${degree*index}deg)`,'clip-path': 'polygon(0% 0%, 100% 0%, 50% 100%)',backgroundColor:(index%2==0)?'#FFE7BA':'#FFD096'}">
                    <!-- 添加扇形里的元素 -->
					<view class="text-center mt-20rpx font-size-24rpx color-#B84B2B mb-20rpx">
						<text>优惠券8元</text>
					</view>
					<view class="text-center">
						<image v-show="index%2==0" class="w-72rpx h-72rpx" src="@/static/pics/face.png" mode=""></image>
						<image v-show="index%2!=0" class="w-72rpx h-60rpx" src="@/static/pics/quan.png" mode=""></image>
					</view>
				</view>
			</view>
            <!-- 指针 -->
			<image
				class="w-168rpx h-210rpx position-absolute top-50% left-50% transform-translate-x--50% transform-translate-y--60%"
				src="@/static/pics/pin.png" mode=""></image>
		</view>
	</view>
	<view class="position-absolute bottom-214rpx pl-100rpx pr-100rpx w-100% box-border">
		<view @click="takedraw"
			class="mt-100rpx text-center color-#C03D00 mb-60rpx line-height-112rpx border-rd-56rpx w-100% font-bold"
			style="background: linear-gradient(180deg, #FFB683 0%, #FFC373 50%, #FFFFD4 100%);">
			立即抽奖
		</view>
		<view class="flex flex-items-center font-600 flex-justify-between font-size-28rpx color-#FFFDD1">
			<text>剩余机会 1 次</text>
			<text>活动说明</text>
		</view>
	</view>

</template>

<script setup lang="ts">
	const degree = ref(45)
	const width = ref(0)
	const { screenRate } = getApp().globalData as GlobalData
	const start = ref("")
    //计算角度对边长度，也就是矩形宽度
	const calculate = () => {
		width.value = Math.tan((degree.value / 2) * Math.PI / 180) * 135 * 2 * (1 / screenRate) + 'rpx'
	}
	const takedraw = () => {
		start.value = "spin"
		setTimeout(() => {
			start.value = "stop"
		}, 3000)
	}
	calculate()
</script>

<style lang="scss">
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.spin {
		transform-origin: center center;
		animation: rotate 1s linear infinite;
	}

	.stop {
		animation: none;
	}
</style>

实现效果：