iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >自定义view视图之Canvas+Paint图形绘制
  • 832
分享到

自定义view视图之Canvas+Paint图形绘制

自定义view自定义view视图Canvas+Paint自定义view图形绘制 2023-05-14 08:05:05 832人浏览 独家记忆
摘要

目录一、绘图都需要那些相关知识二、我们先来了解下canvas三、那我们如何来使用这些方法进行绘制呢?1、我们需要创建一个类继承view(1)首先定义一个画笔对象和一个画布的颜色(2)

我们开发自定义view的时候,就要绘制自己心仪的图形,这个时候我们就要能够熟练的运用我们的绘图知识,这里我们看一下如何实现

一、绘图都需要那些相关知识

1、我们平常画画一样,我们需要一张画布(Canvas)

2、我们平常画画一样,我们需要一直画笔(Paint)

二、我们先来了解下Canvas

Canvas代表了“依附”于指定View的画布,他提供了很多形状的绘制方法,而Paint也提供了一些方法,如下 Canvas常用方法

这里写图片描述

Paint常用方法

这里写图片描述

还有几个效果方法

rotate(float degrees,float px,float py):对Canvas执行旋转变换。
scale(float sx,float sy,float px,float py):对Canvas进行缩放变换。
skew(float sx,float sy):对Canvas执行倾斜变换。
translate(float dx,float dy):移动Canvas。向右移动dx距离(dx为负数即向左):向下移动dy(正数为下移动,负数为上移动)

三、那我们如何来使用这些方法进行绘制呢?

1、我们需要创建一个类继承view

重写构造方法,和onDraw()方法,而我们就需要在此方法中进行绘制

(1)首先定义一个画笔对象和一个画布的颜色

paint = new Paint(); 
canvas.drawColor(Color.WHITE);

(2)我们需要给我的画笔对象设置一些属性,比如画笔的大小、颜色等!

  //我们给画笔设置一些属性,

        paint.setAntiAlias(true);//取消锯齿
        paint.setColor(Color.BLUE);//画笔的颜色
        paint.setStyle(Paint.Style.STROKE);//画笔的粗细
        paint.setStrokeWidth(4);//画笔的宽度
        int viewWidth = this.getWidth();//获取系统屏幕


//-------------------------------------------------------------------------
        
//        paint.setStyle(Paint.Style.FILL);//充满填充
//        paint.setColor(Color.RED);//填充颜色

//-------------------------------------------------------------------------
        
//        Shader mShader = new LinearGradient(0, 0, 40, 60
//                ,new int[] {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW }
//                , null , Shader.TileMode.REPEAT);
//        paint.setShader(mShader);
//        //设置阴影
//        paint.setShadowLayer(25 , 20 , 20 , Color.GRAY);

那么如何进行绘制,其实很简单,直接调用上面表格中的方法即可,例如绘制圆形,只有一句

  
        canvas.drawCircle(viewWidth / 10 + 10, viewWidth / 10 + 10, viewWidth / 10, paint);

全部代码如下

package tester.ermu.com.canvasdemo;

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



public class CanvasText extends View {
    //声明一个画笔的对象
    private Paint paint;

    public CanvasText(Context context) {
        super(context);
    }

    //如果这个不引用,会报错哦!自定义View,必须在构造函数有AttributeSet attrs这个参数,便于自定义属性的引用。
    public CanvasText(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //我们重写onDraw()方法
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //声明一个画笔,设置一个白色的画布,这样笔和画布都有了
        paint = new Paint();
        canvas.drawColor(Color.WHITE);

        //我们给画笔设置一些属性,

        paint.setAntiAlias(true);//取消锯齿
        paint.setColor(Color.BLUE);//画笔的颜色
        paint.setStyle(Paint.Style.STROKE);//画笔的粗细
        paint.setStrokeWidth(4);//画笔的宽度
        int viewWidth = this.getWidth();//获取控件屏幕


//-------------------------------------------------------------------------
        
//        paint.setStyle(Paint.Style.FILL);//充满填充
//        paint.setColor(Color.RED);//填充颜色

//-------------------------------------------------------------------------
        
//        Shader mShader = new LinearGradient(0, 0, 40, 60
//                ,new int[] {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW }
//                , null , Shader.TileMode.REPEAT);
//        paint.setShader(mShader);
//        //设置阴影
//        paint.setShadowLayer(25 , 20 , 20 , Color.GRAY);

//-------------------------------------------------------------------------
        
        canvas.drawCircle(viewWidth / 10 + 10, viewWidth / 10 + 10, viewWidth / 10, paint);
//-------------------------------------------------------------------------
        
        canvas.drawRect(10 , viewWidth / 5 + 20 , viewWidth / 5 + 10,viewWidth * 2 / 5 + 20 , paint);

//-------------------------------------------------------------------------
        
        canvas.drawRect(10, viewWidth * 2 / 5 + 30, viewWidth / 5 + 10, viewWidth / 2 + 30, paint);

//-------------------------------------------------------------------------

        
        RectF re1 = new RectF(10, viewWidth / 2 + 40, 10 + viewWidth / 5 ,viewWidth * 3 / 5 + 40);
        // 绘制圆角矩形
        canvas.drawRoundRect(re1, 15, 15, paint);

//-------------------------------------------------------------------------
        

        Path path1 = new Path();
        path1.moveTo(10, viewWidth * 9 / 10 + 60);
        path1.lineTo(viewWidth / 5 + 10, viewWidth * 9 / 10 + 60);
        path1.lineTo(viewWidth / 10 + 10, viewWidth * 7 / 10 + 60);
        path1.close();
        canvas.drawPath(path1, paint);
//-------------------------------------------------------------------------
        

        Path path2 = new Path();
        path2.moveTo(10 + viewWidth / 15, viewWidth * 9 / 10 + 70);
        path2.lineTo(10 + viewWidth * 2 / 15, viewWidth * 9 / 10 + 70);
        path2.lineTo(10 + viewWidth / 5, viewWidth + 70);
        path2.lineTo(10 + viewWidth / 10, viewWidth * 11/10 + 70);
        path2.lineTo(10 , viewWidth + 70);
        path2.close();
        canvas.drawPath(path2, paint);

//-------------------------------------------------------------------------
        
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.RED);
        paint.setStrokeWidth(2);
        paint.setTextSize(36);
        canvas.drawText("圆形", 60 + viewWidth * 3 / 5, viewWidth / 10 + 10, paint);
        canvas.drawText("正方形", 60 + viewWidth * 3 / 5, viewWidth * 3 / 10 + 20, paint);
        canvas.drawText("长方形", 60 + viewWidth * 3 / 5, viewWidth * 1 / 2 + 20, paint);
        canvas.drawText("圆角矩形" , 60 + viewWidth * 3 / 5, viewWidth * 3 / 5 + 30, paint);
        canvas.drawText("椭圆", 60 + viewWidth * 3 / 5, viewWidth * 7 / 10 + 30, paint);
        canvas.drawText("三角", 60 + viewWidth * 3 / 5, viewWidth * 9 / 10 + 30, paint);
        canvas.drawText("五角星", 60 + viewWidth * 3 / 5, viewWidth * 11 / 10 + 30, paint);
    }
}

四、我们在布局中引用我们自定义的类

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="Http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <tester.ermu.com.canvasdemo.CanvasText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />
</LinearLayout>

五、运行效果

无填充效果

这里写图片描述

填充效果

这里写图片描述

渐变效果

这里写图片描述

到此这篇关于自定义view视图之Canvas+Paint图形绘制的文章就介绍到这了,更多相关Canvas+Paint图形绘制内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 自定义view视图之Canvas+Paint图形绘制

本文链接: https://www.lsjlt.com/news/203026.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 自定义view视图之Canvas+Paint图形绘制
    目录一、绘图都需要那些相关知识二、我们先来了解下Canvas三、那我们如何来使用这些方法进行绘制呢?1、我们需要创建一个类继承view(1)首先定义一个画笔对象和一个画布的颜色(2)...
    99+
    2023-05-14
    自定义view 自定义view视图 Canvas+Paint 自定义view图形绘制
  • view视图之Canvas+Paint图形绘制的方法是什么
    这篇文章主要介绍“view视图之Canvas+Paint图形绘制的方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“view视图之Canvas+Paint图形绘制的方法是什么”文章能帮助大家解...
    99+
    2023-07-05
  • 自定义视图view之环形进度条
    目录 一、普通效果。二、单环在圈外画弧度三、双环效果四、Xml布局五、MainActivity中代码的引用六、自定义属性  一、普通效果。 本章博客有4种不同的效...
    99+
    2023-05-14
    自定义视图 自定义view view环形进度条
  • 自定义视图View绘图基础之Path的使用
    目录使用Path绘制线一、我们这里绘制了7条线来分别介绍上面的几种子类都有什么用二、不难看出其中每条线的属性和样式不一样,我在上面有 了很详细的讲解。三、xxxTo()方法绘制(本章...
    99+
    2023-05-14
    自定义视图 自定义View 自定义视图 Path使用
  • 自定义视图view怎么实现环形进度条
    这篇文章主要介绍“自定义视图view怎么实现环形进度条”,在日常操作中,相信很多人在自定义视图view怎么实现环形进度条问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”自定义视图view怎么实现环形进度条”的疑...
    99+
    2023-07-05
  • 怎么用Canvas绘制图形
    这篇文章主要讲解了“怎么用Canvas绘制图形”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用Canvas绘制图形”吧!   Canvas绘制图形 ...
    99+
    2024-04-02
  • Android自定义View实现心形图案
    本文实例为大家分享了Android自定义View实现心形的具体代码,供大家参考,具体内容如下 通过继承View实现的❤形 在绘制心形需要Path类中的两个重要方法分别...
    99+
    2024-04-02
  • 如何使用Canvas绘制图形图文
    这篇文章主要讲解了“如何使用Canvas绘制图形图文”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用Canvas绘制图形图文”吧!HTML5火的正热,...
    99+
    2024-04-02
  • Android利用Canvas类绘制图形
    本文实例为大家分享了Android利用Canvas类绘制图形的具体代码,供大家参考,具体内容如下 首先介绍一下相关基础知识。 1.画笔(paint) 1.1、作用:画笔对象通过属性来...
    99+
    2024-04-02
  • 自定义视图view的折线图使用讲解
    目录一、如何绘制X和Y轴。1、我们来分析下,我们想知道三个坐标,那么这三个坐标是多少呢,我们该怎么计算呢? 答:这里,我是在onSizeChanged()方法中获取到了父类控件的宽度...
    99+
    2023-05-14
    自定义视图 自定义view 自定义view折线图
  • 自定义视图view的折线图怎么使用
    这篇文章主要讲解了“自定义视图view的折线图怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“自定义视图view的折线图怎么使用”吧!绘制折线图预览图绘制这个折线图需要都需要哪些步骤?...
    99+
    2023-07-05
  • 自定义视图view使用Canvas实现手写板和涂鸦功能
    目录预览图一、xml布局二、MainActivity代码三、我们自定义view的类预览图 一、xml布局 <xml version="1.0" encoding="utf-8...
    99+
    2023-05-14
    自定义视图 自定义view 自定义视图使用Canvas Canvas实现手写板 Canvas涂鸦功能
  • 使用canvas怎么绘制一个树形结构的可视图形
    这篇文章给大家介绍使用canvas怎么绘制一个树形结构的可视图形,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。树形分支是后端接口返回数据渲染,可展示多条;代码可拓展,可封装;点击节点可查看备注;<canvas&n...
    99+
    2023-06-09
  • Python数据可视化之绘制柱状图和条形图
    目录一、实验目的:二、实验内容:三、实验过程(附结果截图):一、实验目的: 1.掌握Python中柱状图、条形图绘图函数的使用 2.利用上述绘图函数实现数据可视化 二、实验内容: 1...
    99+
    2024-04-02
  • 图文详解自定义View视图的属性及引用
    目录一、创建一个类,继承View二、如何创建自定义属性呢?2-1:创建一个资源文件2-2:打开我们创建好的资源文件,来写我们需要的属性,我简单的写了两个,如图:三、如何引用我们的自定...
    99+
    2023-05-14
    自定义View 自定义视图 View属性引用
  • 自定义颜色在Matplotlib柱形图绘制中的应用
    使用Matplotlib库绘制柱形图时如何自定义颜色 Matplotlib是一个功能强大、灵活且易于使用的Python绘图库,可以绘制各种类型的图形,包括柱形图。默认情况下,Matplotlib会自动为柱形图生成一组不同颜色的条...
    99+
    2024-01-17
    自定义颜色 柱形图
  • Python可视化神器pyecharts之绘制箱形图
    目录箱形图概念 用处箱形图系列模板第一个箱形图复杂一点的图例箱形图 概念 后面的图形都是一些专业的统计图形,当然也会是我们可视化的对象。 箱形图(Box-plot)又称为盒...
    99+
    2024-04-02
  • 怎么用HTML5的Canvas API绘制图形
    本篇内容介绍了“怎么用HTML5的Canvas API绘制图形”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2024-04-02
  • 怎么自定义View视图的属性及引用
    今天小编给大家分享一下怎么自定义View视图的属性及引用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、创建一个类,继承V...
    99+
    2023-07-05
  • Android自定义View绘制居中文本
    本文实例为大家分享了Android自定义View绘制居中文本的具体代码,供大家参考,具体内容如下 自定义view的步骤: 1、自定义View的属性2、在View的构造方法中获得我们自...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作