# JsDoc Reference - CeL.net.SVG

Class Index | File Index

## Classes

- _global_
- CeL
- CeL.code.API
- CeL.code.compatibility
- CeL.code.debug
- CeL.code.log
- CeL.code.reorganize
- CeL.data
- CeL.data.CSV
- CeL.data.XML
- CeL.env
- CeL.IO.file
- CeL.IO.Windows.file
- CeL.locale
- CeL.math
- CeL.math.Hamming
- CeL.math.polynomial
- CeL.math.quotient
- CeL.misc.check
- CeL.native
- CeL.net
- CeL.net.Ajax
- CeL.net.form.address
- CeL.net.form.bank_account
- CeL.net.form.education
- CeL.net.form.select_input
- CeL.net.HTA
- CeL.net.map
- CeL.net.SVG
- CeL.net.web
- CeL.OS.Windows
- CeL.OS.Windows.job
- CeL.OS.Windows.registry
- CeL.OS.WMI

# Class CeL.net.SVG

generation of Scalable Vector Graphics
輔助繪圖的基本功能物件，生成 SVG 操作函數。
Defined in: SVG.origin.js.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| CeL.net.SVG(_width, _height, _backgroundColor) module SVG 物件之 constructor。 設定 SVG document fragment 並將之插入網頁中。

Field Summary
Field Attributes | Field Name and Description
--- | ---
<static> | CeL.net.SVG._#lastAdd 最後一個增加的 instance
<static> | CeL.net.SVG._#lastAddDefs 最後一個增加的 definition
| contains 包含了插入元件的原始資訊。 Use #addContain to add contains.
<static> | CeL.net.SVG.defaultStrokeWidth default stroke width.
| div 所插入之網頁元素
<static> | CeL.net.SVG.idPrefix 所有造出 id 之 prefix
| svg SVG document fragment

Method Summary
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) use CeL.net.SVG to draw: 利用 module SVG 物件來展示直式除法。 !! 尚有許多 bug
<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 並將之插入網頁中。

Parameters:
{int} _width
  width of the canvas
{int} _height
  height of the canvas
{color String} _backgroundColor Optional
  background color of the canvas (UNDO)

Deprecated:
Use toolkit listed below instead:
svgweb
Scour

Since:
  2006/12/7,10-12

Returns:
  {CeL.net.SVG} CeL.net.SVG object created

Requires:
  set_attribute,XML_node,remove_all_child//removeNode

See:
  Scalable Vector Graphics (SVG) 1.1 Specification
  SVG 1.1 reference with examples
  Introduction and Features of JavaScript "Function" Objects
  Volity Wiki: SVG Script Tricks
  Javascript SVG et DOM

Field Detail
<static> CeL.net.SVG._#lastAdd
最後一個增加的 instance

<static> CeL.net.SVG._#lastAddDefs
最後一個增加的 definition

{Array} 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

See:
  Defining an SVG document fragment: the 'svg' element

Method Detail
<static> CeL.net.SVG._#addCircle(_r, _cx, _cy)
繪製圓形。
此函數利用 _.type.addEllipsePath 來畫簡單圓形。

Parameters:
_r
_cx
_cy

Returns:

<static> CeL.net.SVG._#addContain(_o, _type, propertyO)
增加插入的元件。
應該用 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。因此我們在創建實例之前，需要先在本物件中作定義。

Parameters:
_n
  node

Returns:

<static> CeL.net.SVG._#addEllipse(_rx, _ry, _cx, _cy)
繪製簡單圓形/橢圓。
此函數利用 .prototype.addEllipsePath 來畫簡單橢圓。

Parameters:
_rx
_ry
_cx
_cy

Returns:

<static> CeL.net.SVG._#addEllipsePath(_rx, _ry, _cx, _cy, _color, _strokeWidth, _fill, tramA)
繪製橢圓曲線。
此函數利用 _.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 將之插入本物件中。

Parameters:
_left
_top
_width
_height
_color
_strokeWidth

Returns:

<static> CeL.net.SVG._#addNode(_n, _a, _i)
增加 SVG element。
結合 .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 將之插入本物件中。

Parameters:
_d
_color
_strokeWidth
_fill

Returns:

<static> CeL.net.SVG._#addPolyline(_pA, _color, _strokeWidth, _fill, tramA)
繪製多邊形。
此函數利用 _.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 將之插入本物件中。

Parameters:
_w
_h
_x
_y
_color
_strokeWidth
_fill
tramA

Returns:

<static> CeL.net.SVG._#addText(_text, _left, _baseLine, _color, _font)
添加文字。
此函數利用 _.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。因此我們在創建實例之前，需要先在本物件中作定義。

Parameters:
_i
  id
_a

Returns:

<static> CeL.net.SVG._#attachGroup(_n)
綁定 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。

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:

See:
  Text - SVG 1.1 - 20030114

<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。為了未來的兼容性，我們將這個功能獨立出來。

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)
use CeL.net.SVG to draw: 利用 module SVG 物件來展示直式除法。
!! 尚有許多 bug

    // 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: 小數的乘法

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

Documentation generated by JsDoc Toolkit 2.4.0 on Fri Aug 05 2011 17:45:25 GMT+0800 (CST)