Turntable

概述[自定义转盘]

<Turntable /> 是转盘组件，通过设置属性可以实现内容自定义，样式自定义的转盘效果，转动的主体是 canvas 绘图。

示例代码

import cooApp, { basicWidgets } from 'coolink'

const { Turntable } = basicWidgets

export default class Turntable extends cooApp.Widget {
  render () {
    const awardNameList = ["喝半杯", "真心话", "上家曝光", "下家曝光", "大家干杯", "男士喝光", "PASS", "女士干杯", "和异性交杯", "找人干杯", "自己唱首歌", "干一杯"];
    const awardRatioList = [1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12];
    const awardBgList = [Colors.Transparent, Colors.Lightgray, Colors.Transparent, Colors.Lightgray, Colors.Transparent, Colors.Lightgray, Colors.Transparent, Colors.Lightgray, Colors.Transparent, Colors.Lightgray, Colors.Transparent, Colors.Lightgray];

    return {
        <Turntable height={700}
            awardNameList={awardNameList}
            awardRatioList={awardRatioList}
            awardBgColorList={awardBgList}
            awardBgUrl={'http://beta.webapp.skysrt.com/coolink/app/coo-movie/turnbg.png'}
            bgWidth={350}
            bgHeight={350}
            contentWidth={300}
            contentHeight={300}
            secondUrl={'http://beta.webapp.skysrt.com/coolink/app/coo-movie/center.png'}
            secondWidth={50}
            secondHeight={50}
            circle={5}
            fontSize={28}
            result={5}
            start={0}
            onStopBack={(resule) => {
                return new Promise(resolve => {
                        // 通知上层转盘动作完成
                    resolve()
                })
            }}
        >
        </Turntable>
    }
  }
}

组件属性

属性名	类型	说明	默认值
awardNameList	array	转盘选项内容	2<=选项格式<=12
awardRatioList	array	转盘选项概率	和为 1
awardBgList	array	转盘选项背景色	灰白相间
awardBgUrl	string	转盘背景图	不为空
bgWidth	number	转盘背景图宽度	不为空
bgHeight	number	转盘背景图高度	不为空
contentWidth	number	转盘内容宽度	内容和转盘边际有距离
contentHeight	number	转盘内容高度	内容和转盘边际有距离
secondUrl	string	转盘指针图	不为空
secondWidth	number	转盘指针宽度	不为空
secondHeight	number	转盘指针高度	不为空
circle	number	转盘转动圈速	不为空
fontSize	number	转盘文案大小	不为空
result	number	转盘最终结果	不为空
start	number	控制转盘转动	0 为只更新内容不转动，1 转动
onStopBack	Function	转动结束回调	不为空

---

样例 1

export default class Turntable extends cooApp.Widget {
  render () {
    const awardNameList = ["喝半杯", "真心话", "上家曝光", "下家曝光", "大家干杯", "男士喝光", "PASS", "女士干杯", "和异性交杯", "找人干杯", "自己唱首歌", "干一杯"];
    const awardRatioList = [1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12, 1 / 12];
    const awardBgList = [Colors.Transparent, Colors.Lightgray, Colors.Transparent, Colors.Lightgray, Colors.Transparent, Colors.Lightgray, Colors.Transparent, Colors.Lightgray, Colors.Transparent, Colors.Lightgray, Colors.Transparent, Colors.Lightgray];

    return {
        <Turntable height={700}
            awardNameList={awardNameList}
            awardRatioList={awardRatioList}
            awardBgColorList={awardBgList}
            awardBgUrl={'http://beta.webapp.skysrt.com/coolink/app/coo-movie/turnbg.png'}
            bgWidth={350}
            bgHeight={350}
            contentWidth={300}
            contentHeight={300}
            secondUrl={'http://beta.webapp.skysrt.com/coolink/app/coo-movie/center.png'}
            secondWidth={50}
            secondHeight={50}
            circle={5}
            fontSize={28}
            result={5}
            start={0}
            onStopBack={(resule) => {
                return new Promise(resolve => {
                        // 通知上层转盘动作完成
                    resolve()
                })
            }}
        >
        </Turntable>
    }
  }
}

上述例子的效果图：