为了更好的提升用户体验，移动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点： 一、Sencha Touch框架是一个重量级的框架、它上手较难，代码复杂，并且需要较强的程序基础才能学习，最开始的时候因为一个项目，想使用Sencha Touch框架，后来工期实在太紧张，根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高，运行起来的速度一般，需要长时间的学习且需要水平较高的程序基础才行。所以不太适合前端制作人员的使用。我会在以后的机会单开一篇关于它的使用demo。 二、JQTouch是一个轻量级框架、纯jquery写法，上手比较容易，代码容易理解，加载速度也很快，缺点是配合的移动端效果插件较少，需要很多外部的插件相结合，另外，个别插件还需要解决与框架之间的兼容问题。它的最大的一个弊端就是可利用和变通的布局较少。 三、Jquery-moblie也是一个轻量级框架、纯jquery写法，上手容易，代码容易理解，但由于其绑定的前端效果插件过多，且代码结构有些臃 肿，造成加载速度很慢。尤其是在android系统上测试，速度很慢。用户体验效果不太好，它比较适合开发IPAD或是IOS系统的高端机型。 四、jqMobi也是一个轻量级框架、它的语言基于jquery语言。并对其进行了简化，更有利于在移动设备上进行应用，并且速度很流畅。上手也比较容…
July 8, 2015
SVG矢量绘图 path路径详解（基本画法）
SVG的形状标签里，path是最强大的一个，掌握了path就足够处理常见的绘图问题了。
先看一下path标签的基本用法:
<path d=”M100,100 L200,200 L200,400″ fill=”#333″ stroke=”#000″ />
path标签通过属性d来定义路径，定义信息由一段字符串构成，另外path也可以通过fill和stroke属性来定义填充和边框。
d属性的信息其实并不复杂，由字母和数字构成，数字表示坐标点，字母负责表示如何连接这些坐标点。比如上面的示例中，M表示起点，L表示直线连接，所以d的信息可以这样解读：
M100,100 -> 以（100，100）坐标点为起点
L200,200 -> 从（100，100）向（200，200）画一条直线
L200,400 -> 从（200，200）向（200，400）画一条直线
在path标签的d属性中，一共有10个命令可以使用，下面5个命令是基础，比较简单。
M 移动到（moveTo） x,y 开始点坐标
Z 闭合路径（closepath） 将路径的开始和结束点用直线连接
L 直线（lineTo） x,y 当前节点到指定(x,y)节点，直线连接
H 水平直线 x 保持当前点的y坐标不变，x轴移动到x，形成水平线
V 垂直直线 y 保持当前点的x坐标不变，y轴移动到y，形成垂直线
标准的指令字母是10个，外加1个非标准的，这个可以参见我翻译构建的Snap.svg项目中Paper.path()页面中的表格：
| 命令 | 名称 | 参数 |
|---|---|---|
| M | moveto 移动到 | (x y)+ |
| Z | closepath 关闭路径 | (none) |
| L | lineto 画线到 | (x y)+ |
| H | horizontal lineto 水平线到 | x+ |
| V | vertical lineto 垂直线到 | y+ |
| C | curveto 三次贝塞尔曲线到 | (x1 y1 x2 y2 x y)+ |
| S | smooth curveto 光滑三次贝塞尔曲线到 | (x2 y2 x y)+ |
| Q | quadratic Bézier curveto 二次贝塞尔曲线到 | (x1 y1 x y)+ |
| T | smooth quadratic Bézier curveto 光滑二次贝塞尔曲线到 | (x y)+ |
| A | elliptical arc 椭圆弧 | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ |
| R | Catmull-Rom curveto* Catmull-Rom曲线 | x1 y1 (x y)+ |
其中，Catmull-Rom曲线不是标准的SVG命令，我们这里不予以讨论!
如果指令字母是大写的，例如M, 则表示坐标位置是绝对位置；如果指令字母小写的，例如m, 则表示坐标位置是相对位置。//zxx: 本文全部使用大写字母做演示和说明。
其中，有5个指定属于基本指令，你也可以理解为“好理解好上手好记忆”的指令，见下表：
| 指令字母（绝对坐标） | 中文含义 | 参数示意 | 具体说明 |
|---|---|---|---|
| M | 移动到(moveTo) | x,y | 路径起始点坐标 |
| Z | 闭合路径(closepath) | 将路径的开始和结束点用直线连接 | |
| L | 直线(lineTo) | x,y | 当前节点到指定(x,y)节点，直线连接 |
| H | 水平直线 | x | 保持当前点的y坐标不变，x轴移动到x, 形成水平线 |
| V | 垂直直线 | y | 保持当前点的x坐标不变，y轴移动到y, 形成垂直线 |
除了这5个参数少、直来直往的指令，剩下的，除了弧形命令A(Arcs)，就都是与贝塞尔曲线相关的命令了。
M和L
再看一个M和L的例子
<path d="M30,30 L170,30 L30,170 L170,170"></path>
从A点(30,30)开始，直线画向B点(170,30)，再直线到C点(30,170)，再直线到D点(170,170)，最终形成了Z型的路径。
填充效果，以及Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
这段路径描述中有两个M，所以就在一个path中，出现了两个相对独立的路径，第一个路径和上面的例子一样，是Z字型。
第二个路径则是一个矩形，描述中出现了Z命令，表示将这段路径的开头和结尾连接起来。
另外，这里我们给路径定义了fill属性，可以看到，无论路径是否闭合，fill都会生效。
H和V
最后看一下H和V两个命令，实际上就是在x或y轴不变时，L命令的简写，所以下面两端描述，画出的图是一样的。
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path> <path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="yellow"></path>
转自：http://xbingoz.com/171.html
更多参考：
Related Posts
About Author
Gideon
One Comment