javascript - 如何检查平移和/或缩放后我的 Cytoscape.js 图表是否在 View 之外(甚至部分)?

标签 javascript viewport cytoscape.js

我想检查我的图表是否在 View 之外,也许是在平移和/或缩放之后,以便我可以激活 Cytoscape 导航器。

示例:

这些是看不见的 enter image description here

enter image description here

但这不是: enter image description here

谢谢。

最佳答案

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;
}

关于javascript - 如何检查平移和/或缩放后我的 Cytoscape.js 图表是否在 View 之外(甚至部分)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55057075/

相关文章:

javascript - 当 float 元素在视口(viewport)之外时,如何获取它的左偏移量?

css - 动态呈现图像多行多列

jquery - 隐藏的 Cytoscape 图表稍后无法显示

javascript - Cytoscape.js - 在复合节点下方绘制边缘

d3.js - 使用哪个库来绘制简单的图形节点, react 中的链接?

javascript - 我的井字游戏 (jquery) 无法正常运行。丢失的零件无法正常工作

javascript - jQuery 选择器问题?

html - 更新 3 中的 Windows Phone 8 Viewport 包括系统托盘

javascript - 单击 R Leaflet 中的 'plugin' 脉冲标记时添加弹出窗口

javascript - RequireJS 插件 : load timeouts experienced when using plugin