0

我正在尝试使用 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 时，将它设置为一个因子，但在尝试了我能想到的每一种组合之后，我没有做到。

谢谢

4

2 回答 2

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/

于 2018-11-12T11:25:37.443 回答
0 
const x = (rect.x + rect.width / 2) - canvas.getContainer().getBoundingClientRect().x;
    
const y = (rect.y + rect.height / 2) - canvas.getContainer().getBoundingClientRect().y;

试试这个

于 2021-07-09T08:34:39.147 回答