kineticjs 정다각형 setFillPatternImage 정렬 문제

Question

kineticjs 정다각형 (이 경우 육각형)을 사용하고 있으며 setFillPatternImage를 사용하여 이미지로 채 웁니다. 이것은 작동 중입니다. 동적 인 구현체를 만들므로 폴리곤의 현재 크기에 따라 소스 이미지의 크기를 조절해야합니다. 여기에는 정다각형의 치수가 중심을 기준으로하기 때문에 setFillPatternOffset 및 setFillPatternScale을 계산해야합니다. 채우기 이미지에 대한 참조 점이나 배율 인수가 반경을 너비와 높이 비율의 프록시로 사용해야하는지에 대한 명확한 문서가 없습니다. 다음 코드는 다각형에 잘못 배치 된 이미지를 만듭니다. 누구든지 fillPatternImage에 대한 정렬 규칙을 알고 있습니까?

imageObj.onload = function() { 
    var whex = hexagon.getRadius() * 2; 
    var xratio = whex/imageObj.width; 
    var yratio = whex/imageObj.height; 

    hexagon.setFillPatternImage(imageObj); 
    hexagon.setFillPatternOffset(-whex/2,-whex/2); 
    hexagon.setFillPatternScale([ xratio, yratio ]); 
}; 

고마워요!

Answer 1

나는 이것을 과장 생각한 것처럼 보입니다. 오프셋을 설정할 때 대상 다각형의 너비를 사용하는 대신 kineticjs가 해당 오프셋의 크기 조정을 처리합니다. 따라서 오프셋을 다음과 같이 설정하면됩니다.

hexagon.setFillPatternOffset(-imageObj.width/2, -imageObj.height/2);