KineticJS - 패스 셰이프의 너비/높이 가져 오기?

Question

이 순간에 나를 위해 큰 문제입니다 ...

경로 모양을 통해 나는 세계지도를 렌더링하고 있습니다 ... 문제는 , 경로 모양의 폭 또는 높이가 제공하지 않습니다 그래서 캐싱 또는 단순 기타 작업이 정말 어렵게됩니다.

x/y 높이/너비는 path.toImage까지 무엇입니까?

---

어떻게하면이 문제를 해결할 수 있을까요?

Answer 1

세계지도 경로가 일련의 줄로 구성된 경우 (흔히 그렇듯이) 경로 데이터에서 minX/minY 및 maxX/maxY 좌표를 찾아 패스의 경계 상자를 가져올 수 있습니다.

Answer 2

키네틱 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;}