Class CeL.net.SVG
generation of Scalable Vector Graphics
輔助繪圖的基本功能物件,生成 SVG 操作函數。
Defined in: SVG.origin.js.
Constructor Attributes | Constructor Name and Description |
---|---|
CeL.net.SVG(_width, _height, _backgroundColor)
module SVG 物件之 constructor。
設定 SVG document fragment 並將之插入網頁中。 |
Field Attributes | Field Name and Description |
---|---|
<static> |
CeL.net.SVG._#lastAdd
最後一個增加的 instance
|
<static> |
CeL.net.SVG._#lastAddDefs
最後一個增加的 definition
|
包含了插入元件的原始資訊。
Use #addContain to add contains. |
|
<static> |
CeL.net.SVG.defaultStrokeWidth
default stroke width.
|
所插入之網頁元素
|
|
<static> |
CeL.net.SVG.idPrefix
所有造出 id 之 prefix
|
SVG document fragment
|
Method Attributes | Method Name and Description |
---|---|
<static> |
CeL.net.SVG._#addCircle(_r, _cx, _cy)
繪製圓形。
此函數利用 _.type.addEllipsePath 來畫簡單圓形。 |
<static> |
CeL.net.SVG._#addContain(_o, _type, propertyO)
增加插入的元件。
應該用 symbol |
<static> |
CeL.net.SVG._#addDefs(_n)
增加 SVG 定義。
SVG 規範中聲明,SVG 的 <use> element 不能引用外部文件或其 elements。因此我們在創建實例之前,需要先在本物件中作定義。 |
<static> |
CeL.net.SVG._#addEllipse(_rx, _ry, _cx, _cy)
繪製簡單圓形/橢圓。
此函數利用 .prototype.addEllipsePath 來畫簡單橢圓。 |
<static> |
CeL.net.SVG._#addEllipsePath(_rx, _ry, _cx, _cy, _color, _strokeWidth, _fill, tramA)
繪製橢圓曲線。
此函數利用 _.eNode 造出橢圓曲線元件之後,再用 .prototype.addNode 將之插入本物件中。 |
<static> |
CeL.net.SVG._#addLine(_left, _top, _width, _height, _color, _strokeWidth)
繪製直線。
此函數利用 _.eNode 造出直線元件之後,再用 .prototype.addNode 將之插入本物件中。 |
<static> |
CeL.net.SVG._#addNode(_n, _a, _i)
增加 SVG element。
結合 .prototype.addDefs 與 .prototype.addUse,作完定義後隨即使用之。 |
<static> |
CeL.net.SVG._#addPath(_d, _color, _strokeWidth, _fill)
繪製曲線路徑。
此函數利用 _.eNode 造出路徑元件之後再用 .prototype.addNode 將之插入本物件中。 |
<static> |
CeL.net.SVG._#addPolyline(_pA, _color, _strokeWidth, _fill, tramA)
繪製多邊形。
此函數利用 _.eNode 造出多邊形路徑元件之後再用 .prototype.addNode 將之插入本物件中。 |
<static> |
CeL.net.SVG._#addQuadrilateral(_ds, _h, _d, _us, tramA)
畫簡單長方形或平行四邊形、梯形
|
<static> |
CeL.net.SVG._#addRect(_w, _h, _x, _y, _color, _strokeWidth, _fill, tramA)
繪製矩形。
此函數利用 _.eNode 造出矩形路徑元件之後,再用 .prototype.addNode 將之插入本物件中。 |
<static> |
CeL.net.SVG._#addText(_text, _left, _baseLine, _color, _font)
添加文字。
此函數利用 _.eNode 造出文字元件之後再用 .prototype.addNode 將之插入本物件中。 |
<static> |
CeL.net.SVG._#addTriangle(_ds, _h, _d, tramA)
畫簡單三角形
|
<static> |
CeL.net.SVG._#addUse(_i, _a)
增加 SVG 實例。
利用本物件中之定義創建實例並增添至本物件中。 在裝載 b.svg 時,將 a.svg 中的 defs 中的圖元裝載到 b.svg 中(文件上是兩者是保持獨立的,但在內存中將二者合二為一),這樣就可以在b.svg中直接引用這些圖元了。 SVG 規範中聲明,SVG 的 <use> element 不能引用外部文件或其 elements。因此我們在創建實例之前,需要先在本物件中作定義。 |
<static> |
CeL.net.SVG._#attachGroup(_n)
綁定 SVG elements 至本物件群組。
這函數將已存在的 SVG elements 綁定至本物件之群組中。若群組不存在,則創建出一個。 |
<static> |
CeL.net.SVG._#clean()
清除 canvas
很可能會出問題! |
<static> |
CeL.net.SVG._#createGroup(_a, _i)
創建本物件之 SVG 群組。
利用 SVG 群組我們可以同時操作多個 SVG elements。 |
<static> |
CeL.net.SVG._#setSize(_width, _height)
調整 canvas 大小
|
<static> |
CeL.net.SVG._#show(_v)
顯現 this module SVG object
|
<static> |
CeL.net.SVG.changeText(text_node, text)
改變 text
|
<private> <static> |
CeL.net.SVG.createENS(_ns, _qn, _a, _i)
create SVG document fragment (only for .createNode)
|
<private> <static> |
CeL.net.SVG.createNode(_nodeN, _a, _i)
create SVG document fragment 元件(component)。
SVG 之 document fragment 與 HTML 不同 namespace,因此我們需要使用到 http://www.w3.org/2000/svg 來作為 XML elements 的 namespace。為了未來的兼容性,我們將這個功能獨立出來。 |
<static> |
CeL.net.SVG.draw_addition(num1, num2, svgO, _color, _font)
use CeL.net.SVG to draw:
利用 module SVG 物件來演示直式加法。
|
<static> |
CeL.net.SVG.draw_circle(_r, svgO, _color, _fill)
use CeL.net.SVG to draw:
繪製圓形。
|
<static> |
CeL.net.SVG.draw_ellipse(_rx, _ry, svgO, _color, _fill)
use CeL.net.SVG to draw:
繪製橢圓。
|
<static> |
CeL.net.SVG.draw_long_division(dividend, divisor, digits_after, svgO, _color, _font)
|
<static> |
CeL.net.SVG.draw_multiplication(num1, num2, svgO, _color, _font)
use CeL.net.SVG to draw:
利用 module SVG 物件來演示直式乘法。
TODO: 小數的乘法 |
<static> |
CeL.net.SVG.draw_quadrilateral(_ds, _h, _d, _us, svgO, _color, _fill)
use CeL.net.SVG to draw:
畫簡單梯形。
|
<static> |
CeL.net.SVG.draw_subtraction(num1, num2, svgO, _color, _font)
use CeL.net.SVG to draw:
呼叫 draw_subtraction 來演示直式減法。因為直式加減法的運算與機制過程非常相似,因此我們以 draw_addition 來一併的處理這兩個相似的運算過程。
|
<static> |
CeL.net.SVG.draw_triangle(_ds, _h, _d, svgO, _color, _fill)
use CeL.net.SVG to draw:
畫簡單三角形。
|
<private> <static> |
CeL.net.SVG.getNodeById(id)
從 id 獲得 node
|
<private> <static> |
CeL.net.SVG.getRandomID(tag)
get a random ID to use.
|
<private> <static> |
CeL.net.SVG.setRandomID(_n)
give a random ID to the specified node.
|
Class Detail
CeL.net.SVG(_width, _height, _backgroundColor)
module SVG 物件之 constructor。
設定 SVG document fragment 並將之插入網頁中。
設定 SVG document fragment 並將之插入網頁中。
- Parameters:
- {int} _width
- width of the canvas
- {int} _height
- height of the canvas
- {color String} _backgroundColor Optional
- background color of the canvas (UNDO)
- Since:
- 2006/12/7,10-12
- Returns:
- {CeL.net.SVG} CeL.net.SVG object created
- Requires:
- set_attribute,XML_node,remove_all_child//removeNode
Field Detail
<static>
CeL.net.SVG._#lastAdd
最後一個增加的 instance
<static>
CeL.net.SVG._#lastAddDefs
最後一個增加的 definition
{Array}
contains
包含了插入元件的原始資訊。
Use #addContain to add contains.
Use #addContain to add contains.
<static>
{Number}
CeL.net.SVG.defaultStrokeWidth
default stroke width. 單位: px
div
所插入之網頁元素
<static>
{string}
CeL.net.SVG.idPrefix
所有造出 id 之 prefix
svg
SVG document fragment
Method Detail
<static>
CeL.net.SVG._#addCircle(_r, _cx, _cy)
繪製圓形。
此函數利用 _.type.addEllipsePath 來畫簡單圓形。
此函數利用 _.type.addEllipsePath 來畫簡單圓形。
- Parameters:
- _r
- _cx
- _cy
- Returns:
<static>
CeL.net.SVG._#addContain(_o, _type, propertyO)
增加插入的元件。
應該用 symbol
應該用 symbol
- Parameters:
- _o
- object reference
- _type
- type of this component
- propertyO Optional
- other properties
- Returns:
- Requires:
- split_String_to_Object
<static>
CeL.net.SVG._#addDefs(_n)
增加 SVG 定義。
SVG 規範中聲明,SVG 的 <use> element 不能引用外部文件或其 elements。因此我們在創建實例之前,需要先在本物件中作定義。
SVG 規範中聲明,SVG 的 <use> element 不能引用外部文件或其 elements。因此我們在創建實例之前,需要先在本物件中作定義。
- Parameters:
- _n
- node
- Returns:
<static>
CeL.net.SVG._#addEllipse(_rx, _ry, _cx, _cy)
繪製簡單圓形/橢圓。
此函數利用 .prototype.addEllipsePath 來畫簡單橢圓。
此函數利用 .prototype.addEllipsePath 來畫簡單橢圓。
- Parameters:
- _rx
- _ry
- _cx
- _cy
- Returns:
<static>
CeL.net.SVG._#addEllipsePath(_rx, _ry, _cx, _cy, _color, _strokeWidth, _fill, tramA)
繪製橢圓曲線。
此函數利用 _.eNode 造出橢圓曲線元件之後,再用 .prototype.addNode 將之插入本物件中。
此函數利用 _.eNode 造出橢圓曲線元件之後,再用 .prototype.addNode 將之插入本物件中。
- Parameters:
- _rx
- _ry
- _cx
- _cy
- _color
- _strokeWidth
- _fill
- tramA
- Returns:
<static>
CeL.net.SVG._#addLine(_left, _top, _width, _height, _color, _strokeWidth)
繪製直線。
此函數利用 _.eNode 造出直線元件之後,再用 .prototype.addNode 將之插入本物件中。
此函數利用 _.eNode 造出直線元件之後,再用 .prototype.addNode 將之插入本物件中。
- Parameters:
- _left
- _top
- _width
- _height
- _color
- _strokeWidth
- Returns:
<static>
CeL.net.SVG._#addNode(_n, _a, _i)
增加 SVG element。
結合 .prototype.addDefs 與 .prototype.addUse,作完定義後隨即使用之。
結合 .prototype.addDefs 與 .prototype.addUse,作完定義後隨即使用之。
- Parameters:
- _n
- tagName(nodeType)
- {hash|string} _a
- attribute/property
- _i
- inner object
- Returns:
<static>
CeL.net.SVG._#addPath(_d, _color, _strokeWidth, _fill)
繪製曲線路徑。
此函數利用 _.eNode 造出路徑元件之後再用 .prototype.addNode 將之插入本物件中。
此函數利用 _.eNode 造出路徑元件之後再用 .prototype.addNode 將之插入本物件中。
- Parameters:
- _d
- _color
- _strokeWidth
- _fill
- Returns:
<static>
CeL.net.SVG._#addPolyline(_pA, _color, _strokeWidth, _fill, tramA)
繪製多邊形。
此函數利用 _.eNode 造出多邊形路徑元件之後再用 .prototype.addNode 將之插入本物件中。
此函數利用 _.eNode 造出多邊形路徑元件之後再用 .prototype.addNode 將之插入本物件中。
- Parameters:
- {int array} _pA
- [x1,y1,x2,y2,x3,y3,..]
- _color
- _strokeWidth
- _fill
- tramA
- Returns:
<static>
CeL.net.SVG._#addQuadrilateral(_ds, _h, _d, _us, tramA)
畫簡單長方形或平行四邊形、梯形
- Parameters:
- _ds
- _h
- _d
- _us
- tramA
- Returns:
- See:
- 平行四邊形
<static>
CeL.net.SVG._#addRect(_w, _h, _x, _y, _color, _strokeWidth, _fill, tramA)
繪製矩形。
此函數利用 _.eNode 造出矩形路徑元件之後,再用 .prototype.addNode 將之插入本物件中。
此函數利用 _.eNode 造出矩形路徑元件之後,再用 .prototype.addNode 將之插入本物件中。
- Parameters:
- _w
- _h
- _x
- _y
- _color
- _strokeWidth
- _fill
- tramA
- Returns:
<static>
CeL.net.SVG._#addText(_text, _left, _baseLine, _color, _font)
添加文字。
此函數利用 _.eNode 造出文字元件之後再用 .prototype.addNode 將之插入本物件中。
此函數利用 _.eNode 造出文字元件之後再用 .prototype.addNode 將之插入本物件中。
- Parameters:
- _text
- _left
- _baseLine
- _color
- _font
- Returns:
<static>
CeL.net.SVG._#addTriangle(_ds, _h, _d, tramA)
畫簡單三角形
- Parameters:
- _ds
- _h
- _d
- tramA
- Since:
- 2006/12/17 12:38
- Returns:
<static>
CeL.net.SVG._#addUse(_i, _a)
增加 SVG 實例。
利用本物件中之定義創建實例並增添至本物件中。
在裝載 b.svg 時,將 a.svg 中的 defs 中的圖元裝載到 b.svg 中(文件上是兩者是保持獨立的,但在內存中將二者合二為一),這樣就可以在b.svg中直接引用這些圖元了。
SVG 規範中聲明,SVG 的 <use> element 不能引用外部文件或其 elements。因此我們在創建實例之前,需要先在本物件中作定義。
利用本物件中之定義創建實例並增添至本物件中。
在裝載 b.svg 時,將 a.svg 中的 defs 中的圖元裝載到 b.svg 中(文件上是兩者是保持獨立的,但在內存中將二者合二為一),這樣就可以在b.svg中直接引用這些圖元了。
SVG 規範中聲明,SVG 的 <use> element 不能引用外部文件或其 elements。因此我們在創建實例之前,需要先在本物件中作定義。
- Parameters:
- _i
- id
- _a
- Returns:
<static>
CeL.net.SVG._#attachGroup(_n)
綁定 SVG elements 至本物件群組。
這函數將已存在的 SVG elements 綁定至本物件之群組中。若群組不存在,則創建出一個。
這函數將已存在的 SVG elements 綁定至本物件之群組中。若群組不存在,則創建出一個。
- Parameters:
- _n
- node
- Returns:
- this module SVG object
<static>
CeL.net.SVG._#clean()
清除 canvas
很可能會出問題!
很可能會出問題!
- Since:
- 2009/12/18 21:17:09
- Returns:
- this SVG
<static>
CeL.net.SVG._#createGroup(_a, _i)
創建本物件之 SVG 群組。
利用 SVG 群組我們可以同時操作多個 SVG elements。
利用 SVG 群組我們可以同時操作多個 SVG elements。
- Parameters:
- {hash|string} _a
- attribute/property
- _i
- inner object
- Returns:
- this SVG
<static>
CeL.net.SVG._#setSize(_width, _height)
調整 canvas 大小
- Parameters:
- {Integer} _width
- width in px
- {Integer} _height
- height in px
- Returns:
- this module SVG object
<static>
CeL.net.SVG._#show(_v)
顯現 this module SVG object
- Parameters:
- _v
- visible
- Returns:
- this module SVG object
<static>
CeL.net.SVG.changeText(text_node, text)
改變 text
- Parameters:
- text_node
- text object
- text
- change to this text
- Returns:
<private> <static>
CeL.net.SVG.createENS(_ns, _qn, _a, _i)
create SVG document fragment (only for .createNode)
- Parameters:
- _ns
- namespaceURI
- _qn
- qualifiedName
- _a
- propertyA
- _i
- innerObj
- Returns:
<private> <static>
CeL.net.SVG.createNode(_nodeN, _a, _i)
create SVG document fragment 元件(component)。
SVG 之 document fragment 與 HTML 不同 namespace,因此我們需要使用到 http://www.w3.org/2000/svg 來作為 XML elements 的 namespace。為了未來的兼容性,我們將這個功能獨立出來。
SVG 之 document fragment 與 HTML 不同 namespace,因此我們需要使用到 http://www.w3.org/2000/svg 來作為 XML elements 的 namespace。為了未來的兼容性,我們將這個功能獨立出來。
- Parameters:
- _nodeN
- node/tag name
- {hash|string} _a
- attribute/property
- _i
- inner object
- Returns:
- node created or null
<static>
CeL.net.SVG.draw_addition(num1, num2, svgO, _color, _font)
use CeL.net.SVG to draw:
利用 module SVG 物件來演示直式加法。
- Parameters:
- num1
- num2
- svgO
- _color
- _font
- Since:
- 2006/12/26 17:47
- Returns:
- module SVG object
<static>
CeL.net.SVG.draw_circle(_r, svgO, _color, _fill)
use CeL.net.SVG to draw:
繪製圓形。
- Parameters:
- _r
- svgO
- _color
- _fill
- Since:
- 2006/12/19 18:05
- Returns:
- module SVG object
<static>
CeL.net.SVG.draw_ellipse(_rx, _ry, svgO, _color, _fill)
use CeL.net.SVG to draw:
繪製橢圓。
- Parameters:
- _rx
- _ry
- svgO
- _color
- _fill
- Returns:
- module SVG object
<static>
CeL.net.SVG.draw_long_division(dividend, divisor, digits_after, svgO, _color, _font)
// include module CeL.use('net.SVG'); // way 1 var SVG_object = new CeL.SVG; SVG_object.attach('panel_for_SVG').show(1); CeL.draw_long_division(452, 34, SVG_object); // You can also put here. //SVG_object.attach('panel_for_SVG').show(1); // way 2 var SVG_object = CeL.draw_long_division(100000, 7); SVG_object.attach('panel_for_SVG').show(1); // 另一次顯示 CeL.draw_long_division(100, 7, SVG_object);
- Parameters:
- dividend
- divisor
- digits_after
- TODO: 小數直式除法: 小數點後位數, how many digits after the decimal separator
- svgO
- _color
- _font
- Since:
- 2006/12/11-12 11:36
- Returns:
- module SVG object
<static>
CeL.net.SVG.draw_multiplication(num1, num2, svgO, _color, _font)
use CeL.net.SVG to draw:
利用 module SVG 物件來演示直式乘法。
TODO: 小數的乘法
TODO: 小數的乘法
- Parameters:
- num1
- num2
- svgO
- _color
- _font
- Since:
- 2006/12/26 17:47
- Returns:
- module SVG object
- See:
- 小數篇:小數的乘法
<static>
CeL.net.SVG.draw_quadrilateral(_ds, _h, _d, _us, svgO, _color, _fill)
use CeL.net.SVG to draw:
畫簡單梯形。
- Parameters:
- _ds
- _h
- _d
- _us
- svgO
- _color
- _fill
- Since:
- 2006/12/17 12:38
- Returns:
- module SVG object
- Requires:
- split_String_to_Object,set_attribute,XML_node,removeNode,remove_all_child,g_SVG,draw_quadrilateral
<static>
CeL.net.SVG.draw_subtraction(num1, num2, svgO, _color, _font)
use CeL.net.SVG to draw:
呼叫 draw_subtraction 來演示直式減法。因為直式加減法的運算與機制過程非常相似,因此我們以 draw_addition 來一併的處理這兩個相似的運算過程。
- Parameters:
- num1
- num2
- svgO
- _color
- _font
- Since:
- 2006/12/26 17:47
- Returns:
- module SVG object
<static>
CeL.net.SVG.draw_triangle(_ds, _h, _d, svgO, _color, _fill)
use CeL.net.SVG to draw:
畫簡單三角形。
- Parameters:
- _ds
- _h
- _d
- svgO
- _color
- _fill
- Since:
- 2006/12/17 12:38
- Returns:
- module SVG object
- Requires:
- split_String_to_Object,set_attribute,XML_node,removeNode,remove_all_child,g_SVG,draw_triangle
<private> <static>
CeL.net.SVG.getNodeById(id)
從 id 獲得 node
- Parameters:
- id
- id
- Returns:
- node
<private> <static>
CeL.net.SVG.getRandomID(tag)
get a random ID to use.
- Parameters:
- tag
- tag name(nodeType)
- Returns:
- a random ID
<private> <static>
CeL.net.SVG.setRandomID(_n)
give a random ID to the specified node.
- Parameters:
- _n
- node
- Returns:
- id of the specified node