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

【问题标题】：KineticJS - Get the width/height of a Path Shape?KineticJS - 获取路径形状的宽度/高度？
【发布时间】：2013-07-12 12:10:24
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript canvas svg kineticjs

【解决方案1】：

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

【讨论】：

不幸的是，在这种情况下创建的图像非常大，即整个屏幕。动力学重绘图层需要 4 秒。通过提供 x/y/width/height，图像更小，重绘需要 2ms！ :)
作为记录，我有 500 个 SVG 路径需要重绘，显然 500 个大图像相互叠加似乎很成问题 :)
好的，备用计划...查看我编辑的答案！顺便说一句，如果您的路径来自 SVG，请查看 Erik Dahlström 的这篇关于获取 svg 路径边界框的帖子：my.opera.com/MacDev_ed/blog/2009/01/21/…
看起来没有其他选择，只能手动执行此操作。谢谢@markE

【解决方案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;}

【讨论】：