前面我們通過修改配置文件增加已經存在的圖元贤姆，這里我們學習如何增加自定義圖元沐飘。我們希望增加雙邊線的矩形冯遂。首先，我們寫一段js代碼休吠，實現并注冊這個自定義的圖元：
function DoubleRectangleShape() { }
DoubleRectangleShape.prototype = new mxActor();
DoubleRectangleShape.prototype.constructor = DoubleRectangleShape;
DoubleRectangleShape.prototype.redrawPath = function (path, x, y, w, h) {
//alert(x);
var x1 = 0;
var y1 = 0;
path.moveTo(x1, y1);
path.lineTo(x1+w, y1);
path.lineTo(x1+w, y1+h);
path.lineTo(x1, y1+h);
path.lineTo(x1, y1);
path.moveTo(x1+5, y1+5);
path.lineTo(x1+w - 5, y1+5);
path.lineTo(x1+w - 5, y1+h - 5);
path.lineTo(x1+5, y1+h - 5);
path.lineTo(x1+5, y1+5);
// ...
path.close();
}
mxCellRenderer.registerShape('doublerectangleshape', DoubleRectangleShape);
然后在html文件中加載這個js文件扳埂，注意這個文件加載在mxClient.js后面，在app.js前面：
<script type="text/javascript" src="../../src/js/mxClient.js"></script>
<script type="text/javascript" src="js/DoubleRectangleShape.js"></script>
<script type="text/javascript" src="js/app.js"></script>
接下來的步驟與增加已有圖元一樣瘤礁，首先阳懂，修改wftoolbar-commands.xml，增加如下代碼：
<add as="MyTask" template="mytask" icon="images/rectangle.gif"/>
第二步，修改wfeditor-commons.xml岩调，增加template巷燥，這部分代碼如下：
<add as="mytask">
<MyTask label="任務" description="" fields="" href="" >
<mxCell vertex="1" style="doublerectangleshape">
<mxGeometry as="geometry" width="72" height="32"/>
</mxCell>
</MyTask>
</add>
第三步，修改wfgraph-commons.xml号枕，在mxStylesheet 下增加style缰揪，這部分代碼如下：
<add as="doublerectangleshape">
<add as="shape" value="doublerectangleshape"/>，
</add>
清除瀏覽器緩存葱淳，再次訪問示例頁面钝腺，圖標增加了，可以向圖形中增加新的圖元：
圖片.png
