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 閱讀(2023) 評論(0)  編輯  收藏 所屬分類: Javascript


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


          網站導航:
           
          主站蜘蛛池模板: 孝义市| 沿河| 开远市| 西吉县| 横峰县| 芷江| 高邑县| 滦平县| 怀远县| 攀枝花市| 准格尔旗| 长岭县| 临汾市| 页游| 思南县| 伊吾县| 阳春市| 福鼎市| 蕉岭县| 聊城市| 景德镇市| 云霄县| 西藏| 茌平县| 延庆县| 南召县| 馆陶县| 蚌埠市| 九龙县| 木里| 诏安县| 昌宁县| 抚松县| 六枝特区| 甘孜| 东光县| 涿鹿县| 特克斯县| 红桥区| 银川市| 昌平区|