Question

在NR仪表板中，我试图确定小部件组的宽度和高度：

var groupWidth = document.getElementById('Home_Test2_cards').offsetWidth;
var groupHeight = document.getElementById('Home_Test2_cards').offsetHeight;

它适用于groupWidth，但不适用于groupHeight。我发现一些引用表明，将div设置为不可见时div不会返回其高度，但是这里不是这种情况。有什么方法可以确定高度吗？

使用jQuery：

调用var groupHeight = $('#Home_Test2_cards').height();可以，但是仍然只能返回0。

编辑：

Browser Screenshot

仪表板模板内容：

<script>
(function(scope) {
  scope.$watch('msg.payload', function(data) {
    if (data !== undefined) {
      imageObj.src=data;
    }
  });
}(scope));

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var groupWidth = document.getElementById('Home_Test2_cards').offsetWidth;
//var groupHeight = document.getElementById('Home_Test2_cards').offsetHeigth;
var groupHeight = $('#Home_Test2_cards').height();

console.log('Width:' + groupWidth);
console.log('Height:' + groupHeight);

var imageObj = new Image();
imageObj.onload= function() {
  var wRatio = groupWidth / imageObj.width;
  var hRatio = groupHeight / imageObj.height;
  var ratio = Math.min(wRatio, hRatio);
  context.drawImage(imageObj, 0, 0, canvas.width, canvas.height, 0, 0, imageObj.width*ratio, imageObj.height*ratio);
};
</script> 

<canvas id="myCanvas"></canvas>

根据上面的屏幕截图，我希望高度为351。

Answer 1

节点红色仪表板包含JQuery库，因此您应该可以使用：

var groupWidth = $('#Home_Test2_cards').width;
var groupHeight = $('#Home_Test2_cards').height;

Node-Red仪表板：确定组的宽度和高度

1 个答案: