轻量高效的拓扑图组件
zh

Qunee Developer Guide

常见问题

升级到v1.4后,文字对齐出现问题

v1.4以后的版本支持文本作为节点主体,此时,文本的挂载点位置直接通过Node#anchorPosition属性进行设置,而无需通过setStyle

text.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_BOTTOM);

改成

text.anchorPosition = Q.Position.LEFT_BOTTOM;

为什么Firefox下SVG图标无法加载?

各浏览器下对于SVG图片的加载存在差异,SVG文件中,必须指定确定的宽高值(比如:<svg width=“100” height=“100” … >),且不能为百分比,否则Qunee将无法获得图片的原始宽高比例,当然这通常不会有问题,因为SVG作图工具(比如AI)都会设置相应的宽高,但如果是手写的SVG文件就需要注意这个问题了

为什么IE下SVG图标无法染色?

在IE浏览器中,可以在Canvas中绘制SVG图片,但是无法获取SVG图片的像素信息,从而导致无法对图片染色,也无法寻找节点边缘,所以Qunee推荐将SVG文件转换成Canvas代码后使用

为什么无法设置当前子网?

Qunee中任何一种图元都可以作为子网,前提是改图元的enableSubNetwork属性应该设置为true,否则无法设置,如下示例

var subnetwork = graph.createNode('SubNetwork');
subnetwork.enableSubNetwork = true;
graph.currentSubNetwork = subnetwork;

如何判断图元是否为Node类型?

Javascript支持instanceof关键词,可以通过这个关键词做类型判断

element instanceof Q.Node

同样的判断图元为连线类型

element instanceof Q.Edge

如何判断节点是否为子网类型

Qunee中的所有图元类型都可以设置为子网,只需要设置enableSubNetwork属性为true,判断节点是否是子网类型,同样可以通过这个属性来判断

if(element.enableSubNetwork){
    Q.log('is SubNetwork');
}

IE11下,为什么无法使用键盘快捷键全选图元?

IE11下,<DIV>无法监听keydown事件,只能监听到keypress事件,而keypress事件只在键盘输入字母或者数字时派发,这意味着无法在<DIV>上监听快捷键,Qunee默认的CTRL+A全选,按DELETE键删除图元的功能在IE11中无法实现,其他浏览器没有这样的问题

如果你希望在IE11中实现这样的功能,可以全局监听键盘事件,document.addEventListener(‘keydown’, function(evt){}, false)

需要注意的是,即使是全局监听键盘事件,还是存在某些组合键无法监听到的问题,比如全选监听CTRL+A无法监听,但是CTRL+C可以监听到

全局监听键盘事件

    document.addEventListener("keydown", function(evt){
        var code = evt.keyCode;
        if(code == 27){
            graph.unSelectAll();
            Q.eventPreventDefault(evt);
            return;
        }
        if(code == 8 || code == 46 || code == 127){
            graph.removeSelectionByInteraction(evt);
            Q.eventPreventDefault(evt);
            return;
        }
//        CTRL + C
        if (evt.ctrlKey && code == 67) {
            Q.eventPreventDefault(evt);
            return;
        }
//        下面的代码试图监听CTRL + A,但是IE11下无法监听到此事件
//        if (evt.ctrlKey && code == 65) {
//            graph.selectAll();
//            Q.eventPreventDefault(evt);
//            return;
//        }
    }, false)