0

私は 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 ] );
};

ありがとう！

4

1 に答える 1

1

私はこれを考えすぎていたようです。オフセットを設定するときに宛先ポリゴンの幅を使用するのではなく、kineticjs がそのオフセットのスケーリングを処理します。その結果、オフセットを次のように設定するだけです。 

hexagon.setFillPatternOffset(-imageObj.width/2, -imageObj.height/2);
于 2013-04-18T11:30:30.697 に答える