mxEditor使用（八）—— 增加自定义图元

前面我们通过修改配置文件增加已经存在的图元，这里我们学习如何增加自定义图元。我们希望增加双边线的矩形。首先，我们写一段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

mxEditor使用（八）—— 增加自定义图元

推荐阅读更多精彩内容