HarmonyOS 基础技术赋能之绘制圆形图或矩形圆角图 原创 精华

引言

在实际应用开发中，经常会遇到图片处理相关的一些技术，本节主要详细讲述一下矩形圆角图和圆形图的生成技术。

功能介绍

 圆形图或矩形圆角图主要是把矩形图片或者正方形图片经过绘制、裁剪成矩形圆角图或圆形图，进而展示出来。

开发指南

1、从资源文件加载PixelMap 

 PixelMap originMap;
// 创建图像数据源ImageSource对象
InputStream inputStream = getContext().getResourceManager().getResource(resourceId);
ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();
srcOpts.formatHint = "image/jpg";
ImageSource imageSource = ImageSource.create(inputStream, srcOpts);
// 设置图片参数
ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
originMap = imageSource.createPixelmap(decodingOptions);
Image imgOrigin = (Image) findComponentById(ResourceTable.Id_img_origin);
imgOrigin.setPixelMap(originMap);

2、获取原图片的大小

Size originSize = originMap.getImageInfo().size;
PixelMap.InitializationOptions options = new PixelMap.InitializationOptions();
options.size = new Size(originSize.width, originSize.height);
options.pixelFormat = PixelFormat.ARGB_8888;
options.editable = true;

3、创建结果PixMap

PixelMap circlePixelMap = PixelMap.create(options);
Canvas canvas = new Canvas();

4、将结果PixelMap作为画布背景

Texture texture = new Texture(circlePixelMap);
canvas.setTexture(texture);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setDither(true);
PixelMapHolder pixelMapHolder = new PixelMapHolder(PixelMap.create(originMap, options));
PixelMapShader shader = new PixelMapShader(pixelMapHolder, Shader.TileMode.CLAMP_TILEMODE, Shader.TileMode.CLAMP_TILEMODE);
paint.setShader(shader, Paint.ShaderType.PIXELMAP_SHADER);

5、绘制矩形圆角图

RectFloat rect = new RectFloat(20, 20, originSize.width - 20, originSize.height -20);
canvas.drawRoundRect(rect, 20,20, paint);

6、绘制圆形图

canvas.drawCircle(originSize.width * 1.0f / 2, originSize.height * 1.0f / 2, originSize.width * 1.0f / 2, paint);

示例代码

1、xml布局

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
  xmlns:ohos="http://schemas.huawei.com/res/ohos"
  ohos:height="match_parent"
  ohos:width="match_parent"
  ohos:orientation="vertical">
  <Image
    ohos:id="$+id:img_origin"
    ohos:height="100vp"
    ohos:width="100vp"
    ohos:left_margin="120vp"
    ohos:top_margin="20vp"
    ohos:scale_mode="stretch"/>

  <Image
    ohos:id="$+id:img_circle"
    ohos:height="100vp"
    ohos:width="100vp"
    ohos:left_margin="120vp"
    ohos:top_margin="40vp"
    ohos:scale_mode="stretch"/>
</DirectionalLayout>

2、案例代码

MainAbilitySice
package com.isoftstone.roundrectimagedemo.slice;

import com.isoftstone.roundrectimagedemo.ResourceTable;
import java.io.IOException;
import java.io.InputStream;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Image;
import ohos.agp.render.Canvas;
import ohos.agp.render.Paint;
import ohos.agp.render.PixelMapHolder;
import ohos.agp.render.PixelMapShader;
import ohos.agp.render.Shader;
import ohos.agp.render.Texture;
import ohos.agp.utils.RectFloat;
import ohos.global.resource.NotExistException;
import ohos.media.image.ImageSource;
import ohos.media.image.PixelMap;
import ohos.media.image.common.PixelFormat;
import ohos.media.image.common.Size;

public class MainAbilitySlice extends AbilitySlice {

  @Override
  public void onStart(Intent intent) {
    super.onStart(intent);
    super.setUIContent(ResourceTable.Layout_ability_main);
    //从资源文件加载PixelMap
    PixelMap originMap = getPixelMapFromResource(ResourceTable.Media_circle);
    Image imgOrigin = (Image) findComponentById(ResourceTable.Id_img_origin);
    imgOrigin.setPixelMap(originMap);

    //获取原图片的大小
    Size originSize = originMap.getImageInfo().size;
    PixelMap.InitializationOptions options = new PixelMap.InitializationOptions();
    options.size = new Size(originSize.width, originSize.height);
    options.pixelFormat = PixelFormat.ARGB_8888;
    options.editable = true;
    //创建结果PixelMap
    PixelMap circlePixelMap = PixelMap.create(options);
    Canvas canvas = new Canvas();
    //将结果PixelMap作为画布背景
    Texture texture = new Texture(circlePixelMap);
    canvas.setTexture(texture);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setDither(true);
    PixelMapHolder pixelMapHolder = new PixelMapHolder(PixelMap.create(originMap, options));
    PixelMapShader shader = new PixelMapShader(pixelMapHolder, Shader.TileMode.CLAMP_TILEMODE, Shader.TileMode.CLAMP_TILEMODE);
    paint.setShader(shader, Paint.ShaderType.PIXELMAP_SHADER);
    //圆角矩形图
    RectFloat rect = new RectFloat(20, 20, originSize.width - 20, originSize.height -20);
    canvas.drawRoundRect(rect, 20,20, paint);
    /*//圆形图
    canvas.drawCircle(originSize.width * 1.0f / 2, originSize.height * 1.0f / 2, originSize.width * 1.0f / 2, paint);*/
    Image imgCircle = (Image) findComponentById(ResourceTable.Id_img_circle);
    imgCircle.setPixelMap(circlePixelMap);
  }

  private PixelMap getPixelMapFromResource(int resourceId) {
    InputStream inputStream = null;
    try {
      // 创建图像数据源ImageSource对象
      inputStream = getContext().getResourceManager().getResource(resourceId);
      ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();
      srcOpts.formatHint = "image/jpg";
      ImageSource imageSource = ImageSource.create(inputStream, srcOpts);
      // 设置图片参数
      ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
      return imageSource.createPixelmap(decodingOptions);
    } catch (IOException | NotExistException e) {
    } finally {
      if (inputStream != null) {
        try {
          inputStream.close();
        } catch (IOException e) {
        }
      }
    }
    return null;
  }

  @Override
  public void onActive() {
    super.onActive();
  }

  @Override
  public void onForeground(Intent intent) {
    super.onForeground(intent);
  }
}

实现效果

更多原创内容请关注：软通动力HarmonyOS学院