cejs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="generator" content="JsDoc Toolkit" /> <title>JsDoc Reference - CeL.interact.integrate.SVG</title> <style type="text/css"> /* default.css */ body { font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif; width: 800px; } .header { clear: both; background-color: #ccc; padding: 8px; } h1 { font-size: 150%; font-weight: bold; padding: 0; margin: 1em 0 0 .3em; } hr { border: none 0; border-top: 1px solid #7F8FB1; height: 1px; } pre.code { display: block; padding: 8px; border: 1px dashed #ccc; } #index { margin-top: 24px; float: left; width: 160px; position: absolute; left: 8px; background-color: #F3F3F3; padding: 8px; } #content { margin-left: 190px; width: 600px; } .classList { list-style-type: none; padding: 0; margin: 0 0 0 8px; font-family: arial, sans-serif; font-size: 1em; overflow: auto; } .classList li { padding: 0; margin: 0 0 8px 0; } .summaryTable { width: 100%; } h1.classTitle { font-size:170%; line-height:130%; } h2 { font-size: 110%; } caption, div.sectionTitle { background-color: #7F8FB1; color: #fff; font-size:130%; text-align: left; padding: 2px 6px 2px 6px; border: 1px #7F8FB1 solid; } div.sectionTitle { margin-bottom: 8px; } .summaryTable thead { display: none; } .summaryTable td { vertical-align: top; padding: 4px; border-bottom: 1px #7F8FB1 solid; border-right: 1px #7F8FB1 solid; } /*col#summaryAttributes {}*/ .summaryTable td.attributes { border-left: 1px #7F8FB1 solid; width: 140px; text-align: right; } td.attributes, .fixedFont { line-height: 15px; color: #002EBE; font-family: "Courier New",Courier,monospace; font-size: 13px; } .summaryTable td.nameDescription { text-align: left; font-size: 13px; line-height: 15px; } .summaryTable td.nameDescription, .description { line-height: 15px; padding: 4px; padding-left: 4px; } .summaryTable { margin-bottom: 8px; } ul.inheritsList { list-style: square; margin-left: 20px; padding-left: 0; } .detailList { margin-left: 20px; line-height: 15px; } .detailList dt { margin-left: 20px; } .detailList .heading { font-weight: bold; padding-bottom: 6px; margin-left: 0; } .light, td.attributes, .light a:link, .light a:visited { color: #777; font-style: italic; } .fineprint { text-align: right; font-size: 10px; } </style> </head> <body>   <div id="header"> </div>   <div id="index">  <div align="center"><a href="../index.html">Class Index</a> | <a href="../files.html">File Index</a></div> <hr /> <h2>Classes</h2> <ul class="classList"> <li><i><a href="../symbols/_global_.html">_global_</a></i></li> <li><a href="../symbols/CeL.html">CeL</a></li> <li><a href="../symbols/CeL.application.debug.html">CeL.application.debug</a></li> <li><a href="../symbols/CeL.application.debug.log.html">CeL.application.debug.log</a></li> <li><a href="../symbols/CeL.application.locale.html">CeL.application.locale</a></li> <li><a href="../symbols/CeL.application.net.html">CeL.application.net</a></li> <li><a href="../symbols/CeL.application.net.Ajax.html">CeL.application.net.Ajax</a></li> <li><a href="../symbols/CeL.application.OS.Windows.html">CeL.application.OS.Windows</a></li> <li><a href="../symbols/CeL.application.OS.Windows.file.html">CeL.application.OS.Windows.file</a></li> <li><a href="../symbols/CeL.application.OS.Windows.HTA.html">CeL.application.OS.Windows.HTA</a></li> <li><a href="../symbols/CeL.application.OS.Windows.job.html">CeL.application.OS.Windows.job</a></li> <li><a href="../symbols/CeL.application.OS.Windows.registry.html">CeL.application.OS.Windows.registry</a></li> <li><a href="../symbols/CeL.application.OS.Windows.WMI.html">CeL.application.OS.Windows.WMI</a></li> <li><a href="../symbols/CeL.application.storage.file.html">CeL.application.storage.file</a></li> <li><a href="../symbols/CeL.data.html">CeL.data</a></li> <li><a href="../symbols/CeL.data.check.html">CeL.data.check</a></li> <li><a href="../symbols/CeL.data.code.API.html">CeL.data.code.API</a></li> <li><a href="../symbols/CeL.data.code.compatibility.html">CeL.data.code.compatibility</a></li> <li><a href="../symbols/CeL.data.code.reorganize.html">CeL.data.code.reorganize</a></li> <li><a href="../symbols/CeL.data.CSV.html">CeL.data.CSV</a></li> <li><a href="../symbols/CeL.data.math.html">CeL.data.math</a></li> <li><a href="../symbols/CeL.data.math.Hamming.html">CeL.data.math.Hamming</a></li> <li><a href="../symbols/CeL.data.math.polynomial.html">CeL.data.math.polynomial</a></li> <li><a href="../symbols/CeL.data.math.quotient.html">CeL.data.math.quotient</a></li> <li><a href="../symbols/CeL.data.native.html">CeL.data.native</a></li> <li><a href="../symbols/CeL.data.XML.html">CeL.data.XML</a></li> <li><a href="../symbols/CeL.env.html">CeL.env</a></li> <li><a href="../symbols/CeL.interact.DOM.html">CeL.interact.DOM</a></li> <li><a href="../symbols/CeL.interact.form.address.html">CeL.interact.form.address</a></li> <li><a href="../symbols/CeL.interact.form.select_input.html">CeL.interact.form.select_input</a></li> <li><a href="../symbols/CeL.interact.integrate.map.html">CeL.interact.integrate.map</a></li> <li><a href="../symbols/CeL.interact.integrate.SVG.html">CeL.interact.integrate.SVG</a></li> </ul> <hr />  </div> <div id="content">  <h1 class="classTitle"> Class CeL.interact.integrate.SVG </h1>  <p class="description"> generation of Scalable Vector Graphics<br/> 輔助繪圖的基本功能物件，生成 SVG 操作函數。 <br /><i>Defined in: </i> <a href="../symbols/src/D__USB_cgi-bin_lib_JS_interact_integrate_SVG.origin.js.html">SVG.origin.js</a>. </p>  <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class CeL.interact.integrate.SVG."> <caption>Class Summary</caption> <thead> <tr> <th scope="col">Constructor Attributes</th> <th scope="col">Constructor Name and Description</th> </tr> </thead> <tbody> <tr> <td class="attributes"> </td> <td class="nameDescription" > <div class="fixedFont"> <b><a href="../symbols/CeL.interact.integrate.SVG.html#constructor">CeL.interact.integrate.SVG</a></b>(_width, _height, _backgroundColor) </div> <div class="description">module SVG 物件之 constructor。<br/> 設定 SVG document fragment 並將之插入網頁中。</div> </td> </tr> </tbody> </table>  <table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class CeL.interact.integrate.SVG."> <caption>Field Summary</caption> <thead> <tr> <th scope="col">Field Attributes</th> <th scope="col">Field Name and Description</th> </tr> </thead> <tbody> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont"> CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#lastAdd">_#lastAdd</a></b> </div> <div class="description">最後一個增加的 instance</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont"> CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#lastAddDefs">_#lastAddDefs</a></b> </div> <div class="description">最後一個增加的 definition</div> </td> </tr> <tr> <td class="attributes"> </td> <td class="nameDescription"> <div class="fixedFont"> <b><a href="../symbols/CeL.interact.integrate.SVG.html#contains">contains</a></b> </div> <div class="description">包含了插入元件的原始資訊。<br/> Use #addContain to add contains.</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont"> CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.defaultStrokeWidth">defaultStrokeWidth</a></b> </div> <div class="description">default stroke width.</div> </td> </tr> <tr> <td class="attributes"> </td> <td class="nameDescription"> <div class="fixedFont"> <b><a href="../symbols/CeL.interact.integrate.SVG.html#div">div</a></b> </div> <div class="description">所插入之網頁元素</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont"> CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.idPrefix">idPrefix</a></b> </div> <div class="description">所有造出 id 之 prefix</div> </td> </tr> <tr> <td class="attributes"> </td> <td class="nameDescription"> <div class="fixedFont"> <b><a href="../symbols/CeL.interact.integrate.SVG.html#svg">svg</a></b> </div> <div class="description">SVG document fragment</div> </td> </tr> </tbody> </table>  <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class CeL.interact.integrate.SVG."> <caption>Method Summary</caption> <thead> <tr> <th scope="col">Method Attributes</th> <th scope="col">Method Name and Description</th> </tr> </thead> <tbody> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addCircle">_#addCircle</a></b>(_r, _cx, _cy) </div> <div class="description">繪製圓形。<br/> 此函數利用 _.type.addEllipsePath 來畫簡單圓形。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addContain">_#addContain</a></b>(_o, _type, propertyO) </div> <div class="description">增加插入的元件。<br/> 應該用 <a href="http://www.w3.org/TR/SVG/struct.html#SymbolElement">symbol</a></div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addDefs">_#addDefs</a></b>(_n) </div> <div class="description">增加 SVG 定義。<br/> SVG 規範中聲明，SVG 的 <use> element 不能引用外部文件或其 elements。因此我們在創建實例之前，需要先在本物件中作定義。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addEllipse">_#addEllipse</a></b>(_rx, _ry, _cx, _cy) </div> <div class="description">繪製簡單圓形/橢圓。<br/> 此函數利用 .prototype.addEllipsePath 來畫簡單橢圓。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addEllipsePath">_#addEllipsePath</a></b>(_rx, _ry, _cx, _cy, _color, _strokeWidth, _fill, tramA) </div> <div class="description">繪製橢圓曲線。<br/> 此函數利用 _.eNode 造出橢圓曲線元件之後，再用 .prototype.addNode 將之插入本物件中。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addLine">_#addLine</a></b>(_left, _top, _width, _height, _color, _strokeWidth) </div> <div class="description">繪製直線。<br/> 此函數利用 _.eNode 造出直線元件之後，再用 .prototype.addNode 將之插入本物件中。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addNode">_#addNode</a></b>(_n, _a, _i) </div> <div class="description">增加 SVG element。<br/> 結合 .prototype.addDefs 與 .prototype.addUse，作完定義後隨即使用之。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addPath">_#addPath</a></b>(_d, _color, _strokeWidth, _fill) </div> <div class="description">繪製曲線路徑。<br/> 此函數利用 _.eNode 造出路徑元件之後再用 .prototype.addNode 將之插入本物件中。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addPolyline">_#addPolyline</a></b>(_pA, _color, _strokeWidth, _fill, tramA) </div> <div class="description">繪製多邊形。<br/> 此函數利用 _.eNode 造出多邊形路徑元件之後再用 .prototype.addNode 將之插入本物件中。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addQuadrilateral">_#addQuadrilateral</a></b>(_ds, _h, _d, _us, tramA) </div> <div class="description">畫簡單長方形或平行四邊形、梯形</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addRect">_#addRect</a></b>(_w, _h, _x, _y, _color, _strokeWidth, _fill, tramA) </div> <div class="description">繪製矩形。<br/> 此函數利用 _.eNode 造出矩形路徑元件之後，再用 .prototype.addNode 將之插入本物件中。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addText">_#addText</a></b>(_text, _left, _baseLine, _color, _font) </div> <div class="description">添加文字。<br/> 此函數利用 _.eNode 造出文字元件之後再用 .prototype.addNode 將之插入本物件中。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addTriangle">_#addTriangle</a></b>(_ds, _h, _d, tramA) </div> <div class="description">畫簡單三角形</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#addUse">_#addUse</a></b>(_i, _a) </div> <div class="description">增加 SVG 實例。<br/> 利用本物件中之定義創建實例並增添至本物件中。<br/> 在裝載 b.svg 時，將 a.svg 中的 defs 中的圖元裝載到 b.svg 中（文件上是兩者是保持獨立的，但在內存中將二者合二為一），這樣就可以在b.svg中直接引用這些圖元了。<br/> SVG 規範中聲明，SVG 的 <use> element 不能引用外部文件或其 elements。因此我們在創建實例之前，需要先在本物件中作定義。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#attachGroup">_#attachGroup</a></b>(_n) </div> <div class="description">綁定 SVG elements 至本物件群組。<br/> 這函數將已存在的 SVG elements 綁定至本物件之群組中。若群組不存在，則創建出一個。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#clean">_#clean</a></b>() </div> <div class="description">清除 canvas<br/> 很可能會出問題!</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#createGroup">_#createGroup</a></b>(_a, _i) </div> <div class="description">創建本物件之 SVG 群組。<br/> 利用 SVG 群組我們可以同時操作多個 SVG elements。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#setSize">_#setSize</a></b>(_width, _height) </div> <div class="description">調整 canvas 大小</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#._#show">_#show</a></b>(_v) </div> <div class="description">顯現 this module SVG object</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.changeText">changeText</a></b>(text_node, text) </div> <div class="description">改變 text</div> </td> </tr> <tr> <td class="attributes"><private> <static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.createENS">createENS</a></b>(_ns, _qn, _a, _i) </div> <div class="description">create SVG document fragment (only for .createNode)</div> </td> </tr> <tr> <td class="attributes"><private> <static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.createNode">createNode</a></b>(_nodeN, _a, _i) </div> <div class="description">create SVG document fragment 元件(component)。<br/> SVG 之 document fragment 與 HTML 不同 namespace，因此我們需要使用到 <a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a> 來作為 XML elements 的 namespace。為了未來的兼容性，我們將這個功能獨立出來。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.draw_addition">draw_addition</a></b>(num1, num2, svgO, _color, _font) </div> <div class="description">use <a href="../symbols/CeL.interact.integrate.SVG.html">CeL.interact.integrate.SVG</a> to draw: 利用 module SVG 物件來演示直式加法。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.draw_circle">draw_circle</a></b>(_r, svgO, _color, _fill) </div> <div class="description">use <a href="../symbols/CeL.interact.integrate.SVG.html">CeL.interact.integrate.SVG</a> to draw: 繪製圓形。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.draw_ellipse">draw_ellipse</a></b>(_rx, _ry, svgO, _color, _fill) </div> <div class="description">use <a href="../symbols/CeL.interact.integrate.SVG.html">CeL.interact.integrate.SVG</a> to draw: 繪製橢圓。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.draw_long_division">draw_long_division</a></b>(dividend, divisor, digits_after, svgO, _color, _font) </div> <div class="description">use <a href="../symbols/CeL.interact.integrate.SVG.html">CeL.interact.integrate.SVG</a> to draw: 利用 module SVG 物件來展示<a href="http://en.wikipedia.org/wiki/Long_division" title="long division">直式除法</a>。<br/> !! 尚有許多 bug<br/></div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.draw_multiplication">draw_multiplication</a></b>(num1, num2, svgO, _color, _font) </div> <div class="description">use <a href="../symbols/CeL.interact.integrate.SVG.html">CeL.interact.integrate.SVG</a> to draw: 利用 module SVG 物件來演示直式乘法。<br/> TODO: 小數的乘法</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.draw_quadrilateral">draw_quadrilateral</a></b>(_ds, _h, _d, _us, svgO, _color, _fill) </div> <div class="description">use <a href="../symbols/CeL.interact.integrate.SVG.html">CeL.interact.integrate.SVG</a> to draw: 畫簡單梯形。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.draw_subtraction">draw_subtraction</a></b>(num1, num2, svgO, _color, _font) </div> <div class="description">use <a href="../symbols/CeL.interact.integrate.SVG.html">CeL.interact.integrate.SVG</a> to draw: 呼叫 draw_subtraction 來演示直式減法。因為直式加減法的運算與機制過程非常相似，因此我們以 draw_addition 來一併的處理這兩個相似的運算過程。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.draw_triangle">draw_triangle</a></b>(_ds, _h, _d, svgO, _color, _fill) </div> <div class="description">use <a href="../symbols/CeL.interact.integrate.SVG.html">CeL.interact.integrate.SVG</a> to draw: 畫簡單三角形。</div> </td> </tr> <tr> <td class="attributes"><private> <static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.getNodeById">getNodeById</a></b>(id) </div> <div class="description">從 id 獲得 node</div> </td> </tr> <tr> <td class="attributes"><private> <static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.getRandomID">getRandomID</a></b>(tag) </div> <div class="description">get a random ID to use.</div> </td> </tr> <tr> <td class="attributes"><private> <static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.integrate.SVG.<b><a href="../symbols/CeL.interact.integrate.SVG.html#.setRandomID">setRandomID</a></b>(_n) </div> <div class="description">give a random ID to the specified node.</div> </td> </tr> </tbody> </table>   <div class="details"><a name="constructor"> </a> <div class="sectionTitle"> Class Detail </div> <div class="fixedFont"> <b>CeL.interact.integrate.SVG</b>(_width, _height, _backgroundColor) </div> <div class="description"> module SVG 物件之 constructor。<br/> 設定 SVG document fragment 並將之插入網頁中。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{int}</span> <b>_width</b> </dt> <dd>width of the canvas</dd> <dt> <span class="light fixedFont">{int}</span> <b>_height</b> </dt> <dd>height of the canvas</dd> <dt> <span class="light fixedFont">{color String}</span> <b>_backgroundColor</b> <i>Optional</i> </dt> <dd>background color of the canvas (UNDO)</dd> </dl> <dl class="detailList"> <dt class="heading">Deprecated:</dt> <dt> Use toolkit listed below instead:<br/> <a href="http://code.google.com/p/svgweb/" accessdate="2009/11/15 16:34" title="svgweb - Project Hosting on Google Code">svgweb</a><br/> <a href="https://launchpad.net/scour" accessdate="2009/11/15 16:35" title="Scour - Cleaning SVG Files in Launchpad">Scour</a> </dt> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2006/12/7,10-12</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd><span class="light fixedFont">{<a href="../symbols/CeL.interact.integrate.SVG.html">CeL.interact.integrate.SVG</a>}</span> CeL.interact.integrate.SVG object created</dd> </dl> <dl class="detailList"> <dt class="heading">Requires:</dt> <dd>set_attribute,XML_node,remove_all_child//removeNode</dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd><a href="http://www.w3.org/TR/SVG/" accessdate="2009/11/15 16:31">Scalable Vector Graphics (SVG) 1.1 Specification</a><br/> <a href="http://zvon.org/xxl/svgReference/Output/" accessdate="2009/11/15 16:31">SVG 1.1 reference with examples</a><br/> <a href="http://www.permadi.com/tutorial/jsFunc/index.html" accessdate="2009/11/15 16:31" title="Introduction and Features of JavaScript "Function" Objects">Introduction and Features of JavaScript "Function" Objects</a><br/> <a href="http://volity.org/wiki/index.cgi?SVG_Script_Tricks" accessdate="2009/11/15 16:31">Volity Wiki: SVG Script Tricks</a><br/> <a href="http://pilat.free.fr/english/routines/js_dom.htm" accessdate="2009/11/15 16:31">Javascript SVG et DOM</a></dd> </dl> </div>  <div class="sectionTitle"> Field Detail </div> <a name="._#lastAdd"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#lastAdd</b> </div> <div class="description"> 最後一個增加的 instance </div> <hr /> <a name="._#lastAddDefs"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#lastAddDefs</b> </div> <div class="description"> 最後一個增加的 definition </div> <hr /> <a name="contains"> </a> <div class="fixedFont"> <span class="light">{Array}</span> <b>contains</b> </div> <div class="description"> 包含了插入元件的原始資訊。<br/> Use #addContain to add contains. </div> <hr /> <a name=".defaultStrokeWidth"> </a> <div class="fixedFont"><static> <span class="light">{Number}</span> <span class="light">CeL.interact.integrate.SVG.</span><b>defaultStrokeWidth</b> </div> <div class="description"> default stroke width. 單位: px </div> <hr /> <a name="div"> </a> <div class="fixedFont"> <b>div</b> </div> <div class="description"> 所插入之網頁元素 </div> <hr /> <a name=".idPrefix"> </a> <div class="fixedFont"><static> <span class="light">{string}</span> <span class="light">CeL.interact.integrate.SVG.</span><b>idPrefix</b> </div> <div class="description"> 所有造出 id 之 prefix </div> <hr /> <a name="svg"> </a> <div class="fixedFont"> <b>svg</b> </div> <div class="description"> SVG document fragment </div> <dl class="detailList"> <dt class="heading">See:</dt> <dd><a href="http://www.w3.org/TR/SVG/struct.html#NewDocument" accessdate="2009/11/15 16:53">Defining an SVG document fragment: the 'svg' element</a></dd> </dl>  <div class="sectionTitle"> Method Detail </div> <a name="._#addCircle"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addCircle</b>(_r, _cx, _cy) </div> <div class="description"> 繪製圓形。<br/> 此函數利用 _.type.addEllipsePath 來畫簡單圓形。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_r</b> </dt> <dd></dd> <dt> <b>_cx</b> </dt> <dd></dd> <dt> <b>_cy</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#addContain"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addContain</b>(_o, _type, propertyO) </div> <div class="description"> 增加插入的元件。<br/> 應該用 <a href="http://www.w3.org/TR/SVG/struct.html#SymbolElement">symbol</a> </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_o</b> </dt> <dd>object reference</dd> <dt> <b>_type</b> </dt> <dd>type of this component</dd> <dt> <b>propertyO</b> <i>Optional</i> </dt> <dd>other properties</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Requires:</dt> <dd>split_String_to_Object</dd> </dl> <hr /> <a name="._#addDefs"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addDefs</b>(_n) </div> <div class="description"> 增加 SVG 定義。<br/> SVG 規範中聲明，SVG 的 <use> element 不能引用外部文件或其 elements。因此我們在創建實例之前，需要先在本物件中作定義。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_n</b> </dt> <dd>node</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#addEllipse"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addEllipse</b>(_rx, _ry, _cx, _cy) </div> <div class="description"> 繪製簡單圓形/橢圓。<br/> 此函數利用 .prototype.addEllipsePath 來畫簡單橢圓。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_rx</b> </dt> <dd></dd> <dt> <b>_ry</b> </dt> <dd></dd> <dt> <b>_cx</b> </dt> <dd></dd> <dt> <b>_cy</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#addEllipsePath"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addEllipsePath</b>(_rx, _ry, _cx, _cy, _color, _strokeWidth, _fill, tramA) </div> <div class="description"> 繪製橢圓曲線。<br/> 此函數利用 _.eNode 造出橢圓曲線元件之後，再用 .prototype.addNode 將之插入本物件中。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_rx</b> </dt> <dd></dd> <dt> <b>_ry</b> </dt> <dd></dd> <dt> <b>_cx</b> </dt> <dd></dd> <dt> <b>_cy</b> </dt> <dd></dd> <dt> <b>_color</b> </dt> <dd></dd> <dt> <b>_strokeWidth</b> </dt> <dd></dd> <dt> <b>_fill</b> </dt> <dd></dd> <dt> <b>tramA</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#addLine"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addLine</b>(_left, _top, _width, _height, _color, _strokeWidth) </div> <div class="description"> 繪製直線。<br/> 此函數利用 _.eNode 造出直線元件之後，再用 .prototype.addNode 將之插入本物件中。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_left</b> </dt> <dd></dd> <dt> <b>_top</b> </dt> <dd></dd> <dt> <b>_width</b> </dt> <dd></dd> <dt> <b>_height</b> </dt> <dd></dd> <dt> <b>_color</b> </dt> <dd></dd> <dt> <b>_strokeWidth</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#addNode"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addNode</b>(_n, _a, _i) </div> <div class="description"> 增加 SVG element。<br/> 結合 .prototype.addDefs 與 .prototype.addUse，作完定義後隨即使用之。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_n</b> </dt> <dd>tagName(nodeType)</dd> <dt> <span class="light fixedFont">{hash|string}</span> <b>_a</b> </dt> <dd>attribute/property</dd> <dt> <b>_i</b> </dt> <dd>inner object</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#addPath"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addPath</b>(_d, _color, _strokeWidth, _fill) </div> <div class="description"> 繪製曲線路徑。<br/> 此函數利用 _.eNode 造出路徑元件之後再用 .prototype.addNode 將之插入本物件中。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_d</b> </dt> <dd></dd> <dt> <b>_color</b> </dt> <dd></dd> <dt> <b>_strokeWidth</b> </dt> <dd></dd> <dt> <b>_fill</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#addPolyline"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addPolyline</b>(_pA, _color, _strokeWidth, _fill, tramA) </div> <div class="description"> 繪製多邊形。<br/> 此函數利用 _.eNode 造出多邊形路徑元件之後再用 .prototype.addNode 將之插入本物件中。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{int array}</span> <b>_pA</b> </dt> <dd>[x1,y1,x2,y2,x3,y3,..]</dd> <dt> <b>_color</b> </dt> <dd></dd> <dt> <b>_strokeWidth</b> </dt> <dd></dd> <dt> <b>_fill</b> </dt> <dd></dd> <dt> <b>tramA</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#addQuadrilateral"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addQuadrilateral</b>(_ds, _h, _d, _us, tramA) </div> <div class="description"> 畫簡單長方形或平行四邊形、梯形 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_ds</b> </dt> <dd></dd> <dt> <b>_h</b> </dt> <dd></dd> <dt> <b>_d</b> </dt> <dd></dd> <dt> <b>_us</b> </dt> <dd></dd> <dt> <b>tramA</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd><a href="http://zh.wikipedia.org/wiki/%E5%B9%B3%E8%A1%8C%E5%9B%9B%E8%BE%B9%E5%BD%A2">平行四邊形</a></dd> </dl> <hr /> <a name="._#addRect"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addRect</b>(_w, _h, _x, _y, _color, _strokeWidth, _fill, tramA) </div> <div class="description"> 繪製矩形。<br/> 此函數利用 _.eNode 造出矩形路徑元件之後，再用 .prototype.addNode 將之插入本物件中。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_w</b> </dt> <dd></dd> <dt> <b>_h</b> </dt> <dd></dd> <dt> <b>_x</b> </dt> <dd></dd> <dt> <b>_y</b> </dt> <dd></dd> <dt> <b>_color</b> </dt> <dd></dd> <dt> <b>_strokeWidth</b> </dt> <dd></dd> <dt> <b>_fill</b> </dt> <dd></dd> <dt> <b>tramA</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#addText"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addText</b>(_text, _left, _baseLine, _color, _font) </div> <div class="description"> 添加文字。<br/> 此函數利用 _.eNode 造出文字元件之後再用 .prototype.addNode 將之插入本物件中。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_text</b> </dt> <dd></dd> <dt> <b>_left</b> </dt> <dd></dd> <dt> <b>_baseLine</b> </dt> <dd></dd> <dt> <b>_color</b> </dt> <dd></dd> <dt> <b>_font</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#addTriangle"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addTriangle</b>(_ds, _h, _d, tramA) </div> <div class="description"> 畫簡單三角形 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_ds</b> </dt> <dd></dd> <dt> <b>_h</b> </dt> <dd></dd> <dt> <b>_d</b> </dt> <dd></dd> <dt> <b>tramA</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2006/12/17 12:38</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#addUse"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#addUse</b>(_i, _a) </div> <div class="description"> 增加 SVG 實例。<br/> 利用本物件中之定義創建實例並增添至本物件中。<br/> 在裝載 b.svg 時，將 a.svg 中的 defs 中的圖元裝載到 b.svg 中（文件上是兩者是保持獨立的，但在內存中將二者合二為一），這樣就可以在b.svg中直接引用這些圖元了。<br/> SVG 規範中聲明，SVG 的 <use> element 不能引用外部文件或其 elements。因此我們在創建實例之前，需要先在本物件中作定義。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_i</b> </dt> <dd>id</dd> <dt> <b>_a</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name="._#attachGroup"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#attachGroup</b>(_n) </div> <div class="description"> 綁定 SVG elements 至本物件群組。<br/> 這函數將已存在的 SVG elements 綁定至本物件之群組中。若群組不存在，則創建出一個。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_n</b> </dt> <dd>node</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd>this module SVG object</dd> </dl> <hr /> <a name="._#clean"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#clean</b>() </div> <div class="description"> 清除 canvas<br/> 很可能會出問題! </div> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2009/12/18 21:17:09</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd>this SVG</dd> </dl> <hr /> <a name="._#createGroup"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#createGroup</b>(_a, _i) </div> <div class="description"> 創建本物件之 SVG 群組。<br/> 利用 SVG 群組我們可以同時操作多個 SVG elements。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{hash|string}</span> <b>_a</b> </dt> <dd>attribute/property</dd> <dt> <b>_i</b> </dt> <dd>inner object</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd>this SVG</dd> </dl> <hr /> <a name="._#setSize"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#setSize</b>(_width, _height) </div> <div class="description"> 調整 canvas 大小 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Integer}</span> <b>_width</b> </dt> <dd>width in px</dd> <dt> <span class="light fixedFont">{Integer}</span> <b>_height</b> </dt> <dd>height in px</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd>this module SVG object</dd> </dl> <hr /> <a name="._#show"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.integrate.SVG.</span><b>_#show</b>(_v) </div> <div class="description"> 顯現 this module SVG object </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_v</b> </dt> <dd>visible</dd>