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.hqwc.cn/news/101726.html

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

相关文章

类的加载过程

清楚每个环节的操作过程就可以了 1.加载Loading 加载过程&#xff1a; 通过一个类的全限定名获取定义此类的二进制字节流将这个字节流所代表的静态存储结构转化为方法区的运行时数据结构在内存中生成一个代表这个类的java.lang.class对象&#xff0c;作为方法区这个类的各种数…

Laravel系列开源Dcat admin礼盒商城后台管理项目

前言: 在最近能在与某位前段大佬,合作开发一款项目,这宽项目是由laravel框架搭建使用的Dcat admin框架所制作的一个后台的管理系统,前段制作的是一款小程序,虽说后台管理系统无论是前段还是后端都是千篇一律,但内容也是非常丰富。但本项目仅作为开源学习和技术交流&#xff0c…

50etf期权最多能开仓多少手?

50etf期权限仓限额的操作&#xff0c;是为了能更好防范和控制期权交易的风险&#xff0c;无论是期货还是期权&#xff0c;在交易中都有规定的持仓限额&#xff0c;不能超过某个额度&#xff0c;那么50etf期权最多能开仓多少手&#xff1f;下文为你们全面介绍&#xff01;本文来…

C#__线程的优先级和状态控制

线程的优先级&#xff1a; 一个CPU同一时刻只能做一件事情&#xff0c;哪个线程优先级高哪个先运行&#xff0c;优先级相同看调度算法。 在Thread类中的Priority属性&#xff08;Highest,Above,Normal,BelowNormal,Lowest&#xff09;可以影响线程的优先级 关于…

跨站请求伪造(CSRF)攻击与防御原理

跨站请求伪造&#xff08;CSRF&#xff09; 1.1 CSRF原理 1.1.1 基本概念 跨站请求伪造&#xff08;Cross Site Request Forgery&#xff0c;CSRF&#xff09;是一种攻击&#xff0c;它强制浏览器客户端用户在当前对其进行身份验证后的Web 应用程序上执行非本意操作的攻击&a…

Origin绘制彩色光谱图

成果图 1、双击线条打开如下窗口 2、选择“图案”-》颜色-》按点-》映射-》Wavelength 3、选择颜色映射 4、单击填充-》选择加载调色板-》Rainbow-》确定 5、单击级别&#xff0c;设置成从370到780&#xff0c;右侧增量选择2&#xff08;越小&#xff0c;颜色渐变越细腻&am…

【嵌入式软件C编程】主函数free子函数malloc地址的两种方式以及注意事项

本文档主要记录嵌入式C语言在子函数中应用malloc函数的方式&#xff0c;在实际项目中内存管理特别重要 一般在主函数中&#xff08;main&#xff09;使用malloc函数&#xff0c;然后在通过free函数进行释放内存&#xff0c;但有时候如果必须在子函数长调用malloc函数该怎样进行…

Docker如何安装seafile

SQLite 方式 要在 Docker 中安装 Seafile&#xff0c;您可以按照以下步骤进行操作&#xff1a; 安装 Docker&#xff1a;确保您的系统上已经安装了 Docker。您可以根据您的操作系统类型&#xff0c;在官方网站上找到适合您系统的 Docker 版本并进行安装。 下载 Seafile 镜像&…

模型压缩-对模型结构进行优化

模型压缩-对模型结构进行优化 概述 模型压缩通常都是对推断过程而言&#xff0c;训练过程的计算代价通常不考虑&#xff0c;因为GPU可以快速完成任意复杂度模型的训练对于推断过程来说&#xff0c;模型应用才是对于速度敏感的场景多数情况下 希望使用尽可能少的能耗完成京可能…

港陆证券:电子竞技传来重磅消息!概念股上半年业绩普增

国际奥委会宣布建立电子竞技委员会。 据央视新闻报道&#xff0c;北京时间9月6日&#xff0c;国际奥委会在官网发布音讯&#xff0c;国际奥委会有史以来将初次展望电子竞技的未来&#xff0c;建立一个全新的电子竞技委员会。 国际奥委会主席巴赫表明&#xff0c;虚拟体育有着…

个人能做股票期权吗?个人期权交易开户条件新规

个人投资者是可以交易股票期权的&#xff0c;不过期权交易通常需要投资者具备一定的投资经验和风险承受能力&#xff0c;因为期权交易涉及较高的风险和复杂性&#xff0c;下文为大家介绍个人能做股票期权吗&#xff1f;个人期权交易开户条件新规的内容。本文来自&#xff1a;期…

每日一题 2594. 修车的最少时间

难度&#xff1a;中等 思路源于题目标签 “二分”&#xff1a; 二分的上界应该是所有车都给修车能力值最小的人修&#xff0c;下界我设为0每次搜索时判断当前时间下&#xff0c;每位机械工总共能修 n 辆车&#xff0c;n > cars 则右边界左移&#xff0c;否则左边界右移 c…