cytoscape js错误点击移动网络上的坐标

时间:2017-02-06 07:30:41

标签: javascript html html5 mobile-safari cytoscape.js

我只是使用cytoscape.js在我的网站上绘制树形图。在桌面Web浏览器中,没有任何问题。我还在Android移动网络上测试网络,但问题出现了。当我选中屏幕时,光标不会出现在我点击的位置,而是出现在点击位置的左上角。我也在iphone网页浏览器中测试它,发生了同样的问题。

screen capture

我的细胞景观代码:

var cy = cytoscape({
    container: document.getElementById('cy'),

    layout: {
        name: 'dagre',
        padding: 10,
        roots:'#j'
    },

    zoom:1,
    wheelSensitivity: 0.1,
    spacingFactor: 0.1,
    boxSelectionEnabled: false,

    elements: {
        nodes: [
          { data: { id: 'j', name: 'Test1', weight: 65, faveColor: '#6FB1FC', faveShape: 'triangle' } },
          { data: { id: 'e', name: 'Test2', weight: 45, faveColor: '#EDA1ED', faveShape: 'ellipse' } },
          { data: { id: 'k', name: 'Test3', weight: 75, faveColor: '#86B342', faveShape: 'octagon' } },
        ],
        edges: [
          { data: { source: 'j', target: 'e', faveColor: '#6FB1FC'} },
          { data: { source: 'j', target: 'k', faveColor: '#EDA1ED' } },
        ]
    },

    style:[ 
        {
            selector:'node',
            style:{
                'shape': 'data(faveShape)',
                'width': 'mapData(weight, 40, 80, 10, 40)',
                'height': 'mapData(weight, 40, 80, 10, 30)',
                'content': 'data(name)',
                'text-valign': 'center',
                'text-outline-width': 1,
                'text-outline-color': 'data(faveColor)',
                'background-color': 'data(faveColor)',
                'color': '#fff',
                'font-size': '7px'
            }
        },
        {
            selector:':selected',
            style:{
                'border-width': 3,
                'border-color': '#f47742'
            }
        },
        {
            selector:'edge',
            style:{
                'curve-style': 'bezier',
                'opacity': 0.666,
                'width': 3,
                'target-arrow-shape': 'triangle',
                'line-color': 'data(faveColor)',
                'source-arrow-color': 'data(faveColor)',
                'target-arrow-color': 'data(faveColor)',
            }
        },
        {
            selector:'edge.questionable',
            style:{
                'line-style': 'dotted',
                'target-arrow-shape': 'diamond'
            }
        },
        {
            selector:'.faded',
            style:{
                'opacity': 0.25,
                'text-opacity': 0
            }
        }]
});

cy.on('click', 'node', function(evt){
      alert("test");
});

cy.minZoom(1);

谢谢

0 个答案:

没有答案