鸿蒙自定义绘制各种图形（示例代码）原创

陈浩南xxx

发布于 2021-4-30 11:33

浏览

4收藏

方便需要用到时，直接拷贝

鸿蒙自定义绘制各种图形（示例代码）-鸿蒙开发者社区

1，绘制横线

        linePaint = new Paint();
        linePaint.setColor(Color.BLACK);
        linePaint.setAntiAlias(true);
        linePaint.setStrokeWidth(1f);
        linePaint.setStyle(Paint.Style.FILL_STYLE);       
       
        canvas.drawLine(0, 200, width, 200, linePaint);
        canvas.drawLine(0, 100, width, 100, linePaint);
        canvas.drawLine(0, 300, width, 300, linePaint);1.
2.
3.
4.
5.
6.
7.
8.
9.

2，绘制圆

        circlePaint = new Paint();
        circlePaint.setColor(Color.BLUE);
        circlePaint.setAntiAlias(true);
        circlePaint.setStrokeWidth(20f);
        circlePaint.setStyle(Paint.Style.STROKE_STYLE);
 
       // 在界面中绘制一个圆心坐标为(200,200),半径为100的圆
        canvas.drawCircle(200, 200, 100, circlePaint);

        circlePaint.setStyle(Paint.Style.FILL_STYLE);
        // 在界面中绘制一个圆心坐标为(450,200),半径为100的圆 (不包括边框)
        canvas.drawCircle(450, 200, 100, circlePaint);

        circlePaint.setStyle(Paint.Style.FILLANDSTROKE_STYLE);
        // 在界面中绘制一个圆心坐标为(700,200),半径为100的圆 (边框加实体)
        canvas.drawCircle(700, 200, 100, circlePaint);

        // 画 带边框的园
        circlePaint.setStyle(Paint.Style.STROKE_STYLE);
        circlePaint.setColor(Color.RED);
        canvas.drawCircle(950, 200, 100, circlePaint);
        circlePaint.setStyle(Paint.Style.FILL_STYLE);
        circlePaint.setColor(Color.BLUE);
        canvas.drawCircle(950, 200, 100, circlePaint);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

3,画矩形

        rectPaint = new Paint();
        rectPaint.setColor(Color.BLACK);
        rectPaint.setAntiAlias(true);
        rectPaint.setStrokeWidth(10f);
        rectPaint.setStyle(Paint.Style.FILL_STYLE);

       // 画矩形
        canvas.drawRect(100,350,300,550,rectPaint);
        // 画矩形
        rectPaint.setStyle(Paint.Style.FILLANDSTROKE_STYLE);
        Rect rect = new Rect(350,350,550,550);
        canvas.drawRect(rect,rectPaint);

        rectPaint.setStyle(Paint.Style.STROKE_STYLE);
        Rect rect2 = new Rect(600,350,800,550);
        canvas.drawRect(rect2,rectPaint);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

4，画弧度

        arcPaint = new Paint();
        arcPaint.setColor(Color.RED);
        arcPaint.setAntiAlias(true);
        arcPaint.setStrokeWidth(10f);
        arcPaint.setStyle(Paint.Style.STROKE_STYLE);

        rectPaint.setStrokeWidth(1f);
        RectFloat oval = new RectFloat(100,600,300,800);
        canvas.drawRect(oval,rectPaint);
        // 画弧线
        Arc arc = new Arc(0, 165, false);
        canvas.drawArc(oval, arc, arcPaint);


        RectFloat oval2 = new RectFloat(350,600,550,800);
        canvas.drawRect(oval2,rectPaint);
        // 画弧线
        Arc arc2 = new Arc(0, 165, true);
        canvas.drawArc(oval2, arc2, arcPaint);

        RectFloat oval3 = new RectFloat(600,600,800,800);
        canvas.drawRect(oval3,rectPaint);
        arcPaint.setStyle(Paint.Style.FILL_STYLE);
        // 画弧线
        Arc arc3 = new Arc(0, 165, true);
        canvas.drawArc(oval3, arc3, arcPaint);

        RectFloat oval4 = new RectFloat(850,600,1050,800);
        canvas.drawRect(oval4,rectPaint);
        arcPaint.setStyle(Paint.Style.FILL_STYLE);
        // 画弧线
        Arc arc4 = new Arc(0, 165, false);
        canvas.drawArc(oval4, arc4, arcPaint);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.

5，画图片

        pixelMapPaint = new Paint();

        image = PixelMapUtil.getPixelMap(getContext(), ResourceTable.Media_4);

        RectFloat pixelRectFloat = new RectFloat(100,850,550,1250);
        canvas.drawPixelMapHolderRect(new PixelMapHolder(image), pixelRectFloat, pixelMapPaint);
1.
2.
3.
4.
5.
6.

6，绘制渐变的弧形

（示例源代码不在了，就贴出了大概思路）效果图是旋转过的，代码没有旋转

鸿蒙自定义绘制各种图形（示例代码）-鸿蒙开发者社区

    mapShaderPaint  = new Paint();
   RectFloat oval4 = new RectFloat(x - 200, y - 200 - 37, x + 200, y + 200 - 37);


     float[] positions  = new float[]{0, 1f};

        RadialShader sweepGradient = new RadialShader(new Point(x, y), 400, positions, new Color[]{new Color(0x80FF0000), new Color(0x00FF0000)}, Shader.TileMode.CLAMP_TILEMODE);
        mapShaderPaint.setShader(sweepGradient, Paint.ShaderType.RADIAL_SHADER);

 
        // 画弧线
        Arc arc4 = new Arc(-120, 60, true);
        canvas.drawArc(oval4, arc4, mapShaderPaint);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

HarmonyOS

标签

自定义view

已于2022-5-5 15:26:17修改

2条回复

按时间正序

按时间倒序

陈浩南xxx

public class PixelMapUtil {
private static HiLogLabel label = new HiLogLabel(HiLog.LOG_APP, 0x000001, "PixelMapUtil");

/**
* 根据图片资源id获取PixelMap
*
* @param context context
* @param resourceId resourceId
* @return 图片的PixelMap
*/
public static Optional<PixelMap> getPixelMapFromResource(Context context, int resourceId) {
InputStream inputStream = null;
ImageSource imageSource = null;
ImageSource.DecodingOptions decodingOptions = null;
try {
// 创建图像数据源ImageSource对象
inputStream = context.getResourceManager().getResource(resourceId);
ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();
srcOpts.formatHint = "image/jpg";
imageSource = ImageSource.create(inputStream, srcOpts);

// 设置图片参数
decodingOptions = new ImageSource.DecodingOptions();
} catch (IOException e) {
HiLog.info(label, "IOException");
} catch (NotExistException e) {
HiLog.info(label, "NotExistException");
} finally {
if (inputStream != null) {
try {
inputStream.close();
} catch (IOException e) {
HiLog.info(label, "inputStream IOException");
}
}
}

if (imageSource != null && decodingOptions != null) {
return Optional.ofNullable(imageSource.createPixelmap(decodingOptions));
}
return Optional.empty();
}
}