首页 > 解决方案 > 如何在平移和/或缩放后检查我的 Cytoscape.js 图形是否不在视野范围内(甚至是部分)?

问题描述

我想检查我的图表是否不在视野范围内,可能是在平移和/或缩放之后,以便我可以激活 Cytoscape 导航器。

例子:

这些不在视野范围内 在此处输入图像描述

在此处输入图像描述

但这不是: 在此处输入图像描述

谢谢。

标签: javascriptviewportcytoscape.js

解决方案


function isGraphOutOfView() {
  const width = cy.width();
  const height = cy.height();
  const boundingBox = cy.elements().boundingbox();
  const pan = cy.pan();
  const zoom = cy.zoom();

  return boundingBox.x1 * zoom + pan.x < 0
    || boundingBox.y1 * zoom + pan.y < 0
    || boundingBox.x2 * zoom + pan.x > width
    || boundingBox.y2 * zoom + pan.y > height;
}

编辑:与renderedBoundingBox

function isGraphOutOfView() {
  const width = cy.width();
  const height = cy.height();
  const rbb = cy.elements().renderedBoundingbox();

  return rbb.x1 < 0 || rbb.y1 < 0 || rbb.x2  > width || rbb.y2  > height;
}

推荐阅读