Проблема выравнивания между 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/