#2020征文-TV#10分钟鸿蒙应用实战开发：鸿蒙手绘板 （含源代码）

目录：
前言
创建项目
实现绘画工具
调用工具
运行效果
完整代码

前言：

今天是鸿蒙的手机beta发布活动，很荣幸受邀来到现场，一会儿可以给大家上个靓照～。

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

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

正文

（一）创建项目

1.创建一个新的TV项目:

2.创建一个新的Java类：

命名为Draw:

这个作为我们的绘画的核心组件，所以我们让他继承Component，方便后面的调用。需要注意的是，这里导入包名的时候，我们选择第一个：ohos.agp.components包。

完成后，依然会报错，提示我们需要创建构造函数：

同样默认会有很多构造方法，我们选择第一个（单个参数）即可。

（二）实现绘画工具

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

画笔：用于画出各种点和线。

画板：用于展现我们到底花了什么，它是内容的载体。

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

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;

    }

查看更多章节

作者：涂启标
想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com/