javascript - KineticJS - 获取路径形状的宽度/高度？

Question

目前这对我来说是个大问题......

我正在通过路径形状渲染世界地图......问题是路径形状不提供宽度或高度，因此缓存或其他简单操作变得非常难以做到。

例如，我给的 x/y 高度/宽度是path.toImage多少？

---

知道如何解决这个问题吗？

Answer 1

如果世界地图路径由一系列线组成（通常是这样），您可以通过在路径数据中查找 minX/minY 和 maxX/maxY 坐标来获取路径的边界框。

Answer 2

我只需要用 Kinetic JS 解决同样的问题。

下面的代码查看一些包含 (x,y) 坐标的随机画布绘制代码，将坐标提取到一个数组中，查看 X 和 Y 的最小值和最大值，并显示形状的宽度和高度。

从这里你应该有一个边界框。

var regex = /[+-]?\d+\.\d+/g;

var str = 'ctx.bezierCurveTo(30.1, 220.7, 82.8, 233.0, 147.8, 233.0); ctx.bezierCurveTo(213.1, 233.0, 266.6, 220.8, 266.6, 205.7); ctx.bezierCurveTo(266.6, 205.3, 267.0, 205.1, 267.0, 204.7);';

var floats = str.match(regex).map(function(v) { return parseFloat(v); });

console.log(floats);

      var minX = 99999;
      var maxX = -99999;
      var minY = 99999;
      var maxY = -99999;


      for ( var i = 0; i < floats.length; i++ ) {

          if ( isOdd(i) ) { // the array of numbers is in the form (x,y,x,y,x,y,x...)

              // Check Y values
              if ( floats[i] < minY ) { minY = floats[i]; }
              if ( floats[i] > maxY ) { maxY = floats[i]; }

          } else {

              // Check X values
              if ( floats[i] < minX ) { minX = floats[i]; }
              if ( floats[i] > maxX ) { maxX = floats[i]; }

          }

      }



       console.log('minX = ' + minX + ', minY = ' + minY + ', maxX = ' + maxX + ', maxY = ' + maxY);


function isOdd(num) { return num % 2;}