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.mzph.cn/news/70803.shtml

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

相关文章

Vagrant + VirtualBox + CentOS7 + WindTerm 5分钟搭建本地linux开发环境

1、准备阶段 将环境搭建所需要的工具和文件下载好&#xff08;页面找不到可参考Tips部分&#xff09; Vagrant 版本&#xff1a;vagrant_2.2.18_x86_64.msi 链接&#xff1a;https://developer.hashicorp.com/vagrant/downloads VirtualBox 版本&#xff1a;VirtualBox-6.1.46…

无涯教程-JavaScript - DAYS360函数

描述 DAYS360函数返回基于360天的年份(十二个月为30天)的两个日期之间的天数,该天数用于会计计算。 语法 DAYS360 (start_date,end_date,[method])争论 Argument描述Required/OptionalStart_dateThe two dates between which you want to know the number of days.Required…

基于SpringBoot的医院挂号系统

基于SpringBootVue的医院挂号、预约、问诊管理系统&#xff0c;前后端分离 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 角色&#xff1a;管理员、用户、医生 管…

Android Jetpack Compose 用计时器demo理解Compose UI 更新的关键-------状态管理(State)

目录 概述1.什么是状态2.什么是单向数据流3.理解Stateless和Stateful4.使用Compose实现一个计数器4.1 实现计数器4.2 增加组件复用性-----状态上提 总结 概述 我们都知道了Compose使用了声明式的开发范式&#xff0c;在这样的范式中&#xff0c;UI的职责更加的单一&#xff0c…

es5的实例__proto__(原型链) prototype(原型对象) {constructor:构造函数}

现在看这张图开始变得云里雾里&#xff0c;所以简单回顾一下 prototype 的基本内容&#xff0c;能够基本读懂这张图的脉络。 先介绍一个基本概念&#xff1a; function Person() {}Person.prototype.name KK;let person1 new Person();在上面的例子中&#xff0c; Person …

腾讯混元助手使用指南

一、腾讯混元助手简介 腾讯混元助手是什么&#xff1f; 腾讯混元助手是由腾讯研发的大语言模型的平台产品&#xff0c;具备跨领域知识和自然语言理解能力&#xff0c;实现基于人机自然语言对话的方式&#xff0c;理解用户指令并执行任务&#xff0c;帮助用户实现人获取信息&am…

SpringBoot整合Websocket(Java websocket怎么使用)

目录 1 Websocket是什么2 Websocket可以做什么3 Springboot整合Websocket3.1 服务端3.2 客户端 1 Websocket是什么 WebSocket 是一种基于 TCP 协议的全双工通信协议&#xff0c;可以在浏览器和服务器之间建立实时、双向的数据通信。可以用于在线聊天、在线游戏、实时数据展示等…

算法通关村第十七关:青铜挑战-贪心其实很简单

青铜挑战-贪心其实很简单 1. 难以解释的贪心算法 贪心学习法则&#xff1a;直接做题&#xff0c;不考虑贪不贪心 贪心(贪婪)算法 是指在问题尽心求解时&#xff0c;在每一步选择中都采取最好或者最优&#xff08;最有利&#xff09;的选择&#xff0c;从而希望能够导致结果最…

【爬虫笔记】Python爬虫简单运用爬取代理IP

一、前言 近些年来&#xff0c;网络上的爬虫越来越多&#xff0c;很多网站都针对爬虫进行了限制&#xff0c;封禁了一些不规则的请求。为了实现正常的网络爬虫任务&#xff0c;爬虫常用代理IP来隐藏自己的真实IP&#xff0c;避免被服务器封禁。本文将介绍如何使用Python爬虫来…

百度智能云千帆大模型丨未来人手必备的代码助手

文章目录 1. 前言2. 千帆大模型平台3. 十分友好的功能4. comate代码助手5. 总结 1. 前言 我之前给大家推荐过Poe这个网站&#xff0c;它用的人比较少&#xff0c;但一旦接触后会发现它其实挺强大的。 因为它是一个可以同时支持好几个大模型的在线聚合平台。常用的GPT4&#x…

基于阻塞队列的生产消费模型

目录 一、线程同步 1.生产消费模型&#xff08;或生产者消费者模型&#xff09; 2.认识同步 &#xff08;1&#xff09;生产消费模型中的同步 &#xff08;2&#xff09;生产者消费者模型的特点 二、条件变量 1.认识条件变量 2.条件变量的使用 3.代码改造 三、基于阻…

uniapp移动端h5设计稿还原

思路 动态设置html的font-size大小 实现步骤 先创建一个public.css文件&#xff0c;设置初始的font-size大小 /* 注意这样写 只能使用css文件, scss 是不支持的, setProperty 只适用于原生css上 */ html {--gobal-font-size: 0.45px; } .gobal-font-size {font-size: var(--g…

leetcode 655. 输出二叉树(java)

输出二叉树 题目描述代码演示 题目描述 难度 - 中等 leetcode 655. 输出二叉树 给你一棵二叉树的根节点 root &#xff0c;请你构造一个下标从 0 开始、大小为 m x n 的字符串矩阵 res &#xff0c;用以表示树的 格式化布局 。构造此格式化布局矩阵需要遵循以下规则&#xff1a…

Python接口自动化封装导出excel方法和读写excel数据

一、首先需要思考&#xff0c;我们在页面导出excel&#xff0c;用python导出如何写入文件的 封装前需要确认python导出excel接口返回的是一个什么样的数据类型 如下&#xff1a;我们先看下不对返回结果做处理&#xff0c;直接接收数据类型是一个对象&#xff0c;无法获取返回值…

IOC和注解

想要学好spring&#xff0c;必须时时刻刻想着&#xff0c;spring的本质就是一个容器&#xff0c;放java对象的容器&#xff0c;java对象在spring容器中也叫做bean对象。 文章目录 一、spring介绍1、什么是框架2、框架的作用![在这里插入图片描述](https://img-blog.csdnimg.cn…

这几招真管用!找回丢失的iPhone的好方法!

你昂贵的iPhone不见了。它丢了吗?它被偷了吗?如果你把iPhone弄丢了,你可以从各种其他来源找到它,包括iPad、Mac、iCloud和Apple Watch。 你可以使用iCloud网站上的苹果“查找我的”应用程序、你的任何其他苹果设备或你家人注册的设备来追踪它。或者从“查找我的”应用程序…

Java基础知识点汇总

一、Java基础知识点整体框架 详细知识点见链接资源&#xff0c;注&#xff1a;框架是用Xmind App完成&#xff0c;查看需下载。 二、基础知识各部分概况 2.1 认识Java 2.2 数据类型和变量 2.3 运算符 2.4 程序逻辑控制 2.5 方法的使用 2.6 数组的定义和使用 2.7 类和对象 2.8 …

移植STM32官方加密库STM32Cryptographic

感谢这位博主&#xff0c;文章具有很高的参考价值&#xff1a; STM32F1做RSA&#xff0c;AES数据加解密&#xff0c;MD5信息摘要处理_我以为我爱了的博客-CSDN博客 概述 ST官方在很多年前就推出了自己的加密库&#xff0c;配合ST芯片用起来非常方便&#xff0c;支持ST的所有…

借助CIFAR10模型结构理解卷积神经网络及Sequential的使用

CIFAR10模型搭建 CIFAR10模型结构 0. input : 332x32&#xff0c;3通道32x32的图片 --> 特征图(Feature maps) : 3232x32即经过32个35x5的卷积层&#xff0c;输出尺寸没有变化&#xff08;有x个特征图即有x个卷积核。卷积核的通道数与输入的通道数相等&#xff0c;即35x5&am…

SpringCloud(十)——ElasticSearch简单了解(一)初识ElasticSearch和RestClient

文章目录 1. 初始ElasticSearch1.1 ElasticSearch介绍1.2 安装并运行ElasticSearch1.3 运行kibana1.4 安装IK分词器 2. 操作索引库和文档2.1 mapping属性2.2 创建索引库2.3 对索引库的查、删、改2.4 操作文档 3. RestClient3.1 初始化RestClient3.2 操作索引库3.3 操作文档 1. …