Android之 SVG绘制

一 SVG介绍

1.1 SVG(Scalable Vector Graphics)是可缩放矢量图形的缩写,它是一种图形格式,其中形状在XML中指定, 而XML又由SVG查看器呈现。

1.2 SVG可以区别于位图,放大可以做到不模糊,可以做一些图标,按钮等绘制,但太复杂的话会导致渲染速度慢,占用内存大。适合简单的图形绘制。

1.3 SVG坐标系也是笛卡尔坐标系,和android绘制坐标系一眼,x=0,y=0点在左上角,与正常的图坐标系相比,y轴被反转。随着SVG中y的增加,点、形状等向下移动,而不是向上。坐标系单位默认是像素px,还可以选择其它单位:

em    The default font size - usually the height of a character.

ex     The height of the character x

px     Pixels

pt     Points (1 / 72 of an inch)

pc     Picas (1 / 6 of an inch)

cm   Centimeters

mm  Millimeters

in     Inches

1.4 SVG元素也非常多,如rect,circle,line,path,text等。但android只支持path,由坐标数据描述点和线的位置

<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><svg x="10"><rect x="10" y="10" height="100" width="100"style="stroke:#ff0000; fill: #0000ff"/></svg><svg x="200"><rect x="10" y="10" height="100" width="100"style="stroke:#009900; fill: #00cc00"/></svg></svg>

二 android种svg的使用

2.1 上面说了android支持path元素的绘制,而path里面包含以下元素:

m|M = moveto 移动到某点。
l|L = lineto 画一条直线到某点。
h|H = horizontal lineto 画一条水平线到某点。
v|V = vertical lineto 画一条垂直线到某点。
q|Q = quadratic Bézier curveto 二次贝塞尔曲线
t|T = smooth quadratic Bézier curveto 平滑二次贝塞尔曲线
c|C = curveto 三次贝塞尔曲线
s|S = smooth curveto 平滑三次贝塞尔曲线
a|A = elliptical Arc 弧形
z|Z = closepath 从结束点到开始点画一条直线,形成一个闭合的区域。

注意:大写表示绝对位置(窗口x=0,y=0的位置),小写表示相对位置(自身的位置)

2.2  Android种SVG的使用,绘制矩形示例

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="160dp"android:height="60dp"android:viewportWidth="160"android:viewportHeight="60"><pathandroid:pathData="M0,0L160,0L160,60L0,60L0,0Z"android:fillColor="#8fafdb"/>
</vector>
<!--
M0,0      移到(0,0)点开始绘制 左上角
L160,0    画线(0,0)坐标到(160,0)坐标 右上角
L160,60   画线(160,0)坐标到160,60)坐标 右下角
L0,60     画线(160,60)坐标到(0,60)坐标 右下角
L0,0Z      画线(0,60)坐标到(00)坐标 左上角闭合
-->

2.3 绘制尖头矩形

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="160dp"android:height="60dp"android:viewportWidth="160"android:viewportHeight="60"><pathandroid:fillColor="#8fafdb"android:pathData="M0,30L20,0L140,0L160,30L140,60L20,60L0,30Z" />
</vector>
<!--
M0,30     移到(0,30)点开始绘制 左上角
L20,0     画线(0,30)坐标到(20,0)坐标 右上角
L140,0    画线(20,0)坐标到(140,0)坐标 右中间
L160,30   画线(140,0)坐标到(160,30)坐标 右下角
L140,60   画线(60,30)坐标到(L140,60)坐标 左下角
L20,60     画线(140,60)坐标到(20,60)坐标 左中间
L0,30Z     画线(0,60)坐标到(0,30)坐标 右上角闭合
-->

2.3 绘制圆角矩形

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="160dp"android:height="60dp"android:viewportWidth="160"android:viewportHeight="60"><pathandroid:pathData="M10,0L150,0A10,10 0 0 1 160,10L160,10L160,50A10,10 0 0 1 150,60L150,60L10,60A10,10 0 0 1 0,50L0,50L0,10A10,10 0 0 1 10,0L10,0Z"android:fillColor="#8fafdb"/>
</vector>
<!--
M0,0                   移到(0,0)点开始绘制 左上角
L150,0                 画线(0,0)坐标到(150,0)坐标 右上角
A10,10 0 0 1 160,10    绘制一个起点(150,0),半径10,角度0,大弧1,顺时针1,终点(160,10)的圆角
L160,10
L160,50                画线(160,10)坐标到(160,60)坐标 右下角
A10,10 0 0 1 150,60    绘制一个起点(160,60),半径10,角度0,大弧1,顺时针1,终点(150,60)的圆角
L150,60
L10,60                 画线(150,60)坐标到(10,60)坐标 左下角
A10,10 0 0 1 0,50      绘制一个起点(10,60),半径10,角度0,大弧1,顺时针1,终点(0,50)的圆角
L0,50
L0,10                 画线(0,50)坐标到(0,10)坐标 左下角
A10,10 0 0 1 10,0     绘制一个起点(0,10),半径10,角度0,大弧1,顺时针1,终点(10,0)的圆角
L10,0Z                画线(10,0)坐标到(10,0)坐标 左上角闭合
-->

2.4 绘制圆形。注意:开始坐标和结束坐标一样会绘制不上,所以结束坐标要错开点坐标

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="160dp"android:height="160dp"android:viewportWidth="160"android:viewportHeight="160"><pathandroid:pathData="M0,80A80,800110,80.00001Z"android:fillColor="#8fafdb"/>
</vector>
<!--
pathData="
M x y
A rx ry
x-axis-rotation
large-arc-flag
sweep-flag
x y"M0,80                移到(0,80)点开始绘制,顶部中间位置,rx ry 分别是是椭圆的x轴半径和y轴半径
A80,80               画弧度(80,80) X方向半径,和Y方向半径
0                    x-axis-rotation 是椭圆相对于坐标系的旋转角度
1                    large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。
1                    sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。
0.00001,80.00001Z    x y是圆弧终点的坐标,由于坐标重合不能绘制,所以要偏移一点坐标
-->

2.5 绘制一次贝塞尔曲线

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="160dp"android:height="160dp"android:viewportWidth="160"android:viewportHeight="160"><pathandroid:pathData="M0,0Q 80,80 160,0"android:fillColor="#8fafdb"/><!-- 辅助查看的线(斜率) --><pathandroid:pathData="M0,0L80,80 160,0"android:strokeColor="#ff0000" android:strokeWidth="1"/></vector>
<!--
pathData="="Q x1 y1, x y" // 控制点 (x1,y1),终点 (x,y) 大写Q绝对位置 小写q相对位置-->

红色是辅助线 

2.5 绘制二次贝塞尔曲线 

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="160dp"android:height="160dp"android:viewportWidth="160"android:viewportHeight="160"><pathandroid:pathData="M0,80Q 40,0 80,80T160,80"android:strokeColor="#8fafdb" android:strokeWidth="2"/><!-- 辅助查看的线(斜率)1 --><pathandroid:pathData="M0,80L40,0 80,80"android:strokeColor="#ff0000" android:strokeWidth="1" android:strokeAlpha="0.5"/><!-- 辅助查看的线(斜率)2 --><pathandroid:pathData="M80,80L120,160 160,80"android:strokeColor="#ffff00"  android:strokeWidth="1" android:strokeAlpha="0.5"/>
</vector>
<!--
pathData="="Q x1 y1, x y" // 控制点 (x1,y1),终点 (x,y) 大写Q绝对位置 小写q相对位置
pathData="Q x1 y1, x y T x y" 	// 终点 T(x y),控制点通过前面的Q命令计算得出
-->

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/124224.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【实战】React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(总结展望篇)

文章目录 一、项目起航&#xff1a;项目初始化与配置二、React 与 Hook 应用&#xff1a;实现项目列表三、TS 应用&#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook&…

springboot 集成dubbo

上一篇我们一起认识了Dubbo与RPC&#xff0c;今天我们就来一起学习如何使用Dubbo&#xff0c;并将Dubbo集成到Spring Boot的项目中。我们来看下今天要使用到的软件及版本&#xff1a; 软件 版本 说明 Java 11 Spring Boot 2.7.13 Spring Boot 3.0版本开始&#xff0c;最…

【C#】泛型

【C#】泛型 泛型是什么 泛型是将类型作为参数传递给类、结构、接口和方法&#xff0c;这些参数相当于类型占位符。当我们定义类或方法时使用占位符代替变量类型&#xff0c;真正使用时再具体指定数据类型&#xff0c;以此来达到代码重用目的。 泛型特点 提高代码重用性一定…

去掉Egde浏览器选择文本弹出的搜索小按钮

去掉Egde浏览器选择文本弹出的搜索小按钮 小按钮 去掉&#xff1a;在设置中找到选择文本时的微型菜单&#xff0c;关闭【选择文本时显示迷你菜单】选项

Java LinkedList

简介 链表&#xff08;Linked list&#xff09;是一种常见的基础数据结构&#xff0c;是一种线性表&#xff0c;但是并不会按线性的顺序存储数据&#xff0c;而是在每一个节点里存到下一个节点的地址。 链表可分为单向链表和双向链表。 在Java程序设计语言中&#xff0c;所有…

JVM中JAVA对象和数组内存布局

对象 数组 在Java中&#xff0c;所有的对象都是一种特殊的数组&#xff0c;它们的元素可以是基本数据类型、其他对象引用或者其他任何类型。Java对象和数组的内存布局包含以下部分&#xff1a; 1.对象头&#xff08;Object Header&#xff09; 每个Java对象都有一个对象头&am…

软件提示vcruntime140_1.dll丢失的解决方法,以及丢失的原因总结

在运行某些程序时&#xff0c;可能会出现“vcruntime140_1.dll 丢失”的错误提示。这是因为 vcruntime140_1.dll 是 Visual C Redistributable 的一部分&#xff0c;它通常被安装在 Windows 操作系统上。如果该文件丢失或无法找到&#xff0c;可能会导致程序无法正常运行。在我…

LLMs之Baichuan 2:《Baichuan 2: Open Large-scale Language Models》翻译与解读

LLMs之Baichuan 2&#xff1a;《Baichuan 2: Open Large-scale Language Models》翻译与解读 导读&#xff1a;2023年9月6日&#xff0c;百川智能重磅发布Baichuan 2。科技论文主要介绍了Baichuan 2&#xff0c;一个开源的大规模语言模型&#xff0c;以及其在多个领域的性能表现…

js案例:选字游戏

目录 效果预览图 游戏规则 整体思路 完整代码 html部分 js部分 效果预览图 游戏规则 1.游戏时间为30s&#xff0c;30s倒计时结束弹出游戏结束和对应的游戏分数。 2.根据中间大字的颜色&#xff0c;点击下面对应的文字。 大字的颜色 点击的文字&#xff08;列如&#…

聊聊Http服务化改造实践

在微服务架构体系中远程RPC调用主要包括Dubbo与Http调用两个大类&#xff0c;由于Dubbo拥有服务注册中心&#xff0c;并且起服务的命名非常规范&#xff0c;使用包名.类名.方法名进行描述。 而http调用通常都是使用httpclient等相关类库&#xff0c;这些在使用上并没有问题&am…

PlantUML入门教程:画时序图

软件工程中会用到各种UML图&#xff0c;例如用例图、时序图等。那我们能不能像写代码一样去画图呢&#xff1f; 今天推荐一款软件工程师的作图利器--PlantUML&#xff0c;它能让你用写代码的方式快速画出UML图。 一、什么是PlantUML&#xff1f; PlantUML是一个允许你快速作出…

【Java】线程都有哪几种状态

文章目录 前言传统线程模型&#xff08;操作系统&#xff09;中线程状态Java线程中的状态线程的运行流程 前言 首先我们要知道&#xff0c;在传统&#xff08;操作系统&#xff09;的线程模型中线程被分为五种状态&#xff0c;在java线程中&#xff0c;线程被分为六种状态。 …

X86_64函数调用汇编程序分析

X86_64函数调用汇编程序分析 1 X86_64寄存器使用标准2 对应代码的分析2.1 main函数及其对应的汇编程序2.1.1 main的C代码实现2.1.2 main函数对应汇编及其分析2.1.3 执行完成之后栈的存放情况 2.2 test_fun_a函数及其对应的汇编程序2.2.1 test_fun_a函数的C实现2.2.2 test_fun_a…

(源码版)2023 年高教社杯全国大学生数学建模竞赛-E 题 黄河水沙监测题一数据分析详解+Python代码

十分激动啊啊啊题目终于出来了&#xff01;&#xff01;官网6点就进去了结果直接卡死现在才拿到题目&#xff0c;我是打算A-E题全部做一遍。简单介绍一下我自己&#xff1a;博主专注建模四年&#xff0c;参与过大大小小数十来次数学建模&#xff0c;理解各类模型原理以及每种模…

容器编排学习(五)卷的概述与存储卷管理

一 卷 1 容器化带来的问题 容器中的文件在磁盘上是临时存放的&#xff0c;这给容器中运行的重要的应用程序带来一些问题 问题1&#xff1a;当容器崩溃或重启的时候&#xff0c;kubelet 会以干净的状态(镜像的状态)重启容器&#xff0c;容器内的历史数据会丢失 问题2&…

OSPF路由协议

OSPF基本信息 OSPF&#xff08;Open Shortest Path First&#xff09;开放式最短路径优先协议是用于网际协议&#xff08;IP&#xff09;网络的链路状态路由协议。该协议使用链路状态路由算法的内部网关协议&#xff08;IGP&#xff09;&#xff0c;在单一自治系统&#xff08…

elasticsearch的DSL查询文档

DSL查询分类 查询所有&#xff1a;查询出所有数据&#xff0c;一般测试用。例如&#xff1a;match_all 全文检索&#xff08;full text&#xff09;查询&#xff1a;利用分词器对用户输入内容分词&#xff0c;然后去倒排索引库中匹配。例如&#xff1a; match_query multi_ma…

在学习DNS的过程中给我的启发

在国内&#xff0c;关于DNS相关的话题一直络绎不绝&#xff0c;比如DNS根服务器为什么中国没有&#xff0c;还有Anycast BGP实现负载&#xff0c;为什么DNS只有13个&#xff0c;还有DNS over HTTPS 和 DNS over TLS的优劣等等问题&#xff0c;接下来我会找出几个一一说一下其中…

Net跨平台UI框架Avalonia入门-安装和使用(v11版本)

介绍Avalonia v11版本 avalonia v11版本发布了&#xff0c;增加了很多新的功能&#xff0c;Avalonia的扩展也同步升级了。 主要更新内容&#xff1a; 辅助功能&#xff1a;增加了对各种辅助工具的支持&#xff0c;提高了Avalonia应用程序的可用性。输入法编辑器&#xff08;I…