SpinningWheel

概述[转盘]

<SpinningWheel /> 是转盘组件，通过设置属性也可以实现转盘抽奖效果，转动的主体是图片。

示例代码

import cooApp, { basicWidgets } from 'coolink'

const { SpinningWheel } = basicWidgets

export default class SpinningWheel extends cooApp.Widget {
  render () {
    return {
      <SpinningWheel height={700}
            bgUrl={'http://beta.webapp.skysrt.com/coolink/app/coo-movie/turnbg.png'}
            width={300}
            height={300}
            secondUrl={'http://beta.webapp.skysrt.com/coolink/app/coo-movie/center.png'}
            secondWidth={50}
            secondHeight={50}
            divide={12}
            initAngle={200}
            result={4}
            onStopBack={(resule) => {
                return new Promise(resolve => {
                    // 通知上层转盘动作完成
                    resolve()
                })
            }}
        >
        </SpinningWheel>
    }
  }
}

组件属性

属性名	类型	说明	默认值
bgUrl	string	转盘图片	不为空
width	number	转盘宽度	不为空
height	number	转盘高度	不为空
secondUrl	string	转盘中间指针图片	不为空
secondWidth	number	指针宽度	不为空
secondHeight	number	指针高度	不为空
divide	number	选项均分份数	不为空
initAngle	number	初始转动角度	不为空
result	number	转盘最终结果	不为空
onStopBack	Function	转动结束回调	不为空

---

样例 1

export default class HomePage extends Widget<any, any> {
  render() {
    <Page>
      <Container>
        <Spinningwheel
          bgUrl={'http://beta.webapp.skysrt.com/coolink/app/coo-movie/table.png'}
          width={300.0}
          height={300.0}
          secondUrl={'http://beta.webapp.skysrt.com/coolink/app/coo-movie/center.png'}
          secondWidth={100.0}
          secondHeight={100.0}
          divide={12}
          initAngle={0.0}
          result={this.state.result}
          onStopBack={(divider) => {
            return new Promise((resolve) => {
              this.getResultInfo(divider);
              resolve();
            });
          }}
        ></Spinningwheel>

        <Button
          onTap={() => {
            this.onStartDraw();
          }}
        >
          <Text size={24}>开始抽奖</Text>
        </Button>
      </Container>
    </Page>;
  }
}

上述例子的效果图：