自定义控件扫盲-canvas

简介: 自定义控件扫盲-canvas

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状态复原,再次画圆的参考点变为了左上角,圆绘制在了左上角

代码实现效果:

image.png


画圆

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)

绘制效果

image.png


画椭圆

画椭圆需要构建一个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)
    }
复制代码


绘制效果

image.png


画矩形

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)
        }
    }
复制代码
绘制效果

image.png


画多边形

通过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)
    }
复制代码
绘制效果

image.png



相关文章
|
2月前
|
存储 缓存 移动开发
PixiJS源码分析系列:第三章 使用 canvas 作为渲染器
PixiJS源码分析系列:第三章 使用 canvas 作为渲染器
|
2月前
|
前端开发 C# Windows
WPF基础:在Canvas上绘制图形
WPF基础:在Canvas上绘制图形
51 0
|
5月前
|
XML 前端开发 Java
Android App开发动画特效中遮罩动画的讲解及实战演示(附源码 简单易懂 可直接使用)
Android App开发动画特效中遮罩动画的讲解及实战演示(附源码 简单易懂 可直接使用)
156 0
|
C#
抛砖引玉 【镜像控件】 WPF实现毛玻璃控件不要太简单
原文:抛砖引玉 【镜像控件】 WPF实现毛玻璃控件不要太简单 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Vblegend_2013/article/details/83447420 ...
1769 0
UGUI系列-Dropdown控件研究(Unity3D)
Dropdown下拉列表,控件还是很强大的,做UI的时候用的比较多,现在就将Dropdown使用中的一些经验总结起来,分享给大家了
|
vr&ar 图形学
【Unity3D 灵巧小知识点】☀️ | Unity UGUI组件Scroll View禁止 左右 或 上下 滑动
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。 也可以简单把 Unity 理解为一个游戏引擎,可以用来专业制作游戏!
【Unity3D 灵巧小知识点】☀️ | Unity UGUI组件Scroll View禁止 左右 或 上下 滑动
|
数据可视化 C#
简述WPF中的画刷(Brush)
原文:简述WPF中的画刷(Brush) --------------------------------------------------------------------------------引用或转载时请保留以下信息:大可山 [MSN:a3news(AT)hotmail.
1034 1
|
C#
GDI+与WPF中的颜色简析
原文:GDI+与WPF中的颜色简析 --------------------------------------------------------------------------------引用或转载时请保留以下信息:大可山 [MSN:a3news(AT)hotmail.
1240 0
|
C#
silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发) 有个问题想请教下大家,我仿了腾讯的SL版QQ,相似度95%以上。我想写成教程教大家怎么开发出来,会不会有版权什么问题的。
1120 0
|
C# 前端开发
silverlight,WPF动画终极攻略之阳光灿烂篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之阳光灿烂篇(Blend 4开发) 前面我们画了一只会飞动的小鸟,今天我们在目标是一个会发光的太阳。本章节的动画虽然简单,但是实现的效果可是一点也不打折。
1177 0