为了使得大转盘始终是一个圆,所以这里不支持paddingLeftpaddingRightpaddingToppaddingBottom等属性

  • blocks?: Array<object>

    • padding?: string 内边距 (为了保证大转盘是一个标准的圆, 所以 padding 只能输入一个值)

    • background?: string 背景颜色 (可填写16进制颜色哈希值或 rgba)

    • imgs?: Array<object> 图片列表 (新增)

      • src: string 图片路径

      • top?: string | number 距离顶部的高度 (可以写 20px 也可以是 20%,默认为 0)

      • width?: string 图片宽度 (关于图片宽高有四种可能)

      • height?: string 图片高度 (关于图片宽高有四种可能)

      • rotate?: boolean 是否跟随旋转 (默认为 false)

1.宽高都未设置:则使用图片原大小;2.有宽度无高度:则高度随着宽度等比缩放;3.有高度无宽度:则宽度随着高度等比缩放;4.既有宽度也有高度:则图片宽高均等于设置的值(会被拉伸)

# 关于绘制背景

  • 第一个橘色的 block 的直径等于200px,等于父容器的宽
  • 第二个红色的 block:直径等于180px,因为第一个 block 的padding上下左右同时挤出10px
  • 第三个白色的 block:直径等于160px,因为第二个 block 的padding同样也挤出10px
  • 最后白色 block 挤出的部分就是奖品区域了
  • # 关于背景图

  • rotate用来控制背景图是否跟随旋转, 默认为 false 不旋转
  • 如果你的背景图里面就自带了奖品, 那你依然要控制好prizes的数量, 以及defaultConfig.offsetDegree, 因为我必须知道你有几个奖品才能准确的抽奖
  • 理论上来说, 你可以仅凭一张背景图和一个按钮图片完成抽奖需求