How to draw HarmoneyOS National Flag?

Birthday of the motherland. Of course I want to rub it in

Let’s take a look at the renderings

###Github complete code: AvatarDemoFor101

Now for the headline question. In the Java UI framework of Hung Meng (because there is JS UI), only the Java UI part is covered here. First of all, we don’t need to customize or inherit a Component and then rewrite a bunch of methods to implement our functionality. Just use the Component#addDrawTask method. And theoretically available to all Components.

Such as:

// This code is under MainAbilitySlice
/ / find the Component
Image image = (ohos.agp.components.Image) findComponentById(ResourceTable.Id_img_avatar);
// Add a drawing task to Componentimage.addDrawTask(...) ;// omit details. See the code below for the implementation
Copy the code

This method takes two parameters:

  • Task represents the DrawTask to be added
  • Layer to specifytaskThe location of the. The optional value isDrawTask#BETWEEN_BACKGROUND_AND_CONTENTorDrawTask#BETWEEN_CONTENT_AND_FOREGROUND(Default value). The two choices are easy to understand, the difference in order of drawingBackground ->DrawTask-> Component content, orBackground -> Component content ->DrawTask

Now take a closer look at our DrawTask

// This code is under MainAbilitySlice
image.addDrawTask((component, canvas) -> {

    // Draw a gradient background for the flag
    RectFloat rect = new RectFloat(0f.0f, component.getWidth(), component.getHeight());
    Paint paint = new Paint();
    LinearShader linearShader = new LinearShader(
    new Point[]{new Point(0.0), new Point(component.getWidth() * 2 / 3, component.getHeight())},
    new float[] {0f.1f},
    new Color[]{Color.RED, Color.TRANSPARENT}, Shader.TileMode.CLAMP_TILEMODE
    );
    paint.setShader(linearShader, Paint.ShaderType.LINEAR_SHADER);
    canvas.drawRect(rect, paint);

    // Draw five stars
    Paint paintImage = new Paint();
    paintImage.setAntiAlias(true);
    paintImage.setStrokeCap(Paint.StrokeCap.ROUND_CAP);
    paintImage.setStyle(Paint.Style.STROKE_STYLE);
    PixelMap pixelMaps = PixelMapUtils.createPixelMapByResId(ResourceTable.Media_cn_starts, getContext()).get();
    int imageWidth = pixelMaps.getImageInfo().size.width;
    int imageHeight = pixelMaps.getImageInfo().size.height;
    // Specify the area of the image to display on the screen
    RectFloat dst = new RectFloat(0.0,
    component.getWidth() * 2 / 3, component.getWidth() * 2 / 3 * imageHeight / imageWidth);
    canvas.drawPixelMapHolderRect(new PixelMapHolder(pixelMaps), dst, paintImage);
    });
Copy the code

Using the idea of hierarchical drawing, first draw a gradient rectangle (red to transparent), and then draw the picture of five stars. One of the more difficult things I’ve encountered here is the drawing of the gradient background (difficult if not familiar with the API). Now tell me what I know. #### defines a linear shader

LinearShader linearShader = new LinearShader(
    new Point[]{new Point(0.0), new Point(component.getWidth() * 2 / 3, component.getHeight())},
    new float[] {0f.1f},
    new Color[]{Color.RED, Color.TRANSPARENT}, Shader.TileMode.CLAMP_TILEMODE
    );
paint.setShader(linearShader, Paint.ShaderType.LINEAR_SHADER);
Copy the code

This line of code, we’re passing in four arguments.

New Point[]{new Point(0, 0), new Point(Component.getwidth () * 2/3, component.getheight ())}, Are the start and end of the gradient respectively (in our case, from the top left to the component 2/3 * width, the point at the bottom of the component).

New float[]{0f, 1f} and new Color[]{color.red, color.transparent} are used together. The former indicates the position of all colors in the shader color array (the latter).

Finally, shader.tileMode. The edge color that represents the original shaded image will be shaded over the extra portion. We defined the gradient area to the middle of the horizontal (tweaked the code to gradient from the left side of the component to the middle of the component horizontally). See diffabilityslicee #MyDrawTask for details, i.e. the right part of the component is not in the shader defined by our shader. This parameter has three enumerated values. CLAMP_TILEMODE, MIRROR_TILEMODE, and REPEAT_TILEMODE respectively.

Please note the differences in the figure below:

Look at the differences in defining TileMode.

  • CLAMP_TILEMODE indicates that the edge color of the original shaded image will be shaded in the extra part. That is, the right half retains the content of the original image

  • MIRROR_TILEMODE indicates that an alternate mirror of the original shaded image will be drawn horizontally and vertically over the additional portion. Mirror, symmetric, according to this statement, when the end point is set in the center of the screen, it should be > < so that all four directions mirror. Why is that? Look forward to more code or have friends know can leave a message.

  • REPEAT_TILEMODE means that the original shadow image will be repeatedly drawn horizontally and vertically over the excess. Repeat the shader action

The code and logic are very simple ~

conclusion

API now learn now sell, so write bad place please kindly comment. Learning something new isn’t easy, but it’s fun. PSG.LGD go!! Happy National Day everyone!!

inspiration

Dig friends article Android generated National Day avatar – son

Mr Figure

If you want it, you can search “headphone clip face”.