1.0.2 • Published 6 years ago
maskcard v1.0.2
maskcard
This is a scratchcard plug-in based on canvas.
(这是一个基于canvas的刮刮卡插件)
Installation and Usage(安装和使用)
npm install maskcard --saveimport 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】次之后自动抹去.