signed

QiShunwang

“诚信为本、客户至上”

自定义控件扫盲-canvas

2021/6/9 7:05:21   来源:

Canvas使用

旋转

围绕指定点旋转

public final void rotate(float degrees, float px, float py) 

围绕坐标原点旋转

public void rotate(float degrees)

平移

 public void translate(float dx, float dy)

dx dy单位是像素

缩放

sx:x轴缩放的大小

sy:y轴缩放的大小

public void scale(float sx, float sy)

px:x轴的缩放点

py:y轴的缩放点

public final void scale(float sx, float sy, float px, float py)

保存和恢复

canvas.svae():保存画布

canvas.restore(): 释放画布

代码示例:

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas?.save()//保存画布
        canvas?.translate(measuredWidth/2f,measuredHeight/2f)
        for (i in 0..360 step 60){
            canvas?.drawCircle(100f,0f,20f,paint)
            canvas?.rotate(60f)
        }
        canvas?.restore()//释放画布
        canvas?.drawCircle(100f,100f,100f,paint)

    }

本例的代码中,save和restore中间的操作将画布移动到了屏幕中央,然后围绕屏幕中央绘制了六个圆。restore后canvas状态复原,再次画圆的参考点变为了左上角,圆绘制在了左上角

代码实现效果:

 

画圆

cx:圆心x坐标

cy:圆心y坐标

radius:圆半径

public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint) 

画线

startX:绘制起点x坐标

startY:绘制起点y坐标

stopX:绘制终点x坐标

stopY:绘制终点y坐标

一次绘制一条线

public void drawLine(float startX, float startY, float stopX, float stopY,
            @NonNull Paint paint) 

一次性绘制多条线

public void drawLines(@Size(multiple = 4) @NonNull float[] pts, int offset, int count,
            @NonNull Paint paint)

绘制多个点的代码

 override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas?.translate(measuredWidth / 2f, measuredHeight / 2f)
        val lines = floatArrayOf(-200f, 200f, 200f, 200f, 200f, -200f, -200f, -200f)
        canvas?.drawLines(lines, paint)
    }

这段代码的效果就是,绘制两条线:

第一条: (-200,200)--(200,200),

第二条线:(200,-200)--(-200,-200)

绘制效果

画椭圆

画椭圆需要构建一个RectF对象

RectF oval = new RectF(150, 200, 500, 400);// 画一个椭圆  
canvas.drawOval(oval, p);

画弧形

api

public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
            @NonNull Paint paint)

绘制代码

 val oval = RectF(200f, 200f, 500f, 500f)

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        canvas?.drawArc(oval, 0f, 120f, false, paint)
        canvas?.translate(0f,400f)
        canvas?.drawArc(oval, 0f, 120f, true, paint)
    }

绘制效果

画矩形

api

 public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint) 
 public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)

绘制代码

override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas?.apply {
            drawRect(rect, paint)
            translate(0f,500f)
            drawRoundRect(rect,60f,80f,paint)
        }
    }

绘制效果

画多边形

通过Path绘制多边行,path篇有过介绍了

画贝塞尔曲线

通过Path绘制贝塞尔曲线,path篇有过介绍了

画点

api

绘制一个点

public void drawPoint(float x, float y, @NonNull Paint paint)

绘制多个点

 public void drawPoints(@Size(multiple = 2) float[] pts, int offset, int count,
            @NonNull Paint paint)

画图片

绘制图片代码

override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas?.drawBitmap(bitmap, 300f, 300f, paint)
    }

绘制效果