mxGraph自定义线条箭头样式

从mxGraph源码中看出控制线条箭头的对象是mxMarker，这个对象下有一个markers数组，所有的箭头样式都是存在这个数组当中。下面是一个默认样式

mxMarker.markers[mxConstants.ARROW_OPEN] = function(node, type, pe, nx, ny, strokewidth, size, scale, isVml) {
    if (isVml) {
        node.setAttribute('path', 'm' + Math.floor(pe.x - nx - ny / 2) + ' ' + Math.floor(pe.y - ny + nx / 2) + ' l' + Math.floor(pe.x) + ' ' + Math.floor(pe.y) + ' ' + Math.floor(pe.x + ny / 2 - nx) + ' ' + Math.floor(pe.y - ny - nx / 2) + ' e nf');
        node.setAttribute('strokeweight', (strokewidth * scale) + 'px');
    } else {
        node.setAttribute('d', 'M ' + (pe.x - nx - ny / 2) + ' ' + (pe.y - ny + nx / 2) + ' L ' + (pe.x) + ' ' + (pe.y) + ' L ' + (pe.x + ny / 2 - nx) + ' ' + (pe.y - ny - nx / 2));
        node.setAttribute('stroke-width', strokewidth * scale);
        node.setAttribute('fill', 'none');
    }
    return new mxPoint( - nx / 4, -ny / 4);
};

只要将这段代码复制一份，重新分配一个名称，即可。

首先，定义样式名称。

mxConstants.ARROW_OVAL_OPEN='arrowHandOpen'

然后复制重写上面的代码，经验证，在IE、FF、chrome浏览器均没有isVml为true的情况，所以可以不考虑vml的情况。

mxMarker.markers[mxConstants.ARROW_OVAL_OPEN] = function(node, type, pe, nx, ny, strokewidth, size, scale, isVml) {
    var me=pe.x-nx* 2,
        my=pe.y-nx* 2,
        l1x=pe.x,
        l1y=pe.y-ny* 2,
        l2x=pe.x+ny* 2,
        l2y=pe.y- 1,
        r2x=pe.x-ny* 2,
        r2y=pe.y- 1,
        absSize=size * scale;
    nx/=absSize;
    ny/=absSize;
    absSize=(size+Number(strokewidth))*scale/2;
    node.setAttribute('fill-opacity',0);
    
    if(nx!=0){
        if(nx>0){
            //箭头向右
            node.setAttribute('d','\
                M '+(mx+12)+' '+my+' \
                L '+mx+' '+l1y+' \
                L '+(l2x+1)+' '+(l2y+1)+' \
                L '+mx+' '+l1y+' \
                L '+r2x+' '+(r2y+12)+' \
                L '+mx+' '+l1y+' \
                L '+mx+' '+(l1y-10)+' \
                L '+mx+' '+(l1y+10)+' \
                L '+mx+' '+l1y+' \
                a '+absSize+' '+absSize+' 0 1,1'+(nx*strokewidth-1)+' '+(ny*strokewidth-1)+' z\
            ');
        }else{
            //箭头向左
            node.setAttribute('d','\
                M '+(mx-12)+' '+my+' \
                L '+mx+' '+l1y+' \
                L '+(l2x)+' '+(l2y)+' \
                L '+mx+' '+l1y+' \
                L '+r2x+' '+(r2y-12)+' \
                L '+r2x+' '+(r2y+12)+' \
                L '+mx+' '+l1y+' \
                L '+mx+' '+(l1y-10)+' \
                L '+mx+' '+(l1y+10)+' \
                L '+mx+' '+l1y+' \
                a '+absSize+' '+absSize+' 0 1,1'+(nx*strokewidth+1)+' '+(ny*strokewidth+1)+' z\
            ');
        }
    }else{
        if(ny<0){
            //箭头向上
            node.setAttribute('d','\
                M '+mx+' '+my+' \
                L '+mx+' '+l1y+' \
                L '+l2x+' '+l2y+' \
                L '+mx+' '+l1y+' \
                L '+r2x+' '+r2y+' \
                L '+mx+' '+l1y+' \
                L '+(mx-10)+' '+l1y+' \
                L '+(mx+10)+' '+l1y+' \
                L '+mx+' '+l1y+' \
                a '+absSize+' '+absSize+' 0 1,1'+(nx*strokewidth-1)+' '+(ny*strokewidth+1)+' z\
            ');
        }else{
            //箭头向下
            node.setAttribute('d','\
                M '+mx+' '+my+' \
                L '+mx+' '+l1y+' \
                L '+l2x+' '+l2y+' \
                L '+mx+' '+l1y+' \
                L '+r2x+' '+r2y+' \
                L '+mx+' '+l1y+' \
                L '+(mx-10)+' '+l1y+' \
                L '+(mx+10)+' '+l1y+' \
                L '+mx+' '+l1y+' \
                a '+absSize+' '+absSize+' 0 1,1'+(nx*strokewidth+1)+' '+(ny*strokewidth-1)+' z\
            ');
        }
    }
    node.setAttribute('stroke-width',strokewidth*scale);
    return new mxPoint( - nx / 4, -ny / 4);
};

设置默认样式

var style=graph.styleSheet.getDefualtEdgeStyle();
style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';
style[mxConstants.STYLE_STROKEWIDTH] = 1;
style[mxConstants.EDGE_SELECTION_STROKEWIDTH] = 5;
style[mxConstants.LABEL_HANDLE_SIZE] = 5;
style[mxConstants.ARROW_SIZE] = 11;
style[mxConstants.ARROW_WIDTH] = 11;
style[mxConstants.STYLE_STARTARROW]=mxConstants.ARROW_OVAL;
style[mxConstants.STYLE_ENDARROW]=mxConstants.ARROW_OVAL_OPEN;

最后呈现效果是起点是空心圆圈，终点是空心圆圈加三条腿。