Question

我正在尝试使用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的计算，而不是设置一个因子，但是尝试了每种组合之后，我都觉得我没办法。

谢谢

Answer 1

我不确定我是否误解了您的目标，但是通过使用当前元素element.x，element.y，{{1 }}，element.width。

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

element.height

工作示例：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

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

2 个答案: