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

Question

我正在尝试将使用bpmn.io的bpmn流与使用heatmap.js的热图进行叠加。如果画布被设置为dom中的第一个也是唯一一个元素，那么它实际上是有效的，但是一旦您添加了其他元素，比如在我的示例中添加了header，那么两者之间的坐标系就会消失。

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

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的计算，通过一个因子来设置它，但在尝试了所有我能想到的组合之后，我还是做不到。

谢谢

Answer 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/

Answer 2

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

试试this