欢迎使用react刮一刮组件

此组件使用图片时未使用getImageData方法,没有跨域问题,使用简单,适合多场景使用

安装

 npm install react-scratch-perfect --save

例子: https://dsmelon.github.io/react-scratch-perfect/dist/index.html

api

| 参数名 | 类型 | 默认值 | 说明 | 值 | |:------------|:---------------------|:-------------|:--------------------------------------|:-------------------------------------------------| | className | string | 无 | 容器的类名 | | | clear | boolean | false | 完成后是否清除画布 | | | color | string | #808080 | 刮刮卡的颜色 | | | img | string | 无 | 刮刮卡的填充图片(如果图片加载失败,会使用颜色值)| | | imgRepeat | string | 无 | 图片填充方式 | width: 宽度撑满，高度自适应并居中 height: 高度撑满，宽度自适应并居中 repeat: 重复填充无值会被拉伸铺满容器 | | size | number | 1/10容器宽度 | 画笔直径 | | | round | array[number] | [0,0,0,0] | 奖品限定区域,分别为上右下左的padding值 | | | percentage | number | 70 | 完成百分比(round之外的不参与计算) | | | mode |string | move | 在什么时刻触发onChange和onSuccess | move: 手指移动时触发onChange和onSuccess end: 手指抬起时触发onChange和onSuccess | | onChange | function(percentage) | 无 | 改变时触发的函数,回传的是已经刮出的百分比 | | | onSuccess | function | 无 | 完成时的回调 | |

使用方法

<Scratch
    color="#808080"
    img=""
    round={[100,50,100,50]}
    size={40}
    imgRepeat="height"
    percentage={70}
    clear={false}
    mode="move"
    onChange={this.handleChange}
    onSuccess={this.onSuccess}
    className="scratch"
>
    <div className="s1">一等奖</div>
</Scratch>

.s1{
    font-size: 100px;
    line-height: 320px;
    height: 320px;
    width: 450px;
    color: deeppink;
    display: inline-block;
}

github地址: https://github.com/dsmelon/react-scratch-perfect