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);