BPMN.IO 和 Heatmap.js 之间的对齐问题答案

【问题标题】：Alignment issue between BPMN.IO and Heatmap.jsBPMN.IO 和 Heatmap.js 之间的对齐问题
【发布时间】：2018-11-10 21:07:09
【问题描述】：

我正在尝试使用 bpmn.io 和使用 heatmap.js 的热图覆盖 bpmn 流。如果画布设置为 dom 中的第一个也是唯一一个元素，它实际上可以工作，但是一旦您在我的示例中添加任何其他内容，例如标题，两者之间的坐标系就会消失。

我准备了一个小提琴，可以准确地表达我的意思。

https://jsfiddle.net/rafaturtle/qt8Ly4ez/16/

  const rect = canvas.getGraphics(element).getBoundingClientRect();
  const x = (rect.x + rect.width / 2);
  const y = (rect.y + rect.height / 2);

  data.push({
    x: x.toFixed(0),
    y: y.toFixed(0),
    value: stats[element.id]
  });

我相信它是在计算每个元素的 x,y 时，将其设置为一个因子，但在尝试了所有我能想到的组合之后，我没有做到。

谢谢

【问题讨论】：

我的回答对您解决问题有帮助吗？

标签： heatmap bpmn.io

【解决方案1】：

我不确定我是否误解了您的目标，但是通过使用当前元素的尺寸element.x、element.y、element.width、element.height 可以轻松地在元素上放置热图.

以下代码将热图放置在元素的确切位置：

var registry = bpmnJS.get('elementRegistry');
for (var i in registry.getAll()) {
  var element = registry.getAll()[i];
  if (stats[element.id] != null) {
    const centerx = element.x + (element.width / 2 )
    const centery = element.y + (element.height / 2 )
    data.push({
      x: centerx,
      y: centery,
      value: stats[element.id]
    });
  }
}

工作示例：https://jsfiddle.net/cr8Lg53a/

【讨论】：

【解决方案2】：

const x = (rect.x + rect.width / 2) - canvas.getContainer().getBoundingClientRect().x;
    
const y = (rect.y + rect.height / 2) - canvas.getContainer().getBoundingClientRect().y;

试试this

【讨论】：