太阳花绘制代码_10分钟鸿蒙应用实战开发：鸿蒙手绘板 （含源代码）

本篇旨在通过实践一些样例，让开发者们快速提高肾上腺素，欢乐的加入鸿蒙应用开发之旅。整篇就是一个完整的实操样例，我也尽量在一片中把内容都讲清楚。

基础的一些知识点，可以访问我另一个系列 《鸿蒙OS应用开发实践》：

https://harmonyos.51cto.com/posts/1898

 

01

创建项目

① 创建一个新的 TV 项目： ② 创建一个新的 Java 类： 命名为 Draw：

这个作为我们的绘画的核心组件，所以我们让他继承 Component，方便后面的调用。

需要注意的是， 这里导入包名的时候，我们选择第一个：ohos.agp.components 包。 完成后，依然会报错，提示我们需要创建构造函数： 同样默认会有很多构造方法，我们选择第一个(单个参数)即可。

02

实现绘画工具

这样一个基础的组件类就创建好了，接着我们构思下一画板工具里需要哪些元素：

画笔：用于画出各种点和线。画板：用于展现我们到底花了什么，它是内容的载体。

所以，根据以上这些元素，在接下来我们需要在代码里定义和创建一些内容：

Path mPath = new Path();

Paint mPaint;

Point mPrePoint = new Point();

Point mPreCtrlPoint = new Point();

Canvas：画布的意思，属于渲染组件，一般用于渲染各种界面元素，这里需要  import ohos.agp.render.Canvas;

Path：路径的意思，也属于渲染组件，用于描述绘制的路径。需要 import ohos.agp.render.Path;

Paint：表示绘制，属于渲染组件，用于一些绘制操作，需要 import ohos.agp.render.Paint;

Point：表示一个点，通常由二维坐标(x，y)组成，需要 import ohos.agp.utils.Point;

所以上面的代码，我们先定义了一些等待使用的工具变量。

现在我们缺少了一个东西，那就是如何交互？一般的，绘图这样的，我们要么鼠标，要么触屏，要么就是电子绘笔等。这里我们使用鸿蒙触摸组件来实现。

在代码中去实现 Component.TouchEventListener 方法： 实现 onTouchEvent()方法： onTouchEvent 包含两个参数：Component 表示当前接收的组件，TouchEvent 表示当前的触摸事件。

通过 getAction 实例方法可以获取 TouchEvent 的状态：

• TouchEvent.PRIMARY_POINT_DOWN：按下状态

• TouchEvent.PRIMARY_POINT_UP：点按状态抬起

• TouchEvent.POINT_MOVE：点按拖动

我们需要在按下的时候开始记录点的位置，拖动的时候记录下整个轨迹，而抬起的时候则不做任何事情。

所以，在 onTouchEvent 事件函数中，我们的代码这样写：

switch (touchEvent.getAction()) {

    case TouchEvent.PRIMARY_POINT_DOWN: {

        MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex());

        mPath.moveTo(point.getX(), point.getY());

        mPrePoint.position[0] = point.getX();

        mPrePoint.position[1] = point.getY();

        mPreCtrlPoint.position[0] = point.getX();

        mPreCtrlPoint.position[1] = point.getY();

        return true;

    }

    case TouchEvent.PRIMARY_POINT_UP:

        break;

    case TouchEvent.POINT_MOVE: {

        break;

    }

MmiPoint：表示是人机交互接口的一个 Point，这里用来接收点击事件的点，需要 import ohos.multimodalinput.event.MmiPoint;

然后在点击下去的这一下，指定路径 mPath 的 moveTo 目标为当前事件点击获得的点。

同时也设置了两个预制缓存点的坐标为当前点击的点。抬起的操作，我们这里暂时不做处理。

直接来处理下移动分支下的操作：

case TouchEvent.POINT_MOVE: {

    MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex());

    Point currCtrlPoint = new Point((point.getX() + mPrePoint.position[0]) / 2,

            (point.getY() + mPrePoint.position[1]) / 2);

    mPath.cubicTo(mPrePoint, mPreCtrlPoint, currCtrlPoint);

    mPreCtrlPoint.position[0] = currCtrlPoint.position[0];

    mPreCtrlPoint.position[1] = currCtrlPoint.position[1];

    mPrePoint.position[0] = point.getX();

    mPrePoint.position[1] = point.getY();

invalidate();

    break;

解析：同样用 MmiPoint 来接收点击输入，然后先说下 mPath.cubicTo：使用 path 的 cubicTo 方法来实现三次贝塞尔曲线，就是说两个点之间的线有两个控制点。

这样可以让曲线更加的平滑,它需要输入三个点的参数，所以，我们之前定义了两个 Point 变量，这里就需要用上了。

整体上的原理就是，先把点击获得第一个点传入到曲线函数中，然后计算当前点击的位置加上第一个点的二分之一偏移量来细化得到一个更小的值来作为第三个参数。

而第二个参数，我们让缓存的另一个点直接接收当前点击的点的值，然后传入到第二个参数中，最后又更新当前位置给第一个点，这样第一个点传入(旧的点)，加上拖动后的当前点(新点)。

在当前点的二分偏移量的点，构成了三点传给了曲线函数，最后重新更新旧的点，让旧点变成一个新的位置，再次拖动的时候，就全部有了新的值，形成一个闭环。

invalidate() 函数表示申请重新绘制(刷新 UI)。至此，我们就完成了点绘制(画笔)的计算方法。

下一步，我们要实现让画笔的这些点和线呈现到画板(Canvas)上：

追加实现 Component.DrawTask 的方法：然后根据提示实现 onDraw 方法 

在 onDraw 方法中添加如下实现：canvas.drawPath(mPath, mPaint);

使用 canvas 的实例方法 drawPath 来将画笔和路径传入实现绘制。

到这里还没完，我们还需要做一些初始化的工作，我们写一个 Init 函数：

private  void Init(){

    mPaint = new Paint();

    mPaint.setColor(Color.WHITE);

    mPaint.setStrokeWidth(5f);

    mPaint.setStyle(Paint.Style.STROKE_STYLE);

    addDrawTask(this::onDraw);

   setTouchEventListener(this::onTouchEvent);

}

这里将画笔实例化，并设置颜色、粗细及样式。然后添加绘制任务 addDrawTask、设置点击事件的监听 setTouchEventListener，这俩函数分别是画布和事件监听内置的函数，并非自定义的。

最后，我们需要在 Draw 的构造函数中调用这个 Init() 方法，这样就可以在使用 new 创建这个 Draw 组件实例时自动初始化。

03

调用工具

最后时调用我们写的这个绘画工具。回到 slice 目录，并打开 MainAbilitySlice 文件： 定义各一个方向布局：

private DirectionalLayout directionalLayout = new DirectionalLayout(this);

在 onStart 方法中，创建一个布局配置，并将配置指定给方向布局：

LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT);

directionalLayout.setLayoutConfig(config);

接着创建刚才写好的 Draw 组件，需要添加：

import com.qibiao.drawdemo.Draw;
Draw draw = new Draw(this);

设置布局配置：

draw.setLayoutConfig(config);

创建背景元素(这里设置为黑色，黑板嚒～)：

ShapeElement element = new ShapeElement();
element.setRgbColor(new RgbColor(0, 0, 0));

设置背景元素：

draw.setBackground(element);

将组件添加到布局中：

directionalLayout.addComponent(draw);

设置 UI 内容：

super.setUIContent(directionalLayout);

完整代码如下：

04

运行效果

运行一个 TV 的远程模拟器，然后 run：

手写一个：你好，鸿蒙

看起来还不错(别在意细节～)。不过，还不够完美，我们再给他弄个擦除的功能。

回到 Draw，添加一个重置的方法：

然后再到 MainAbilitySlice 中添加一个按钮，并调用 clear 方法： 

再次运行已经支持擦除。

05

完整代码

OK，本篇已经务必尽量精简了，最后放上代码链接(已开源)：

https://gitee.com/doufx/draw-component

点“阅读原文”了解更多