Question

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

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

e.g。我给path.toImage的x / y高度/宽度是什么？

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

Answer 1

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

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;}

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

2 个答案: