# WhiteBoard

**Repository Path**: dot_happydz_admin/WhiteBoard

## Basic Information

- **Project Name**: WhiteBoard
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-08-17
- **Last Updated**: 2021-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WhiteBoard

#### 项目介绍

- 项目名称：WhiteBoard
- 所属系列：openharmony的第三方组件适配移植
- 功能：是一个可涂鸦、绘图、添加文字、图像（可旋转缩放）、背景的Fragment，其中主要由SketchView利用matrix完成所有图形绘制操作。
- 项目移植状态：主功能完成，画布添加文本功能，由于api问题暂无法自适应换行
- 调用差异：1. 画布添加文本功能，由于api暂无法设置最大长度无法自适应变化文本框，不能随文字的做少变化和换行（输入文字的文本框大小未随文字的多少而变化）
  2. 画布中做了保存操作，但是api无效：进行返回操作后，画板修改内容无法保存（进行返回操作后，画板修改内容未保存）
- 开发版本：sdk6，DevEco Studio2.2 Beta1
- 基线版本：master分支

#### 效果演示

<img src="gif/WhiteBoard.gif"></img>

#### 安装教程

1.在项目根目录下的build.gradle文件中，
```
allprojects {
   repositories {
       maven {
           url 'https://s01.oss.sonatype.org/content/repositories/releases/'
       }
   }
}
```
2.在entry模块的build.gradle文件中，
```
dependencies {
   implementation('com.gitee.chinasoft_ohos:WhiteBoard:1.0.0')
   ......
}
```
在sdk6，DevEco Studio2.2 Beta1 下项目可直接运行 如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件， 并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

#### 使用说明

Demo中调用library组件库，由于组件库是通过Fraction实现自定义调用，所以在demo中只需要设置进入操作。

1、布局文件中设置自定义组件的显示容器：
```xml
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <StackLayout
        ohos:id="$+id:fl_main"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

    </StackLayout>

</DirectionalLayout>
```

代码调用效果
```java
    WhiteBoardFraction whiteBoardFraction = new WhiteBoardFraction();
    ((FractionAbility) getAbility()).getFractionManager().startFractionScheduler()
            .add(ResourceTable.Id_fl_main, whiteBoardFraction, "fraction")
            .submit();
```

主功能主要实现在 WhiteBoardFraction中，菜单效果如下：

 ```xml
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="#FFFFFF">

    <DirectionalLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:above="$id:controlLayout"
        ohos:background_element="#efeded"
        >

        <ListContainer
            ohos:id="$+id:sketch_data_gv"
            ohos:visibility="hide"
            ohos:width="match_parent"
            ohos:height="match_parent"
            ohos:padding="5vp"
            />

        <com.yinghe.whiteboardlib.view.SketchView
            ohos:id="$+id:sketch_view"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:focusable="focus_enable"
            ohos:layout_alignment="center"
            />

    </DirectionalLayout>

    <!--底部菜单-->
    <DirectionalLayout
        ohos:id="$+id:controlLayout"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:background_element="#eeeeee"
        ohos:align_parent_bottom="true"
        >

        <DirectionalLayout
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:background_element="#eeeeee"
            ohos:bottom_padding="2vp"
            ohos:left_padding="15vp"
            ohos:orientation="horizontal"
            ohos:right_padding="15vp"
            ohos:top_padding="2vp">

            <Image
                ohos:id="$+id:btn_add"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:image_src="$media:ic_add_small"
                ohos:padding="2vp"
                ohos:weight="1"
                />

            <Image
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:padding="2vp"
                ohos:weight="1"/>

            <Image
                ohos:id="$+id:btn_stroke"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:image_src="$media:stroke_type_rbtn_draw_checked"
                ohos:padding="3vp"
                ohos:weight="1"
                />

            <Image
                ohos:id="$+id:btn_eraser"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:alpha="0.4"
                ohos:image_src="$media:ic_eraser"
                ohos:weight="1"/>

            <Image
                ohos:id="$+id:btn_undo"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:alpha="0.4"
                ohos:image_src="$media:ic_undo"
                ohos:weight="1"/>

            <Image
                ohos:id="$+id:btn_redo"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:alpha="0.4"
                ohos:image_src="$media:ic_redo"
                ohos:weight="1"/>

            <Image
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"/>

            <Image
                ohos:id="$+id:btn_photo"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:image_src="$media:ic_photo"
                ohos:weight="1"/>

            <Image
                ohos:id="$+id:btn_background"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:image_src="$media:ic_background"
                ohos:weight="1"/>

            <Image
                ohos:id="$+id:btn_drag"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:alpha="0.4"
                ohos:image_src="$media:ic_drag"
                ohos:weight="1"/>

            <Image
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:weight="1"/>

            <Image
                ohos:id="$+id:btn_save"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:image_src="$media:ic_file"
                ohos:weight="1"/>

            <Image
                ohos:id="$+id:btn_empty"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:image_src="$media:ic_empty"
                ohos:weight="1"/>

            <Image
                ohos:id="$+id:btn_send_space"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:visibility="hide"
                ohos:weight="1"
                />

            <Image
                ohos:id="$+id:btn_send"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:image_src="$media:ic_teacher"
                ohos:visibility="hide"
                ohos:weight="1"
                />
        </DirectionalLayout>
    </DirectionalLayout>

</DependentLayout>
 ```

2、自定义组件类 SketchView

该类是实现全部功能的主要类。
 ```xml
    <com.yinghe.whiteboardlib.view.SketchView
        ohos:id="$+id:sketch_view"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:focusable="focus_enable"
        ohos:layout_alignment="center"
        />
```
有如下几个调用接口：
```java
    mSketchView.setEditMode(SketchView.getEditStroke()); // 画笔
    mSketchView.setStrokeType(STROKE_TYPE_ERASER); // 橡皮檫
    mSketchView.undo(); // 撤销
    mSketchView.redo();  // 反撤销
    mSketchView.createCurThumbnailBM(); // 设置背景

```

#### 测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异

当前版本demo部分功能暂不支持模拟器运行

#### 版本迭代

- 1.0.0