Posted on Leave a comment

SVG Path命令属性

Android从5.0开始支持SVG矢量图,通过Vector Asset工具将SVG文件转换VectorDrawable定义的XML文件中,在运行时inflate这个xml文件来绘制图层,这对于减小APK资源文件体积和避免混乱的分辨率支持上都有很好的效果,同时Android通过Support支持库的形式给予了低版本的支持。

Android上对SVG的支持是受限制的,仅支持SVG tiny1.2版本的属性和标签,而且不支持text标签。

path标签是SVG中最常用的标签,这其中最重要的属性就是d(command)属性,它标明这个路径的绘制起点、终点、中间路径关键点、两点之间是否为直线、弧线、贝塞尔曲线等等。

d(command)属性主要分几类:

起点

M、m来表示,如M150,0

表示从path的起点, 从x-150,y=0的坐标起点开始绘制

终点

Z、z来表示,无参数

表示path的终点,链接到path的起点,闭合path,然后结束绘制

直线

假设当前点坐标为(10,10)

L、l表示直线线段,如L100,100,表示从(10,10)开始,绘制一条到(100,100)的直线线段

H、h表示水平线段,如H100,表示从(10,10)开始,绘制一条到(100,10)的水平线段,等同于L100,10

V、v表示垂直线段,如V150,表示从(10,10)开始,绘制一条到(10,150)的垂直线段,等同于L10,150

三次贝塞尔曲线

假设当前点坐标为(100,200)

C、c表示三次贝塞尔曲线,如C100,100 250,100 250,200,表示起点坐标为(100,200),控制点1坐标为(100,100),控制点2坐标为(250,100),终点坐标为(250,200),绘制这一条三次贝塞尔曲线线段。

S、s也表示贝塞尔曲线,只是它比较特殊,它的控制点1来自于上一条C、c、S、s曲线的控制点2坐标与上一条C、c、S、s曲线终点坐标连线上的对称点,

就如上面的例子,S曲线的控制点1坐标就为(250,300),这样的曲线在连贯性上是平滑曲线,所以也称为是平滑三次贝塞尔曲线;

如果上一条线段不是C、c、S、s三次贝塞尔曲线,那么默认它的控制点1坐标与起点坐标一致;

如S400,300 400,200,假设沿着上一条S贝塞尔曲线继续绘制,则起点坐标为(250,200),控制点1坐标为(250,300),控制点2坐标为(400,300),终点坐标为(400,200)。

二次贝塞尔曲线

假设当前点坐标为(200,300)

Q、q表示二次贝塞尔曲线,如Q400,50 600,300,表示起点坐标为(200,300),控制点坐标为(400,50),终点坐标为(600,300),然后绘制一条二次贝塞尔曲线线段。

T、t也表示二次贝塞尔曲线,如同S、s平滑三次贝塞尔曲线一样,它“借用”了上一次二次贝塞尔曲线的控制点,取上次曲线控制点与上次曲线的终点坐标连线上对称点为新的控制点;

如果上一条线段不是Q、q、T、t二次贝塞尔曲线线段,那么默认它的控制点坐标与起点坐标一致。

如T1000,300,假设沿着上一条Q二次贝塞尔曲线继续绘制,则起点坐标为(600,300),控制点为(800,550),终点坐标为(1000,300)。

椭圆曲线

假设当前点坐标为(50,-25)

A、a表示椭圆曲线,如a25,25 -30 0,1 50,-25 l 50,-25,表示椭圆半径rx=25,ry=25,x轴方向上的旋转角度-30。

 

参考资料:

https://svgwg.org/svg2-draft/paths.html

https://developer.mozilla.org/en-US/docs/Web/SVG

Posted on Leave a comment

Blink内核相关术语、映射关系

在读Adblock Plus for Chrome插件的源代码时,拦截入口处有几个判断非常重要,这涉及到当前打开Tab的URL、来源、打开方式等概念,对应到Blink中术语有page、main frame、iframe、document等,翻阅一下Blink的README文档,找到官方的介绍在此做一下记录。

  • Page

一个Page对应于一个Tab,当然前提时OOPIF(Out-of-Process iframes)没有开启。每一个渲染进程可能包含多个Tab。

  • Frame

Frame对应于HTML中的frame,可能是主frame或者iframe,每个Page在树形结构中可能包含一个或者多个frame。

  • DOMWindow

一个DOMWindow对应Javascript中的一个window对象,每个Frame有一个DOMWindow。

  • Document

一个Document对应Javascript中的一个window.document,每个Frame有一个Document。

  • ExecutionContext

一个ExecutionContext是一个抽象概念,在渲染进程的主线程中对应于一个Document,在工作者线程中对应于一个WorkerGlobalScope。

解释完这些,那就知道相互之间的对应关系了。

  • 渲染进程:Page=1:N
  • Page:Frame=1:M
  • Frame:DOMWindow:Document(ExecutionContext)=1:1:1,这在某个时刻是成立的,因为某个时间段内涉及到iframe的locatio跳转新建frame以及frame的重用问题。
Posted on Leave a comment

门前一棵花树

元旦假期即将收尾,年末总结也写完了,源代码看了一个流程细节还未整理,然后就是照例进行的online大扫除:整理照片、清理存储空间、维护一下服务器、看看欠费是不是该交了[尴尬状]。

传送门

每次整理照片都能发现好多的意外,就比如把OneDrive的照片从Google Photo迁移的过程中发现一张中文命名的照片,好奇怪,怎么可能会有这样的原始照片,而且还是“我和张XX”的名字,这一定是假的“我”,放大看来果然是乱入,两个大学同学的合照被这样命名真是怀疑人生的节奏…然后把结婚的时候用iMovies制作的一段我俩的视频照例上传,先去搜索了一下Google Drive上是否存在,只记得是“Love”开头,输入关键词“Love”结果Google的情感联想搜索就开始了,文件名字在此刻不是关键了,除了含有“Love”文件名的照片以外,它把所有合照一并检索出来了,囧字D,竟然还有宠物狗的合照,嗯,感情不分你我,合到一块拍照就是爱,哈哈哈。

花树

在OneDrive上整理之前合辑的照片,又翻到了G318之旅几个GB的照片,翻看到那一片片的油菜花,联想到草稿箱里面还没动笔的6.27、6.28几天的旅行日记,是把它封存上还是续写上呢?这就又是一件纠结的事情了。过去的值得纪念,回忆不过也是一种缅怀罢了。

此刻的自己是如此的狼狈,又是如此的无奈,既要承认奶奶过世的事实无从相见最后一面,又要努力的前行因为这是只有前进没有后退的路。

大片的油菜花为谁而开,它只是招蜂引蝶授粉的方式而已。

美与浪漫在此刻不求,只愿珍惜当下~

码字

存储搬迁的过程中还发现了刚刚开始学习Android时的一堆Demo,这应该就是自己一点点学习的印记吧,现在再看代码肯定是幼稚的写法,怎么可能会写出这样的代码,哈哈哈,一并清空;顺便还发现了一堆各式各样的获取微博列表、豆瓣私信的API实现,嗯,再想想这里面的一堆故事,哈哈一笑而过。

清理的不是过去,是记忆;老家门前的那棵树,其实早没了…