#星光计划2.0# HarmonyOS自定义组件之图层的使用 原创 精华

    public interface DrawTask {
        int BETWEEN_BACKGROUND_AND_CONTENT = 1;
        int BETWEEN_CONTENT_AND_FOREGROUND = 2;

        void onDraw(Component component, Canvas canvas);
    }
1.
2.
3.
4.
5.
6.

public class CustomText extends Text {

    public CustomText(Context context, AttrSet attrSet) {
        super(context, attrSet);
        init();
    }

    private void prepare() {
        // 绘制红色背景
        ShapeElement background = new ShapeElement();
        background.setShaderType(ShapeElement.RECTANGLE);
        background.setRgbColor(new RgbColor(255,0,0));
        setBackground(background);
        // 绘制白色文字
        setText("你好你好你好你好你好");
        setTextColor(Color.WHITE);
    }

    private void init() {
        prepare();
        // 在BETWEEN_BACKGROUND_AND_CONTENT图层上绘制蓝色矩形
        addDrawTask(new BackDrawTask(), DrawTask.BETWEEN_BACKGROUND_AND_CONTENT);
        // 在BETWEEN_CONTENT_AND_FOREGROUND图层上绘制绿色矩形
        addDrawTask(new ForeDrawTask(), DrawTask.BETWEEN_CONTENT_AND_FOREGROUND);
    }

    // BETWEEN_BACKGROUND_AND_CONTENT
    private static class BackDrawTask implements DrawTask {
        @Override
        public void onDraw(Component component, Canvas canvas) {
            final int offset = 50;
            Paint paint = new Paint();
            paint.setStyle(Paint.Style.FILL_STYLE);
            paint.setColor(Color.BLUE);
            canvas.drawRect(new Rect(offset, offset, component.getWidth() - offset, component.getHeight() - offset), paint);
        }
    }

    // BETWEEN_CONTENT_AND_FOREGROUND
    private static class ForeDrawTask implements DrawTask {
        @Override
        public void onDraw(Component component, Canvas canvas) {
            final int offset = 100;
            Paint paint = new Paint();
            paint.setStyle(Paint.Style.FILL_STYLE);
            paint.setColor(Color.GREEN);
            canvas.drawRect(new Rect(offset, offset, component.getWidth() - offset, component.getHeight() - offset), paint);
        }
    }
}
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.

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <com.example.myapplication.CustomText
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:layout_alignment="horizontal_center"
        ohos:text_size="40vp" />

</DirectionalLayout>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

public class CustomButton extends Button implements Component.TouchEventListener, Component.DrawTask {
    private float downX, downY;
    private int maxRadius;
    private float currentRadius;
    private final Paint paint = new Paint();

    {
        paint.setColor(Color.YELLOW);
        paint.setStyle(Paint.Style.FILL_STYLE);
    }

    private AnimatorValue av = new AnimatorValue();

    public CustomButton(Context context, AttrSet attrSet) {
        super(context, attrSet);
        av.setValueUpdateListener((animatorValue, v) -> {
            currentRadius = maxRadius * v;
            invalidate();
        });
        init();
    }

    @Override
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        if (touchEvent.getAction() == TouchEvent.PRIMARY_POINT_DOWN) {
            if (maxRadius == 0) {
                int w = component.getWidth();
                int h = component.getHeight();
                maxRadius = (int) Math.sqrt(w * w + h * h);
            }
            int index = touchEvent.getIndex();
            MmiPoint pointer = touchEvent.getPointerPosition(index);
            downX = pointer.getX();
            downY = pointer.getY();
            av.cancel();
            av.start();
            return true;
        } else if (touchEvent.getAction() == TouchEvent.PRIMARY_POINT_UP) {
            av.cancel();
            currentRadius = 0;
            invalidate();
            return true;
        }
        return false;
    }

    private void init() {
        setTouchEventListener(this);
        addDrawTask(this, DrawTask.BETWEEN_BACKGROUND_AND_CONTENT);
    }

    @Override
    public void onDraw(Component component, Canvas canvas) {
        canvas.drawCircle(downX, downY, currentRadius, paint);
    }
}
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.

public class CustomImage extends Image implements Component.DrawTask {
    private final Paint paint = new Paint();

    {
        paint.setColor(Color.YELLOW);
        paint.setStyle(Paint.Style.FILL_STYLE);
        paint.setAlpha(0.3f);
    }

    public CustomImage(Context context, AttrSet attrSet) {
        super(context, attrSet);
        // 图片蒙层是在图片内容上加一个遮罩，因此需要在内容层和前景层进行蒙层绘制
        addDrawTask(this, DrawTask.BETWEEN_CONTENT_AND_FOREGROUND);
    }

    @Override
    public void onDraw(Component component, Canvas canvas) {
        canvas.drawRect(new Rect(0, 0, component.getWidth(), component.getHeight()), paint);
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.