Change Dir

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

          統計

          留言簿(18)

          積分與排名

          “?!眰兊牟┛?/h3>

          各個公司技術

          我的鏈接

          淘寶技術

          閱讀排行榜

          評論排行榜

          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


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


          網站導航:
           
          主站蜘蛛池模板: 灵宝市| 通海县| 深水埗区| 宜黄县| 宜君县| 南雄市| 宁远县| 措勤县| 吴旗县| 麻城市| 大埔县| 英山县| 双辽市| 博客| 平远县| 海林市| 平安县| 平舆县| 枞阳县| 伊吾县| 平远县| 班玛县| 南通市| 巴南区| 扬中市| 沙洋县| 玉溪市| 康定县| 汉阴县| 达尔| 南投市| 伊吾县| 白银市| 阿鲁科尔沁旗| 昌宁县| 柘城县| 莱西市| 繁峙县| 赣州市| 苗栗市| 富民县|