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

KineticJS - Get the width/height of a Path Shape?

本文关键字：高度 获取 路径 KineticJS-      更新时间：2023-09-26

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

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

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

你知道我该怎么解决这个问题吗？

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

我只是用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;}
相关文章：