基于svg绘制抽奖大转盘

作为一个被社会毒打了无数遍的人都知道抽奖活动的内幕，抽奖不是内定就是内定。但是需求既然来了，咱们也只好开发了。首先最困难的部分就是画转盘以及转盘转动动画了，咱们一步步实现它。

知识点梗概

• svg
  • path
  • circle
  • text
  • textpath

思路

底下的代码并非最新的，因为不支持插入图片。所以思路最重要。

• 图片和文字，绘制在始终垂直圆心的竖线上，然后使用 transform="rotate([angle] cx cy)" 旋转指定的圆心角，这样就可以均匀绘制所需的图形。
• 每一块的扇形，使用 path ，这里的点位可以依然使用下面代码的圆上等分点函数求得。
• 当只有一个奖项的时候才需要特殊处理。

代码

闲言碎语不要讲，咱们直接上代码，相关为啥这么写都在注释里。

<template>
  <div v-if=