#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码) 原创 精华

涂启标
发布于 2020-12-16 10:43
浏览
9收藏

言:#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

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

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 

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

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

 

正文

 

(一)创建项目

 

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

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

2.创建一个新的Java类:

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 

命名为Draw: 

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 

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

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

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

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

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

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 

 

(二)实现绘画工具

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

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 

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

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

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

 

    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方法: 

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 实现onTouchEvent()方法: 

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 

onTouchEvent包含两个参数:Component表示当前接收的组件,TouchEvent表示当前的触摸事件。

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 

 

通过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)上:

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

追加实现Component.DrawTask的方法: 

然后根据提示实现onDraw方法 

在onDraw方法中添加如下实现:

 canvas.drawPath(mPath, mPaint);

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区


使用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组件实例时自动初始化。

 

 

(三)调用工具

最后时调用我们写的这个绘画工具。

回到slice目录,并打开MainAbilitySlice文件 

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 

定义各一个方向布局:

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);

 

完整代码如下:

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 

 

 

(四)运行效果

运行一个TV的远程模拟器,然后run:

手写一个:你好,鸿蒙

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 

看起来还不错(别在意细节~)。

不过,还不够完美,我们再给他弄个擦除的功能。

回到Draw

添加一个重置的方法: 

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

 

 

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

#2020征文-TV#10分钟鸿蒙应用实战开发:鸿蒙手绘板 (含源代码)-鸿蒙开发者社区

再次运行已经支持擦除。

 

(五)完整代码

ok,本篇已经务必尽量精简了,最后放上代码链接(已开源):

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

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2020-12-17 08:43:33修改
7
收藏 9
回复
举报
5条回复
按时间正序
/
按时间倒序
鸿蒙开发者社区官方账号
鸿蒙开发者社区官方账号

征文大赛正在火热进行中,楼主这么优秀的文章真的不考虑参加吗?

 

例如这篇在标题开头添加“#2020征文-TV#“,
再找到相应的专栏位置投稿,

就可以参加比赛啦!

 

详细步骤可以点击链接https://harmonyos.51cto.com/posts/1940进行了解

 

用更多的文章来赢取更多的奖励和人气吧!期待楼主后续的活跃表现。

1
回复
2020-12-16 11:02:12
鲜橙加冰
鲜橙加冰

涂老师加油!!!

回复
2020-12-18 18:25:22
wx601b91992253a
wx601b91992253a

你好!我是做嵌入式QTC++的,一直觉得鸿蒙以后很有可能会挑战QTC++在嵌入式linux的江湖地位,所以比较好奇问下,请问到时候从QTC++转过来鸿蒙开发,会不会比较顺利?或者说接口和帮助文档这些是否完整?

回复
2021-2-4 20:08:03
cloud_code
cloud_code

很不错哟,照着编写了一遍,完美运行。

回复
2021-2-4 23:47:48
白鹿白鹿
白鹿白鹿

牛逼

 

回复
2021-4-8 15:53:53
回复
    相关推荐