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



相关文章
|
4月前
|
算法 C# Windows
不可不知的WPF动画(Animation)
【9月更文挑战第19天】在 WPF(Windows Presentation Foundation)中,动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画,可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发,支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化,可创建引人入胜的用户界面。
|
5月前
|
存储 缓存 移动开发
PixiJS源码分析系列:第三章 使用 canvas 作为渲染器
PixiJS源码分析系列:第三章 使用 canvas 作为渲染器
|
5月前
|
前端开发 C# Windows
WPF基础:在Canvas上绘制图形
WPF基础:在Canvas上绘制图形
179 0
|
C#
抛砖引玉 【镜像控件】 WPF实现毛玻璃控件不要太简单
原文:抛砖引玉 【镜像控件】 WPF实现毛玻璃控件不要太简单 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Vblegend_2013/article/details/83447420 ...
1828 0
|
存储 前端开发 算法
canvas进阶——实现事件系统
前言 大家好! 我是热爱图形的fly, 之前在群里和粉丝讨论canvas 如何事件系统, 然后呢? 我自己其实也对这个比较感兴趣, 我看过很多canvas 实现的项目, 比如canvas 实现思维导图 「xmind」 , canvas 实现一个「绘图工具」。 然后呢无论是哪一个,其实背后都是在canavs 背后实现了一套事件系统,可惜这些源码都不开源。所以本着学习的激情, 我参考了一些文章实现一个简单事件系统。本篇文章你可以学到下面👇这些内容 我是怎么基于canvas去「构建基础框架」的 几何算法—— 「判断点是不是任意多边形内部」 如何进行「事件分发」和「阻止事件冒泡」 本篇文章我全是干
canvas进阶——实现事件系统
|
编解码 API Android开发
Android开发之AbsoluteLayout绝对布局
Android开发之AbsoluteLayout绝对布局
196 0
Android开发之AbsoluteLayout绝对布局
|
C#
WPFのInkCanvas作为蒙版透明笔迹不透明
原文:WPFのInkCanvas作为蒙版透明笔迹不透明 本人最近利用inkcavas做一个蒙版的功能,结果发现笔迹稀释了,经过一番查找发现:应该讲inkcavas的背景设置为白色,然后透明,而不是将整个控件透明,具体代码:                                      ...
1011 0
|
C#
GDI+与WPF中的颜色简析
原文:GDI+与WPF中的颜色简析 --------------------------------------------------------------------------------引用或转载时请保留以下信息:大可山 [MSN:a3news(AT)hotmail.
1255 0
|
C#
silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发) 有个问题想请教下大家,我仿了腾讯的SL版QQ,相似度95%以上。我想写成教程教大家怎么开发出来,会不会有版权什么问题的。
1162 0