OSCHINA-MIRROR/guangdong-wangduoyu-bdd

Автор: Пэн Вэйцзе

Введение

«Не купишь ледяную крепость, не по карману золотую, из шерсти не выйдет, из пластилина не слепишь, из снега не скатаешь, но мы с помощью программы нарисуем ледяную крепость».

Лучше научить, чем дать рыбу. Сегодня мы шаг за шагом создадим ледяную крепость!

Демонстрация эффекта

bindwendwen

Реализация идеи

1. Создание системы координат

Если хочешь сделать что-то хорошо, сначала подготовь инструменты. С хорошими инструментами можно создать и ледяную крепость, и самолёт, танк или пушку.

@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;
}

Инициализация системы координат:

private Point mCoo;//координаты
private Picture mPicture;//система координат и холст компонентов

/**
 * Инициализация: запись системы координат и сетки
 */
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.getGetYToInt());
    //рисование вспомогательной сетки
    HelpDraw2.drawGrid(recordCanvas, winSize, gridPaint);
    //рисование системы координат
    HelpDraw2.drawCoo(recordCanvas, mCoo, winSize, gridPaint);
    mPicture.endRecording();
}

Рисование системы координат в методе onDraw():

canvas.drawPicture(mPicture);

Класс вспомогательных инструментов рисования:

/**
 * Вспомогательные инструменты рисования
 *
 * @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, coо.getPointY() + 20, paint);
        //нижняя стрелка
        recording.drawLine(coо.getPointX(), winSize.getPointY(), coо.getPointX() - 20, winSize.getPointY() - 40, paint);
        recording.drawLine(соо.getPointX(), winSize.getPointY(), соо.getPointX() + 20, winSize.getPointY() - 40, paint);
        //нарисовать текст для системы координат
        drawText4Coo(recording, coо, winSize, paint);
    }



    /**
     * Нарисовать текст для системы координат
     *
     * @param canvas холст
     * @param coо начало координат
     * @param winSize размер экрана
     * @param paint кисть
     */
    private static void drawText4Cоо(Canvas canvas, Point coо, Point winSize, Paint paint) {
        //рисовать текст
        paint.setTextSize(50);
        canvas.drawText(paint, "x", winSize.getPointX() - 60, соо.getPointY() - 40);
        canvas.drawText(paint, "y", соо.getPointX() - 40, winSize.getPointY() - 60);
        paint.setTextSize(25);
        //текст оси X
        for (int i = 1; i < (winSize.getPointX() - соо.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);**

Это фрагмент кода, в котором рисуются текст и линия на холсте. Текст рисуется с помощью метода drawText, который принимает параметры: paint — кисть для рисования, текст — строка, которую нужно нарисовать, x — координата по горизонтали, y — координата по вертикали.

Линия рисуется с помощью метода drawLine, который также принимает параметры: координаты начала линии, координаты конца линии и кисть для рисования.

*В этом фрагменте кода используются переменные:*

— coo — объект, содержащий координаты;
— i — переменная цикла;
— paint — кисть для рисования;
— canvas — холст, на котором происходит рисование.

**//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, coо.getPointY() - 10, paint);
        }**

Этот фрагмент кода рисует текст и линию на холсте вдоль отрицательной оси X. Цикл for повторяется от 1 до значения coo.getPointX(), делённого на 50. В теле цикла устанавливается ширина линии в 2 пикселя, рисуется текст и линия вдоль отрицательной оси Х.

**//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(coо.getPointX(), coо.getPointY() + 100 * i, coо.getPointX() + 10, coо.getPointY() + 100 * i, paint);
        }**

Данный фрагмент кода рисует текст и линию вдоль положительной оси Y. Цикл for повторяет действия от 1 до разницы между winSize.getPointY и coo.getPointY, делённой на 50.

В теле цикла устанавливается ширина линии в 2 пикселя, рисуется текст и линия вдоль положительной оси Y.

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

Последний фрагмент кода рисует текст и линию вдоль отрицательной оси Y. Цикл for выполняется от 1 до coо.getPointY, разделённого на 50.