Question

我是js和cytoscape的新手。我想用保存按钮在服务器中显示cytoscape图，将其另存为png。我检查了cytoscape文档，但不了解如何在cytoscape图上放置图像标签。请帮我。我检查了stackoverflow和github中的早期帖子。

我的js脚本在这里：

$(function(){ //
var cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector('node')
  .css({
            'label': 'data(label)',
            'width': '60px',
            'height': '60px',
            'color': 'blue',
            'background-color': 'blue',
  })
   .selector('edge')
  .css({
            'text-background-color': 'blue',
            'text-background-opacity': 0.4,
            'width': '6px',
            'line-color': '#3C1515'})
 ,elements:{
 nodes:[
 { data: { id:"node1",label:" node1 " } },
 { data: { id:"node2",label:" node2 " } },
 { data: { id:"node3",label:" node3 " } }
  ],
  edges:[
 {"data": {"id": "12","source": "node1","target": "node2"}},
 {"data": {"id": "13","source": "node1","target": "node3"}}
 ]
 },
  layout: { name: "circle",directed: true,padding: 10 }

 });  // var cy cytoscope ends

 var png64 = cy.png();
 // put the png data in an img tag
 $('#png-eg').attr('src', png64);

  });

html代码是：

<html>
<style>
#cy {width: 80%;height: 80%;position: absolute;top: 20px;left: 20px;}
</style>
 <script src="jquery.js"></script>
 <script src="cytoscape.js"></script>
 <script src="javascript-code.js"></script>
   </head>
  <body>
 <div id="cy"></div>
  </body>
  </html>

Answer 1

您的代码根本不包含必需的img标记，因此只需将其添加到html或使用js / jquery进行添加即可：

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [
    {
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center'
      }
    },
    {
      selector: '$node > node',
      css: {
        'padding-top': '10px',
        'padding-left': '10px',
        'padding-bottom': '10px',
        'padding-right': '10px',
        'text-valign': 'top',
        'text-halign': 'center',
        'background-color': '#bbb'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    },
    {
      selector: ':selected',
      css: {
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }
    }
  ],

  elements: {
    nodes: [
      { data: { id: 'a', parent: 'b' }, position: { x: 215, y: 85 } },
      { data: { id: 'b' } },
      { data: { id: 'c', parent: 'b' }, position: { x: 300, y: 85 } },
      { data: { id: 'd' }, position: { x: 215, y: 175 } },
      { data: { id: 'e' } },
      { data: { id: 'f', parent: 'e' }, position: { x: 300, y: 175 } }
    ],
    edges: [
      { data: { id: 'ad', source: 'a', target: 'd' } },
      { data: { id: 'eb', source: 'e', target: 'b' } }

    ]
  },

  layout: {
    name: 'preset',
    padding: 5
  }
});
cy.ready(function () {
  //if you want to create the img tag afterwards:
  //$('#right').prepend("<img id='png-eg'>");
  
  var png64 = cy.png();
  // put the png data in an img tag
  $('#png-eg').attr('src', png64);
});
$("#clickMe").click(function () {
    var png64 = cy.png();
    // put the png data in an img tag
    $('#png-eg').attr('src', png64);
});

body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 75%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}
#png-eg {
    border: 1px solid #ddd;
    min-width: 3em;
    min-height: 3em;
    width: 25%;
    float: right;
}

<!DOCTYPE html>
<!-- This code is for demonstration purposes only.  You should not hotlink to Github, Rawgit, or files from the Cytoscape.js documentation in your production apps. -->
<html>
<head>
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Compound nodes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
</head>
<body>
<div id="wrapper">
<div id="cy"></div>
<div id="right"><button id="clickMe" style="float: right;">Click me</button><img id="png-eg"></div>
</div>

</body>
</html>

将cytoscape图导出为png图像：如何将png标签放在cytoscape图上

1 个答案: