heatmap - BPMN.IO 和 Heatmap.js 之间的对齐问题
问题描述
我正在尝试使用 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 时,将它设置为一个因子,但在尝试了我能想到的每一种组合之后,我没有做到。
谢谢
解决方案
我不确定我是否误解了您的目标,但是通过使用当前元素的尺寸 , 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]
});
}
}
推荐阅读
- r - 如何在 ggplot2 中定义单个图例元素?
- oop - 如何使用 Goops 在 Guile Scheme 中导出类?
- powershell - ADFS PowerShell:在 IssuanceTransformRules 中使用 RuleTemplate 编写 Web API (Add-AdfsWebApiApplication)
- mongodb - 在 findOneAndUpdate() 之前使用 Mongoose `pre` 钩子获取文档
- android - ConstraintLayout 问题:部分按钮不可见
- linux-kernel - 在 TCP 堆栈中的哪个点将各种信息添加到 skbuff?
- python - ImportError:没有名为 pymc3 的模块
- postgresql - 我应该在 Postgres 中使用 GROUPING SETS、CUBE 还是 ROLLUP
- google-cloud-platform - 获取 BigQuery 表创建者和 Google 存储桶创建者详细信息
- haskell - 我如何在 dhall 中表示一个元组?