学习 kity 笔记(二)
继续学习 kity. 简要看一下 core/utils.js 和 core/browser.js.
== utils.js ==
函数 each(array_or_object, callback, context?) 遍历数组或对象, 调用回调.
函数 extend(obj, src...) 扩展 src... 到 obj.
函数 deepExtend() 递归深层的 extend(). (我觉得最好还是别用...)
函数 clone() 浅复制一个对象. 函数 copy() 深度复制对象.
函数 queryPath(path, obj) 访问使用 '.' 分隔的属性.
函数 flatten() 扁平化数组.
函数 paralle(v1, v2, op) 看注释像 map 或 map-reduce() 方法. (似乎可借鉴...)
函数 parallelize(op) 创建 op 的一个平行化版本. (也许没什么用...)
函数 isString(), isFunction() etc. 应类似于 jQuery 中类似函数, 略...
== browser.js ==
顾名思义就知道是浏览器兼容判断了...
花絮: 里面判断百度浏览器是正则 /bidubrowser/, 不会是 baidu 拼写错了吧...?
我是不想下载一个百度浏览器验证的.
其它没有太多要看的, 基本就是判断各种各样浏览器(含山寨版)... 作为前端开发,
其实很烦各种浏览器(尤其是山寨版)...
=====
准备看 shape/graphic 部分了. 按照名字的 alphabet 顺序, 还是先找个软柿子捏呢...?
还是先找个简单的 Rect 看吧, 长方形简单..., 不过我不会 SVG, 还得先学习一下 SVG 知识
才行...
=====
继续学习SVG, 订的书还没送到, 只能先从网上看一点:
http://www.w3school.com.cn/svg/svg_intro.asp
什么是 SVG: Scalable Vector Graphics. 矢量的, 可伸缩, 使用 XML 格式. 2003年成为标准.
今天的浏览器均支持 SVG 了.
复制一个实例 circle.svg, 打开浏览器看看, 果然出来一个红色的圆!
http://www.w3school.com.cn/svg/circle1.svg
各种节点,属性名字也有点像 canvas, 看来W3C学院派的东西有一脉相承性, 好学习...
自己加了一个矩形到 svg 文件中(软柿子, 好猜):
<rect x="300" y="200" width="240" height="120" fill="green" />
果真出来一个矩形, 就这么简单蒙对了?
SVG 代码以 <svg> 元素开始, 是根元素. width, height 属性设置宽度, 高度
(我猜 kity.Paper 对应 svg 元素, 属性也对应).
<circle> 用于创建圆. cx,cy 圆心, r 半径.
嵌入 HTML 页面: 1.用<embed>; 2.用 <object>; 3.使用 <iframe>
我看看 kity 用的什么方法: 网页里直接一个 <svg> 标签...
难道说 w3cschool 的教程已经过时了...? (书还没来)
== SVG 预定义形状 ==
rect, circle, ellipse, line, polyline, polygon, path
教程果然首先从矩形元素开始.<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
原来可以使用 style 定义表现, 而且的确是 css 语法, 又是为方便学习吧.
我可以想象出可以直接将 canvas 上画的东西转为 svg 格式...
可以写css形式的 style, 或用同名属性如stroke='xxx', 简单看了下 kity, 似乎用的后者方法?
可能为方便获取/设置某个属性.
circle 定义圆(cx,cy,r);
ellipse 定义椭圆(cx,cy, 有 rx,ry两个半径);
line 线条(x1,y1,x2,y2); 比较简单的就略.
polygon 定义(不少于三条边的)多边形: points='x1,y1 x2,y2 ...'
polyline 仅直线(但仍填充??): points=...
path定义路径: 可使用类似于绘图元命令的字符, 如 M=moveto, L=lineto 等.
H=horz-lineto, V=vert-lineto, C=curveto, S=smooth curveto
Q=quadratic Belzier curve(二次B样条曲线) ...
大写表示绝对定位, 小写为相对定位. 这样就大致能读懂 kity 里 path 的d属性字符串了...
(最好是有个解释器, 给出该字符串, 自动解析为人可读的绘制指令...)
差点忘了, 还可以找 SVG 编辑器的.