maskcard
This is a scratchcard plug-in based on canvas.
(这是一个基于canvas的刮刮卡插件)
Installation and Usage(安装和使用)
npm install maskcard --save
import Maskcard from 'maskcard'
new Maskcard(element, config)
Example(示例)
API
Maskcard config
| Name | type | Description | Default |
|---|---|---|---|
| fill.type | String | color or image | color |
| fill.content | String | When fill.type is color, fill color value (当fill.type=color时, 填color值) When fill.type is image, fill image url or base64 encoding (当fill.type=image时, 填图片地址或者base64编码) |
silver |
| percent | Number(Integer between 0 and 100) | When xx% auto complete (刮到xx%时自动清除) |
100 |
| radius | Number(Integer) | The radius of a scratching path (涂抹笔触半径) |
20 |
| disable | Boolean | Whether disable (是否禁用) |
false |
| beforeInit | Function | Called before initialized (初始化之前调用) |
null |
| inited | Function | Called after initialized (初始化之后调用) |
null |
| touchstart | Function | Called when touchstart, argument: e (初始化之后调用, 参数: e) |
null |
| touchmove | Function | Called when touchmove, argument: e (手指移动的时候调用, 参数: e) |
null |
| touchend | Function | Called when touchend, argument: e (手指离开的时候调用, 参数: e) |
null |
| complete | Function | Called when completed (刮完时调用) |
null |
Maskcard methods(函数方法)
| Name | Description |
|---|---|
| clear() | Complete this scratchcard (自动刮完) |
| getProgress() | Compute the current scratching progress (刮到多少百分比) |
| disable() | Disable this scratchcard (禁用刮刮卡) |
| enable() | Enable this scratchcard (启用刮刮卡) |
| changeConfig(config) | Change the config and take effect (修改config) |
| reset() | Reset this scratchcard (重新初始化) |
Attention(注意)
Because the 'getImageData' method on 'CanvasRenderingContext2D' does not support cross-domain, so, when fill.type is image, fill.content image url must follow a master file with the domain name. Otherwise program would change the function auto complete into another function that after 10 to complete.
fill.content图片跨域: 因为canvas中的getImageData方法不支持跨域, 所以当参数fill.type=image时, fill.content填的图片地址必须与主文件同域, 否则程序会把自动涂抹功能改为刮了【percent/10】次之后自动抹去.