通过鸿蒙OS 2.0的自定义Component写一个画板

开发者训练营官方

发布于 2021-1-6 18:23

浏览

3收藏

这里我编写一个简易的画板。

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;
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.

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);
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.