KineticJS - 獲取路徑形狀的寬度/高度？

這是一個大問題，我在此刻...KineticJS - 獲取路徑形狀的寬度/高度？

我繪製的世界地圖通過路徑形狀......問題是路徑形狀不提供寬度或高度，所以緩存或其他簡單操作變得非常困難。

例如什麼x/y高度/寬度給我path.toImage？

任何想法如何解決這個問題？

來源

2013-07-14 RadiantHex

如果世界地圖路徑由一系列線組成（通常情況下），您可以通過在路徑數據中查找minX/minY和maxX/maxY座標來獲取路徑的邊界框。

來源

2013-07-14 18:00:22 markE

不幸的是，在這種情況下創建的圖像非常大，即整個屏幕。動力學重繪圖層需要4秒鐘的時間。通過提供x/y /寬度/高度，圖像更小，重繪需要2ms！ :) – RadiantHex

爲了記錄我有500個SVG路徑需要重繪，顯然彼此重疊的500個大圖像似乎相當成問題:) – RadiantHex

好的，備用計劃...請參閱我編輯的答案！順便說一句，如果你的路徑是從SVG進來的，請查看ErikDahlström關於獲取svg路徑邊界框的這篇文章：http://my.opera.com/MacDev_ed/blog/2009/01/21/getting- boundingbox-of-svg-elements – markE

我只是用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;}

來源

2014-01-11 05:12:31 JSdc

KineticJS - 獲取路徑形狀的寬度/高度？

回答

相關問題