更多信息请访问：与华为共建鸿蒙科技社区https://harmonyos.51cto.com/#zz前言：今天是鸿蒙手机内测发布活动。很荣幸受邀到现场。一会儿我可以给你看一张漂亮的照片~。本文旨在让开发者通过一些样例的练习，快速提升肾上腺素，愉快地加入鸿蒙应用开发之旅。整篇文章都是一个完整的实例，我尽量在一篇文章中把内容解释清楚。一些基础知识点可以访问我的另一个系列：《鸿蒙OS应用开发实践》正文（一）创建工程1.新建一个TV工程：2.新建一个Java类：命名为Draw：这是我们绘图的核心组件，所以我们让他继承Component，方便后续调用。需要注意的是，这里导入包名的时候，我们选择第一个：ohos.agp.components包。完成后还是会报错，提醒我们需要创建构造函数：构造函数默认也有很多，我们可以选择第一个（单参数）。(2)创建一个实现绘图工具的基础组件类，然后我们构思下一个绘图板工具需要哪些元素：画笔：用来绘制各种点和线。画板：是用来展示我们所花的，是内容的载体。因此，根据以上元素，我们需要在代码中定义和创建一些内容：PathmPath=newPath();PaintmPaint;PointmPrePoint=newPoint();PointmPreCtrlPoint=newPoint();canvas：画布的意思，属于渲染组件，一般用来渲染各种界面元素，这里需要导入ohos.agp.render.Canvas；packagePath：路径的意思，也属于渲染组件，用来描述绘制的路径。需要导入ohos.agp.render.Path；Paint：表示绘图，属于渲染组件，用于一些绘图操作，需要导入ohos.agp.render.Paint；Point：表示一个点，通常由二维坐标（x,y）组成，需要importohos.agp.utils.Point；所以在上面的代码中，我们首先定义了一些等待使用的工具变量。现在我们缺少一件事，那就是如何交互？一般我们画画，要么用鼠标，要么用触摸屏，要么用电子笔。这里我们使用鸿蒙触控组件来实现。代码中实现Component.TouchEventListener方法：实现onTouchEvent()方法：onTouchEvent包含两个参数：Component表示当前接收到的组件，TouchEvent表示当前的触摸事件。TouchEvent的状态可以通过getAction实例方法获取：TouchEvent.PRIMARY_POINT_DOWN:pressedstateTouchEvent.PRIMARY_POINT_UP:tappedstateliftedTouchEvent.POINT_MOVE:tapanddrag我们需要开始记录点被按下的位置，以及被拖动的人在举起时记录整个轨迹，举起时什么都不做。所以，在onTouchEvent事件函数中，我们的代码是这样写的：),point.getY());mPrePoint.position[0]=point.getX();mPrePoint.position[1]=point.getY();mPreCtrlPoint.position[0]=point.getX();mPreCtrlPoint。position[1]=point.getY();returntrue;}caseTouchEvent.PRIMARY_POINT_UP:break;caseTouchEvent.POINT_MOVE:{break;}MmiPoint：表示人机交互界面的一个Point，用于接收点击事件，需要待导入ohos.multimodalinput.event.MmiPoint；然后点击后，指定路径mPath的moveTo目标为点击当前事件得到的点。同时将两个预制缓存点的坐标也设置为当前点击的点。我们这里暂时不处理吊装操作。直接处理move分支下的操作：caseTouchEvent.POINT_MOVE:{MmiPointpoint=touchEvent.getPointerPosition(touchEvent.getIndex());PointcurrCtrlPoint=newPoint((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）。至此，我们就完成了点画（笔刷）的计算方法。下一步，我们需要实现画笔的这些点和线显示在画布上：添加实现Component.DrawTask:的方法，然后根据提示实现onDraw方法。在onDraw方法中添加如下实现：canvas.drawPath(mPath,mPaint);使用canvas的实例方法drawPath传入画笔和path来实现绘图。到这里还没有结束，我们还需要做一些初始化工作，我们写一个Init函数：privatevoidInit(){mPaint=newPaint();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组件实例时可以自动初始化。(3)调用工具我们写的画图工具在最后调用。回到slice目录，打开MainAbilitySlice文件定义各个方向布局：privateDirectionalLayoutdirectionalLayout=newDirectionalLayout(this);在onStart方法中，创建布局配置，并将配置赋值给方向布局：LayoutConfigconfig=newLayoutConfig(LayoutConfig.MATCH_PARENT,LayoutConfig.MATCH_PARENT);directionalLayout.setLayoutConfig(配置);然后创建刚才写的Draw组件，需要添加importcom.qibiao.drawdemo.Draw;Drawdraw=newDraw(this);设置布局配置draw.setLayoutConfig(config);创建背景元素（这里设置为黑色，黑板嚒~）ShapeElementelement=newShapeElement();element.setRgbColor(newRgbColor(0,0,0));设置背景元素draw.setBackground(element);将组件添加到布局中directionalLayout.addComponent(draw);设置UI内容：super.setUIContent(directionalLayout);完整代码如下：(4)运行效果运行一个电视遥控模拟器，然后运行：手写一个：你好，鸿蒙看起来不错（不要在意细节~）。不过，还不完美，还是给他一个擦除功能吧。回到Draw添加reset方法：然后在MainAbilitySlice中添加一个button，调用clear方法：再次运行已经支持擦除。（5）完整的代码就可以了，本文一定要尽量简洁，最后放代码链接（开源）：https://gitee.com/doufx/draw-component?版权归作者和鸿蒙技术社区，如需转载请注明出处，否则将追究法律责任。了解更多请访问：与华为官方共建鸿蒙科技社区https://harmonyos.51cto.com/#zz
