自定义控件扫盲-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



相关文章
|
移动开发 前端开发 JavaScript
不使用canvas怎么实现一个刮刮卡效果?
不使用canvas怎么实现一个刮刮卡效果?
97 0
|
移动开发 前端开发 Shell
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
|
2月前
|
Web App开发 数据可视化 前端开发
Pixi入门第一章:绘制一个小精灵
这篇文章是关于Pixi.js的入门教程第一部分,指导读者如何创建并显示一个基本的2D精灵,适用于开始学习Pixi.js进行2D图形开发的初学者。
64 0
Pixi入门第一章:绘制一个小精灵
|
3月前
|
算法 C# Windows
不可不知的WPF动画(Animation)
【9月更文挑战第19天】在 WPF(Windows Presentation Foundation)中,动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画,可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发,支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化,可创建引人入胜的用户界面。
|
4月前
|
存储 缓存 移动开发
PixiJS源码分析系列:第三章 使用 canvas 作为渲染器
PixiJS源码分析系列:第三章 使用 canvas 作为渲染器
|
4月前
|
前端开发 C# Windows
WPF基础:在Canvas上绘制图形
WPF基础:在Canvas上绘制图形
128 0
|
7月前
|
XML 前端开发 Java
Android App开发动画特效中遮罩动画的讲解及实战演示(附源码 简单易懂 可直接使用)
Android App开发动画特效中遮罩动画的讲解及实战演示(附源码 简单易懂 可直接使用)
185 0
|
7月前
|
XML Java Android开发
Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示(附源码和演示视频 可直接使用)
Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示(附源码和演示视频 可直接使用)
316 0
|
存储 前端开发 算法
canvas进阶——实现事件系统
前言 大家好! 我是热爱图形的fly, 之前在群里和粉丝讨论canvas 如何事件系统, 然后呢? 我自己其实也对这个比较感兴趣, 我看过很多canvas 实现的项目, 比如canvas 实现思维导图 「xmind」 , canvas 实现一个「绘图工具」。 然后呢无论是哪一个,其实背后都是在canavs 背后实现了一套事件系统,可惜这些源码都不开源。所以本着学习的激情, 我参考了一些文章实现一个简单事件系统。本篇文章你可以学到下面👇这些内容 我是怎么基于canvas去「构建基础框架」的 几何算法—— 「判断点是不是任意多边形内部」 如何进行「事件分发」和「阻止事件冒泡」 本篇文章我全是干
canvas进阶——实现事件系统
|
vr&ar 图形学
【Unity3D 灵巧小知识点】☀️ | Unity UGUI组件Scroll View禁止 左右 或 上下 滑动
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。 也可以简单把 Unity 理解为一个游戏引擎,可以用来专业制作游戏!
【Unity3D 灵巧小知识点】☀️ | Unity UGUI组件Scroll View禁止 左右 或 上下 滑动