#过年不停更#HarmonyOS-JAVA之手把手教你绘制冰墩墩原创精华

深开鸿

发布于 2022-2-15 14:58

浏览

10收藏

简介

冰墩墩买不到，金墩墩买不起，毛线墩墩不会勾，橡皮泥墩墩不会捏，雪墩墩不会堆，但我们会用程序绘制一个冰墩墩；

授人以鱼，不如授人以渔。今天手把手教大家来一个冰墩墩！

效果演示

#过年不停更#HarmonyOS-JAVA之手把手教你绘制冰墩墩-鸿蒙开发者社区

实现思路

1 建立坐标系

工欲善其事，必先利其器，有的好的工具，冰墩墩也好，飞机坦克大炮都能绘制出来；

#过年不停更#HarmonyOS-JAVA之手把手教你绘制冰墩墩-鸿蒙开发者社区

计算出中心点的问题，这里细节在于中线点和辅助线对齐保证美观

@Override
public boolean onEstimateSize(int widthEstimateConfig, int heightEstimateConfig) {
    int componentWidth = EstimateSpec.getSize(widthEstimateConfig);
    int componentHeight = EstimateSpec.getSize(heightEstimateConfig);
    this.width = componentWidth;
    this.height = componentHeight;
    centerX = this.width / 2;
    centerY = this.height / 2;

    // 保证辅助线取整
    centerX = ((int) (centerX / 50)) * 50;
    centerY = ((int) (centerY / 50)) * 50;

    Logger.d("width:" + width);
    Logger.d("height:" + height);
    Logger.d("centerX:" + centerX);
    Logger.d("centerY:" + centerY);
    recordBg();//初始化时录制坐标系和网格

    setEstimatedSize(
        EstimateSpec.getChildSizeWithMode(componentWidth, componentWidth, EstimateSpec.PRECISE),
        EstimateSpec.getChildSizeWithMode(componentHeight, componentHeight, EstimateSpec.PRECISE)
    );
    return true;
}
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.

初始化坐标系

private Point mCoo;//坐标系
private Picture mPicture;//坐标系和网格的Canvas元件

/**
 * 初始化时录制坐标系和网格
 */
private void recordBg() {
    //准备屏幕尺寸
    Point winSize = new Point(width, height);
    mCoo = new Point(centerX, centerY);
    Paint gridPaint = new Paint();
    mPicture = new Picture();
    Canvas recordCanvas = mPicture.beginRecording(winSize.getPointXToInt(), winSize.getPointYToInt());
    //绘制辅助网格
    HelpDraw2.drawGrid(recordCanvas, winSize, gridPaint);
    //绘制坐标系
    HelpDraw2.drawCoo(recordCanvas, mCoo, winSize, gridPaint);
    mPicture.endRecording();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

onDraw方法中绘制坐标系

canvas.drawPicture(mPicture);
1.

画布辅助类

/**
 * 辅助画布
 *
 * @since 2022-02-09
 */
public class HelpDraw2 {

    /**
     * 绘制网格
     */
    public static void drawGrid(Canvas recordCanvas, Point winSize, Paint paint) {
        //初始化网格画笔
        paint.setStrokeWidth(2);
        paint.setColor(Color.GRAY);
        paint.setStyle(Paint.Style.STROKE_STYLE);
        //设置虚线效果new float[]{可见长度, 不可见长度},偏移值
        paint.setPathEffect(new PathEffect(new float[]{10, 5}, 0));
        recordCanvas.drawPath(HelpPath.gridPath(50, winSize), paint);
    }


    /**
     *   绘制坐标系
     * @param recording 画布
     * @param coo 坐标系原点
     * @param winSize 屏幕尺寸
     * @param paint 画笔
     */
    public static void drawCoo(Canvas recording, Point coo, Point winSize, Paint paint) {
         //初始化网格画笔
        paint.setStrokeWidth(4);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE_STYLE);
        //设置虚线效果new float[]{可见长度, 不可见长度},偏移值
        paint.setPathEffect(null);

        //绘制直线
        recording.drawPath(HelpPath.cooPath(coo, winSize), paint);
        //左箭头
        recording.drawLine(winSize.getPointX(), coo.getPointY(), winSize.getPointX() - 40, coo.getPointY() - 20, paint);
        recording.drawLine(winSize.getPointX(), coo.getPointY(), winSize.getPointX() - 40, coo.getPointY() + 20, paint);
        //下箭头
        recording.drawLine(coo.getPointX(), winSize.getPointY(), coo.getPointX() - 20, winSize.getPointY() - 40, paint);
        recording.drawLine(coo.getPointX(), winSize.getPointY(), coo.getPointX() + 20, winSize.getPointY() - 40, paint);
        //为坐标系绘制文字
        drawText4Coo(recording, coo, winSize, paint);
    }



    /**
     * 为坐标系绘制文字
     *
     * @param canvas 画布
     * @param coo 坐标系原点
     * @param winSize 屏幕尺寸
     * @param paint 画笔
     */
    private static void drawText4Coo(Canvas canvas, Point coo, Point winSize, Paint paint) {
        //绘制文字
        paint.setTextSize(50);
        canvas.drawText(paint, "x", winSize.getPointX() - 60, coo.getPointY() - 40);
        canvas.drawText(paint, "y", coo.getPointX() - 40, winSize.getPointY() - 60);
        paint.setTextSize(25);
        //X正轴文字
        for (int i = 1; i < (winSize.getPointX() - coo.getPointX()) / 50; i++) {
            paint.setStrokeWidth(2);
            canvas.drawText(paint, 100 * i + "", coo.getPointX() - 20 + 100 * i, coo.getPointY() + 40);
            paint.setStrokeWidth(5);
            canvas.drawLine(coo.getPointX() + 100 * i, coo.getPointY(), coo.getPointX() + 100 * i, coo.getPointY() - 10, paint);
        }

        //X负轴文字
        for (int i = 1; i < coo.getPointX() / 50; i++) {
            paint.setStrokeWidth(2);
            canvas.drawText(paint, -100 * i + "", coo.getPointX() - 20 - 100 * i, coo.getPointY() + 40);
            paint.setStrokeWidth(5);
            canvas.drawLine(coo.getPointX() - 100 * i, coo.getPointY(), coo.getPointX() - 100 * i, coo.getPointY() - 10, paint);
        }

        //y正轴文字
        for (int i = 1; i < (winSize.getPointY() - coo.getPointY()) / 50; i++) {
            paint.setStrokeWidth(2);
            canvas.drawText(paint, 100 * i + "", coo.getPointX() + 20, coo.getPointY() + 10 + 100 * i);
            paint.setStrokeWidth(5);
            canvas.drawLine(coo.getPointX(), coo.getPointY() + 100 * i, coo.getPointX() + 10, coo.getPointY() + 100 * i, paint);
        }

        //y负轴文字
        for (int i = 1; i < coo.getPointY() / 50; i++) {
            paint.setStrokeWidth(2);
            canvas.drawText(paint, -100 * i + "", coo.getPointX() + 20, coo.getPointY() + 10 - 100 * i);
            paint.setStrokeWidth(5);
            canvas.drawLine(coo.getPointX(), coo.getPointY() - 100 * i, coo.getPointX() + 10, coo.getPointY() - 100 * i, 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.
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.

2 绘制底图

我们选一张喜欢的冰墩墩作为底图，画笔设置透明度50%；

#过年不停更#HarmonyOS-JAVA之手把手教你绘制冰墩墩-鸿蒙开发者社区

准备画笔

mPixelMapPaint = new Paint();
mPixelMapPaint.setAlpha(0.5f);
1.
2.

绘制图片方法

private void drawPixelMap(Canvas canvas) {
    Optional<PixelMap> image = PixelMapUtil.getPixelMapFromResource(getContext(), ResourceTable.Media_bdd);
    if (image.isPresent()) {
        PixelMap pixelMap = image.get();
        int pw = pixelMap.getImageInfo().size.width;
        int ph = pixelMap.getImageInfo().size.height;
        int offX = centerX - pw / 2;
        int offY = centerY - ph / 2;
        Logger.d("pw:" + pw + " ;ph:" + ph);
        RectFloat pixelRectFloat = new RectFloat(offX, offY, pw + offX, ph + offY);
        canvas.drawPixelMapHolderRect(new PixelMapHolder(pixelMap), pixelRectFloat, mPixelMapPaint);
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

onDraw方法中绘制图片

drawPixelMap(canvas);
1.

3 绘制冰墩墩轮廓

贝塞尔曲线的了解和认识

1.简单认识：(图来源网络)

#过年不停更#HarmonyOS-JAVA之手把手教你绘制冰墩墩-鸿蒙开发者社区

2.二阶贝塞尔曲线控制点寻找示例：

确定起点，终点，和任意选一个控制点

//起点
private Point start = new Point(0, 0);
//终点
private Point end = new Point(400, 0);
//控制点
private Point control = new Point(200, 200);
1.
2.
3.
4.
5.
6.

贝塞尔曲线

@Override
public void onDraw(Component component, Canvas canvas) {
    canvas.save();
    canvas.translate(mCoo.getPointX(), mCoo.getPointY());
    drawHelpElement(canvas);//绘制辅助工具--控制点和基准选
    // 绘制贝塞尔曲线
    mBezierPath.moveTo(start.getPointX(), start.getPointY());
    mBezierPath.quadTo(control.getPointX(), control.getPointY(), end.getPointX(), end.getPointY());
    canvas.drawPath(mBezierPath, mPaint);
    mBezierPath.reset();//清空mBezierPath
    canvas.restore();
    canvas.drawPicture(mPicture);
}

//绘制辅助工具--控制点和基准选
private void drawHelpElement(Canvas canvas) {
    // 绘制数据点和控制点
    mHelpPaint.setColor(new Color(0x8820ECE2));
    mHelpPaint.setStrokeWidth(20);
    canvas.drawPoint(start.getPointX(), start.getPointY(), mHelpPaint);
    canvas.drawPoint(end.getPointX(), end.getPointY(), mHelpPaint);
    canvas.drawPoint(control.getPointX(), control.getPointY(), mHelpPaint);
    // 绘制辅助线
    resetHelpPaint();
    canvas.drawLine(start.getPointX(), start.getPointY(), control.getPointX(), control.getPointY(), mHelpPaint);
    canvas.drawLine(end.getPointX(), end.getPointY(), control.getPointX(), control.getPointY(), mHelpPaint);

}
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.

寻找控制点方法，这个可以找起点，终点，控制点

@Override
public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
    // 根据触摸位置更新控制点，并提示重绘
    MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex());
    control.modify(point.getX() -mCoo.getPointX(),point.getY() -mCoo.getPointY());
    Logger.d("touch control x:" + control.getPointX() + " y:" + control.getPointY());
    invalidate();
    return true;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

触摸点打印

#过年不停更#HarmonyOS-JAVA之手把手教你绘制冰墩墩-鸿蒙开发者社区

效果和实际应用

4，绘制过程动效

开头部分动效的实现

原本是采用AnimatorValue的，发现API7才能实现，我们分段式也多；后面演变采用EventHandler，实现一步步绘制；

EventRunner runnerA = EventRunner.getMainEventRunner();
EventHandler handlerA = new EventHandler(runnerA) {
    @Override
    protected void processEvent(InnerEvent event) {
        super.processEvent(event);
        if (drawStep == 0) {
            drawStep = 1;
        }
        invalidate();
        if (!drawLast) {
            handlerA.sendEvent(1, 10);
        }
    }
};

    public void startDraw() {
        Logger.d(":");
        if (drawLast) {
            drawStep = 0;
            handlerA.sendEvent(1);
            drawLast = false;
        }
    }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

绘制分段式

不断改变childStep的步长即可改变每次绘制的效果

PathMeasure pathMeasure = new PathMeasure(mBezierPath, false);
childStep = pathMeasure.getLength();
//使用画笔虚线效果+偏移
PathEffect effect = new PathEffect(
    new float[]{pathMeasure.getLength(), pathMeasure.getLength()},
    childStep);
mPaint.setPathEffect(effect);
canvas.drawPath(mBezierPath, mPaint);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

总结

1，中心的点的确认，坐标系的建立，可以达到快速开发的效果；

2，本文主要采用二阶贝塞尔曲线绘制；根据第一步的基础，然后再touch事件中找到相对坐标点；

代码地址

bdd: HarmonyOS JAVA之手把手教你绘制冰墩墩 (gitee.com)

更多原创内容请关注：深开鸿技术团队

入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。

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

分类

标签

已于2022-2-25 10:00:49修改

6条回复

按时间正序

按时间倒序

红叶亦知秋

用程序员的方式支持冬奥!

2022-2-15 15:24:45

Uuniy

落实一户一墩

2022-2-15 15:35:57

Piwriw.

实在是绝

2022-2-15 16:15:53

陈浩南xxx

再来个js版

2022-2-15 18:18:26

wx621b32d39837e

idea里怎么运行？我的提示The specified Gradle installation directory 'D:\Huawei\DevEco Studio 3.0.0.601\tools\gradle' does not exist.

2022-2-27 16:14:50

陈浩南xxx 回复了 wx621b32d39837e

idea里怎么运行？我的提示The specified Gradle installation directory 'D:\Huawei\DevEco Studio 3.0.0.601\tools\gradle' does not exist.

改成你有的gradle试试；

2022-3-2 14:28:22

51CTO

51CTO博客

51CTO学堂

#过年不停更#HarmonyOS-JAVA之手把手教你绘制冰墩墩原创精华

简介

效果演示

实现思路

1 建立坐标系

2 绘制底图

3 绘制冰墩墩轮廓

贝塞尔曲线的了解和认识

1.简单认识：(图来源网络)

2.二阶贝塞尔曲线控制点寻找示例：

4，绘制过程动效

总结

代码地址

更多原创内容请关注：深开鸿技术团队

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

#过年不停更#HarmonyOS-JAVA之手把手教你绘制冰墩墩 原创 精华

简介

效果演示

实现思路

1 建立坐标系

2 绘制底图

3 绘制冰墩墩轮廓

贝塞尔曲线的了解和认识

1.简单认识：(图来源网络)

2.二阶贝塞尔曲线控制点寻找示例：

4，绘制过程动效

总结

代码地址

更多原创内容请关注：深开鸿技术团队

目录

订阅鸿蒙技术特刊，精选内容抢先看

#过年不停更#HarmonyOS-JAVA之手把手教你绘制冰墩墩原创精华