# ScratchView

**Repository Path**: archermind-ti/scratchview

## Basic Information

- **Project Name**: ScratchView
- **Description**: 刮奖效果控件
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-31
- **Last Updated**: 2021-09-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ScratchView

### 简介

OHOS自定义控件，类似刮刮卡效果。

### 功能

1. 刮刮卡效果
2. 自定义蒙层颜色和水印
3. 自定义橡皮擦宽度
4. 自定义最大擦除比例

### 演示

![scratch-demo-screen.gif](screen/scratch-demo-screen.gif)

### 集成

在project的build.gradle中添加mavenCentral()的引用

```groovy
repositories {   
 	...   
 	mavenCentral()   
	 ...           
 }
```
在entry的build.gradle中添加依赖
```groovy
dependencies { 
... 
	implementation 'com.gitee.archermind-ti:scratch:1.0.0'
... 
}
```
### 使用说明

1.  xml文件中代码

```xml

<StackLayout
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:top_margin="16vp">

    <Image
        ohos:height="150vp"
        ohos:width="150vp"
        ohos:image_src="$media:lufy"
        ohos:layout_alignment="center"/>

    <com.clock.scratch.ScratchView
        ohos:id="$+id:scratchView"
        ohos:height="200vp"
        ohos:width="200vp"
        app:sv_mask_color="#FFcccccc"
        app:sv_vertical_repeat_count="9"
        app:sv_horizontal_repeat_count="9"
        app:sv_max_percent="70"
        app:sv_erase_size="60"
        app:sv_water_mark="$media:alipay"
        ohos:layout_alignment="horizontal_center"/>

</StackLayout>

```
xml属性 | 描述
---|---
  app:sv_mask_color | 表示蒙板颜色
  app:sv_vertical_repeat_count | 表示水印在纵向每列上的个数
  app:sv_horizontal_repeat_count | 表示水印在横向每行上的个数
  app:sv_max_percent | 表示最大擦除完成比例
  app:sv_erase_size | 表示刮刮卡橡皮擦宽度
  app:sv_water_mark | 表示水印资源


2.  java代码中的API接口

```java
    //设置蒙板颜色
    scratchView.setMaskColor(0xffff0000);
    //设置蒙板上水印，参数为-1时，表示无水印
    scratchView.setWatermark(ResourceTable.Media_alipay);
    //清除蒙板
    scratchView.clear();
    //重置为初始状态
    scratchView.reset();
    //设置橡皮擦宽度
    scratchView.setEraserSize(60);
    //设置最大擦除比例，取值为0-100
    scratchView.setMaxPercent(70);
    //设置刮刮卡擦除监听器
    scratchView.setEraseStatusListener(new ScratchView.EraseStatusListener() {

        @Override
        public void onProgress(int percent) {//擦除完成比例
            percentView.setText(String.valueOf(percent));
        }

        @Override
        public void onCompleted(Component component) {//当达到最大擦除比例时，被回调
            LogUtil.i("execute onCompleted");
        }
    });

```

### 编译说明

1. 将项目通过git clone 至本地
2. 使用DevEco Studio 打开该项目，然后等待Gradle 构建完成
3. 点击`Run`运行即可（真机运行可能需要配置签名）

### 版权和许可信息

```
Copyright 2016 D_clock爱吃葱花

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```