Change Dir

          先知cd——熱愛生活是一切藝術的開始

          統計

          留言簿(18)

          積分與排名

          “牛”們的博客

          各個公司技術

          我的鏈接

          淘寶技術

          閱讀排行榜

          評論排行榜

          raphaeljs畫圖

          raphaeljs,畫圖,最關鍵的需要理解SVG的path,而難點在于path是遵循貝塞爾曲線的,貝塞爾曲線是由起始點和終點以及兩個控制點總共4個點來確定曲線的走向的,曲線的函數是一個基于時間的動態函數。具體貝塞爾曲線的方程參看這里http://zh.wikipedia.org/wiki/%E8%B2%9D%E5%A1%9E%E7%88%BE%E6%9B%B2%E7%B7%9A

          而SVG中各個說明如下:http://en.wikipedia.org/wiki/Scalable_Vector_Graphicshttp://www.w3.org/TR/SVG/paths.html

          用raphaeljs畫曲線的demo:http://fanstu.sinaapp.com/god/raphaeljs/path.php

          具體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)+

          Catmull-Rom curveto*  x1 y1 (x y)+

          這里,M代表起始點的位置,也就是說利用raphael從哪個坐標開始畫,如果是畫直線,那么L指向的位置是直線的終點。H和V代表水平和垂直的直線。C是最常用的也是參數最多最復雜的,C代表curve就是基于被賽爾曲線的path,x1 y1 x2 y2是兩個控制點的坐標,x y是終點。而S,Q,T都是C的升級版平滑和二階及二階平滑。

          當然raphael也提供了基礎的比如circle,rect,text和image等元素,構造這樣的對象直接用于畫圖控制,利用raphael已經可以做任何畫圖了。

          posted on 2012-12-15 22:44 changedi 閱讀(2017) 評論(0)  編輯  收藏 所屬分類: Javascript


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 霍城县| 特克斯县| 宝清县| 东海县| 都江堰市| 循化| 祁东县| 鹤庆县| 监利县| 新蔡县| 峡江县| 乐清市| 汝阳县| 寻乌县| 延边| 商南县| 青田县| 大港区| 鹿邑县| 温泉县| 灌云县| 蓬溪县| 调兵山市| 凯里市| 静宁县| 额济纳旗| 金乡县| 深水埗区| 永兴县| 丰顺县| 罗平县| 云南省| 象州县| 攀枝花市| 都安| 仲巴县| 南昌市| 巢湖市| 额敏县| 绥宁县| 赤峰市|