这篇文章运用简单易懂的例子给大家介绍鸿蒙自定义组件之鸿蒙画板的概述，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
初识鸿蒙OS 2.0
华为的鸿蒙OS 2.0是目前唯一个有希望和安卓、IOS对抗的全新生态系统。9月10日，在东莞正式发布。华为喊出了“HarmonyOS 2.0 连接无限可能”的口号，将是未来十年很有竞争力的优秀操作系统。
自定义Component
这里我编写一个简易的画板。
1.新建一个类DrawComponment 继承自Componment；
2.实现Component.TouchEventListener，用于对touch事件生成相应的path；
3.实现Component.DrawTask，用于把path画到屏幕上；
代码
DrawComponment
package com.quqx.draw;
import ohos.agp.components.Component;
import ohos.agp.render.Canvas;
import ohos.agp.render.Paint;
import ohos.agp.render.Path;
import ohos.agp.utils.Color;
import ohos.agp.utils.Point;
import ohos.app.Context;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import ohos.media.image.PixelMap;
import ohos.multimodalinput.event.MmiPoint;
import ohos.multimodalinput.event.TouchEvent;
public class DrawComponment extends Component implements Component.DrawTask, Component.TouchEventListener {
private static final String TAG = "DrawComponment";
PixelMap mPixelMap;
Canvas mCanvas;
Path mPath = new Path();
Paint mPaint;
Point mPrePoint = new Point();
Point mPreCtrlPoint = new Point();
public DrawComponment(Context context) {
super(context);
//初始化paint
mPaint = new Paint();
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(5f);
mPaint.setStyle(Paint.Style.STROKE_STYLE);
//添加绘制任务
addDrawTask(this::onDraw);
//设置TouchEvent监听
setTouchEventListener(this::onTouchEvent);
}
@Override
public void onDraw(Component component, Canvas canvas) {
canvas.drawPath(mPath, mPaint);
}
@Override
public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
switch (touchEvent.getAction()) {
case TouchEvent.PRIMARY_POINT_DOWN: {
//鸿蒙Log工具
HiLog.debug(new HiLogLabel(0, 0, TAG), "TouchEvent.PRIMARY_POINT_DOWN");
//获取点信息
MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex());
mPath.reset();
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();
//PRIMARY_POINT_DOWN 一定要返回true
return true;
}
case TouchEvent.PRIMARY_POINT_UP:
break;
case TouchEvent.POINT_MOVE: {
HiLog.debug(new HiLogLabel(0, 0, TAG), "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;
}
}
return false;
}
}MainAbilitySlice
package com.quqx.draw.slice;
import com.quqx.draw.DrawComponment;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.DirectionalLayout.LayoutConfig;
import ohos.agp.components.Text;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.utils.TextAlignment;
public class MainAbilitySlice extends AbilitySlice {
private DirectionalLayout myLayout = new DirectionalLayout(this);
@Override
public void onStart(Intent intent) {
super.onStart(intent);
LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT);
myLayout.setLayoutConfig(config);
DrawComponment drawComponment = new DrawComponment(this);
drawComponment.setLayoutConfig(config);
ShapeElement element = new ShapeElement();
element.setRgbColor(new RgbColor(0, 0, 0));
drawComponment.setBackground(element);
myLayout.addComponent(drawComponment);
super.setUIContent(myLayout);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}关于鸿蒙自定义组件之鸿蒙画板的概述就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
