Проблема выравнивания между BPMN.IO и Heatmap.js

Я пытаюсь наложить поток bpmn, используя bpmn.io, и карту тепла, используя heatmap.js. Если холст установлен на первый и единственный элемент в 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 каждого элемента, с установкой коэффициента, но, попробовав каждую комбинацию, я мог подумать, что мне не удалось.

Спасибо

2 ответа

Я не уверен, правильно ли я понял, к чему вы стремитесь, но наложение тепловой карты на элементы может быть легко достигнуто с использованием размеров текущего элемента, 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/

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

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

попробуйте это https://jsfiddle.net/ptbao/vjo4rxyp/3/

Другие вопросы по тегам