如何使用画布绘制图片

时间:2014-10-16 12:52:04

标签: android android-canvas

我是Android的新手,目前正在学习画布,我想创建下面的图片类型。 我搜索了它,但无法获得正确的示例。

enter image description here

任何人都可以帮助我吗?我该如何创建它?

2 个答案:

答案 0 :(得分:2)

首先查看代码

public class CustomView extends View {

    public static final int NO_OF_VERTICAL_CIRCLES = 5;
    public static final int NO_OF_HORIZONTAL_CIRCLES = 4;

    public static final float RADIUS = 60f;

    private Paint mPaintImage;

    private RectF[] rectangles = new RectF[NO_OF_HORIZONTAL_CIRCLES
            * NO_OF_VERTICAL_CIRCLES];

    // Just creating a view for drawing
    public CustomView(Context context) {
        super(context);
        init();
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        // This is paint for your drawing
        mPaintImage = new Paint();

        mPaintImage.setAntiAlias(true);
        mPaintImage.setFilterBitmap(true);
        mPaintImage.setDither(true);
        // color for circle
        mPaintImage.setColor(Color.RED);
        // fill style
        mPaintImage.setStyle(Paint.Style.FILL);

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {

        // Account for padding
        float xpad = (float) (getPaddingLeft() + getPaddingRight());
        float ypad = (float) (getPaddingTop() + getPaddingBottom());
        // getting area for drawing you can also get it using getWidth() and getHeight()
        float ww = (float) w - xpad;
        float hh = (float) h - ypad;

        Creating Rectangle for drawing your circles
        for (short i = 0; i < NO_OF_HORIZONTAL_CIRCLES; i++) {
            for (short j = 0; j < NO_OF_VERTICAL_CIRCLES; j++) {
                // calculating horizontal centers
                float horizontalCenter = RADIUS + i * (ww - RADIUS * 2)
                        / (NO_OF_HORIZONTAL_CIRCLES - 1);
                // calculating vertical centers
                float verticalCenter = RADIUS + j * (hh - RADIUS * 2)
                        / (NO_OF_VERTICAL_CIRCLES - 1);

                rectangles[j + NO_OF_VERTICAL_CIRCLES * i] = new RectF(
                        horizontalCenter - RADIUS, verticalCenter - RADIUS,
                        horizontalCenter + RADIUS, verticalCenter + RADIUS);

            }
        }

        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // Here drawing circles
        for (RectF rect : rectangles) {
            canvas.drawCircle(rect.centerX(), rect.centerY(), RADIUS,
                    mPaintImage);
        }
        super.onDraw(canvas);
    }

我在这里所做的只是在网格中划分屏幕,然后找出中心并相应地绘制圆圈。

以类似的方式绘制位图,矩形。

您还可以在空位图上绘图。

我希望这会有所帮助。

PS(截屏)::

enter image description here

答案 1 :(得分:2)

由于您是Android新手,学习画布这里是一个扩展视图的简单类代码 - 您可以覆盖画布onDraw以在画布上绘制

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View {

    private Paint p;

    public MyView(Context context, AttributeSet aSet) {

                    super(context, aSet);

                  //it's best not to create any new objects in the onDraw

                    //initialize as class variables

                    p = new Paint();

    }


       @Override

       public void onDraw(Canvas canvas) {

            //paint specs

           p.setColor(Color.BLACK);
           p.setStyle(Paint.Style.FILL);
           p.setDither(true);
           p.setAntiAlias(true);
           p.setStrokeJoin(Paint.Join.ROUND);
           p.setStrokeCap(Paint.Cap.ROUND);

           // space between dots

           int delta = 50;

           // dot radius

           int r = 10;

           // 1st row

           canvas.drawCircle(canvas.getWidth()/4, canvas.getHeight()/4, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta, canvas.getHeight()/4, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta*2, canvas.getHeight()/4, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta*3, canvas.getHeight()/4, r, p);

           // 2nd row

           canvas.drawCircle(canvas.getWidth()/4, canvas.getHeight()/4+delta, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta, canvas.getHeight()/4+delta, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta*2, canvas.getHeight()/4+delta, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta*3, canvas.getHeight()/4+delta, r, p);

           // 3rd row

           canvas.drawCircle(canvas.getWidth()/4, canvas.getHeight()/4+delta*2, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta, canvas.getHeight()/4+delta*2, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta*2, canvas.getHeight()/4+delta*2, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta*3, canvas.getHeight()/4+delta*2, r, p);


           // 4th row

           canvas.drawCircle(canvas.getWidth()/4, canvas.getHeight()/4+delta*3, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta, canvas.getHeight()/4+delta*3, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta*2, canvas.getHeight()/4+delta*3, r, p);
           canvas.drawCircle(canvas.getWidth()/4+delta*3, canvas.getHeight()/4+delta*3, r, p);

       }


}