矢量绘图基础-201207

1 2 1 P0 t 1 2 2 0 P 1 1 0 0 P2

P0 (t=0)
M
P2 (t=1)
二次Ｂ样条曲线
P (t ) t 2

1 2 1 P0 1 t 1 2 2 0 P 1 2 1 1 0 P2

y3(x)=a3+b3x+c3x2+d3x3
G2光滑、拼接
C0连续 C1连续
C2连续
三次Hermite曲线
é ê P(t) = ét 3 t 2 t 1ù ê ë ûê ê ë 2 -2 1 1 -3 3 -2 -1 0 0 1 0 1 0 0 0 é ùê úê úê úê úê û ë P0 ù ú P1 ú ú V0 ú V1 ú û
}
动态修改原理

点中图形 hitTest
包络框检查 最短距离(Bezier)

动态拖动图形
复制出临时图形 改变临时图形位置

框选图形
包络框与选框相交

异步显示临时图形
动态拖动节点
在临时图形上改变

亮显图形
原位加粗临时显示 临时显示操作手柄
节点位置，反算 异步显示临时图形
redraw

视图无效

regen
视图显示事件：
显示上次底图 显示临时图形
视图显示事件：
显示所有图形 保存为新的底图 显示临时图形
Demo
双缓存显示原理

onDraw(canvas):
if (g.beginPaint(canvas)) {
//createBufferedBitmap(canvas.width, canvas.height) if ( ! g.drawCachedBitmap() ) { drawAllShapes(g); // g.drawRect(sp.ctx, sp.rect); g.saveCachedBitmap(); } currentCmd.dynDraw(g); // dynShape.draw(g); g.endPaint(); //canvas.drawBitmap(bufferedBitmap)

P1
P(0.5) P(0) P(1)
1 1 p( start) ( P0 P ), p(end) ( P2 P3 ) 1 2 2
M
p( start) P P0 , p(end) P3 P2 1
P2 P0
曲线转换
p(t ) T M1 G1
p(t ) T M 2 G2
平移 旋转（逆时针）
é ux uy 0 ù ê ú vy 0 ú ê vx ê orgx orgy 1 ú ë û
0 sy
1 sy
sx 1
比例
错切
1 0 0 1
关于原点对称
1 0 0 1
关于X轴对称 上下翻转
1 0 0 1
三次B样条曲线
1 3 3 3 6 3 1 3 2 P t t t t 1 i 3 0 3 6 4 1 1


1 Pi 0 Pi 1 0 Pi 2 0 Pi 3
两段B样条曲线自然平滑连接
端点只与三个控制点有关 局部可调整性好的
反求三次B样条插值曲线

构造三次B样条曲线通过型值点Pi
1 B0 2 P 1 B 6P 4 1 1 1 B2 6 P2 1 4 1 ... ... ... ... 1 4 1 Bn 1 6 Pn 1 1 0 1 Bn 2 Pn1
G1连续 P1(t=1) P0(t=0)
V0
V1
Cardinal Spline(基数样条，
GDI+)
Vi = tension ´(Pi+1 -Pi-1 ) 0 £ tension £1
是Hermite曲线的一个子集
切矢由相邻两个控制点、张力系数形成
tension=1: Catmull-Rom spline (关键帧)
世界坐标系：单位矩阵
é a b 0 ù é Qx Qy 0 ù = é Vx Vy 0 ù ´ ê d e 0 ú ú ë û ë û ê ê dx dy 1 ú û 矢量不受平移分量影响 ë
uy 0 ux M vx vy 0 orgx orgy 1
用目标坐标系上的坐标来表达
三次参数样条曲线
é é a b ùê V0 ê úê V 1 4 1 ê úê 1 ê úê V2 1 4 1 ê úê ê úê 1 4 1 ú Vn-2 ê ê ê m n úê V ë û n-1 ë ù é ú ê ú ê ú ê ú=ê ú ê ú ê ú ê ú ê û ë C0 ù Vi-1 + 4Vi +Vi+1 = 3(Pi+1 - Pi-1 ) ú C1 ú ú C2 ú ú ú Ci = 3(P - P ) i+1 i-1 Cn-2 ú Cn-1 ú û
Page

UIKit
Quartz Image
ScrollView
模型矩阵：如何选择和计算 UIKit与Quartz坐标系转换 滚动视图的坐标系转换
矢量绘图原理
图形显示、动态绘图、双缓存显示
动态绘图原理

触摸移动事件：
改变临时图形坐标 视图无效

触摸完成事件：
提交新的图形 清空临时图形
G2 M 2 1 M 1 G1 M 1, 2 G1
三次周期B样条三次Bezier样条：
3 3 1 3 6 3 3 3 0 0 0 1 1 3 3 1 0 1 3 6 3 0 6 3 0 3 0 4 1 1
1
M B ,be
1 1 0 1 0 0 6 0 0 0
4 1 0 4 2 0 2 4 0 1 4 1
常见图形的Bezier表示
矢量绘图框架
TouchVG for iOS, Android and Windows
TouchVG 架构
海龟作图法

相对方位：前进、转弯
B A
样条曲线
基础概念、样条曲线、曲线常用技术 样条方法Bezier方法B样条方法有理 Bezier非均匀有理B样条（NURBS）方法
曲线基础概念插值样条 Nhomakorabea逼近样条
曲线基础概念

三次多项式分段曲线（样条曲线）
y2(x)=a2+b2x+c2x2+d2x3 y1(x)=a1+b1x+c1x2+d1x3
关于Y轴对称 左右翻转
复合变换：矩阵叠加
关于点(x, y)、角a的直线对称
0 0 cos(a ) sin(a ) 0 1 0 0 cos(a ) sin(a ) 0 1 0 0 1 0 1 0 sin(a ) cos(a ) 0 0 1 0 sin(a ) cos(a ) 0 0 1 0 x y 1 0 0 1 0 0 1 0 0 1 x y 1
Bi 1 4 Bi Bi 1 6 Pi 1 0 1
B2 B0 2 P 1 Bn Bn 2 2 Pn1
非均匀B样条曲线
非均匀B样条
累加弦长参数： hi = |PiPi+1|， s0 = 0，si+1 = si + hi t ∈[si , si+1]
均匀B样条
Q = P×M P = Q×M-1
例：UIKitQuartz
é 1 0 0 ù ê ú CTM = ê 0 -1 0 ú ê 0 h 1 ú ë û
基本变换矩阵
é 1 0 0 ù ê ú cos(a) sin(a) sx ê 0 1 0 ú sin(a) cos(a) 0 ê dx dy 1 ú ë û

3
t
2

t ∈[0, 1]
Hermite曲线如何 转为贝塞尔曲线？
Bezier曲线拼接
只剩Q3可自由定位
Q0 6(Q2 2Q1 Q0 )
P1 6( P3 2P2 P ) 1
P1 3( P3 P2 )
P3 Q0 P 3 P 2 Q1 Q 0 Q 2 P1 2(Q1 P 2)
Vector Graphics
矢量绘图基础
张云贵
2012-7-17
目录
仿射变换基础
矢量、变换矩阵、仿射坐标系、视图放缩
点和矢量

Point
length,
distanceTo（距离） angle, angle2

正交矢量
perpVector
v
Vector
length,
unitVector angle, angle2, angleTo（夹角） 点积（夹角、正交） 叉积（面积、平行）
采用弦长参数法，避免因节点 分布不均匀而变形，更光顺性
二次Bezier曲线（抛物线）

P(t ) (1 t ) P0 2t (1 t )P t P2 (0 t 1) 1 P′(0)=2(P1-P0) P′(1)=2(P1-P0)
2 2
P (t ) t 2
P1
P(0.5)

P±V=P
中点
P-P=V
V±V=V
A+B=2C 线性插值 P=2/3A+1/3B
矩阵、仿射变换
世界坐标系中的坐标
é a b 0 ù é Qx Qy 1 ù = é Px Py 1 ù ´ ê d e 0 ú ú ë û ë û ê ê dx dy 1 ú ë û 源坐标系中的点
源映射到目标的变换矩阵
边界点处二阶导数为零 （自由端，自然样条曲线） a=2，b=1， C0 =3(P1 – P0) m=1，n=2，Cn-1=3(Pn-1– Pn-2)
闭合曲线： 4V0+V1+Vn-2 = 3(P1-P0)
V0 - Vn-1 = 0
三次Bezier曲线
P(t ) (1 t )3 P0 3t (1 t 2 ) P1 3t 2 (1 t ) P2 t 3 P3 t 1 3 3 3 6 3 t 1 3 3 0 1 0 0 1 P0 P 0 1 0 P2 0 P3
移到原点 P1 P3 P2 P4
反向旋转
上下翻转
正向旋转
移回
M = Mscale(|P3P4| / |P1P2|, at P1) * Moffset(P3-P1) * Mrotate((P2-P1).angleTo(P4-P3), P3)
模型坐标系
Local CS

显示坐标系
Model CS
World CS
View CS
Local CS Model CS World CS View CS 变换栈 M1 M2 M3 (Zoom) 图形显示：控制点变换，然后显示（剪裁、插值） 显示坐标到图形模型坐标：怎样转换？ Demo
iOS Reader 坐标系转换
Double Buffered Bitmap