Flash と ActionScript で書かれたアプリケーションがあります。flash を canvas と KineticJS ライブラリに置き換えたいです。小さな問題で立ち往生しました。ActionScript には、メソッド「getRect」( http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#getRect%28%29 ) および「getBounds」( http: //help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#getBounds%28%29 ) オブジェクトの minX、minY、幅、および高さを返します。私の場合、これはレイヤーです。この 2 つの関数を使用して、レイヤーの一番左と一番上の座標を取得します。次に、ステージの新しい位置を設定すると、すべてのアイテムが一番左上に配置されます。
だから、私はjavascriptで似たようなものを作りたいです。レイヤーの一番左、一番上に見える点を取得します。minX と minY を取得するには、すべてのレイヤーとその上の形状を確認する必要があります。
ここで入手できるサンプルコードを作成しました：http://jsfiddle.net/JercSi/v63hC/1/
形状が「ポリゴン」の場合、すべての座標 x、y は 0 で、幅と高さも 0 です。x=100、y=100、幅=100、高さ=100 と予想していました。
形状が「テキスト」の場合、形状のx、yと正しい幅と高さを取得します-形状が回転しない限り、これは問題ありません。「テキスト」オブジェクトの場合、取得したい: x=-8 および y=126。x=150、y=150 ではありません。
これは、minX と minY を返すスクリプトです。minX、minY は返されませんが、コンソールに座標が出力されます (ブラウザには FireBug または同様のプラグインを使用してください)。
<script type="text/javascript">
var _le = stage.children.length; // get number of children (stage)
var i, j, _le2;
for (i = 0; i < _le; ++i) {
_le2 = stage.children[i].children.length; // get number of children on each layer
for (j = 0; j < _le2; ++j) {
// check all shapes on the layer
console.log(stage.children[i].children[j].getAbsolutePosition());
console.log(stage.children[i].children[j].getX()+", "+stage.children[i].children[j].getY());
console.log(stage.children[i].children[j].getWidth()+", "+stage.children[i].children[j].getHeight());
}
}
</script>
私の問題を要約しましょう。minX と minY を取得してから、ステージの新しい位置 (現在の位置) を設定します。
ステージ/レイヤーの新しい位置:
たぶん、このようなものが既に存在します-minXとminYを計算せずに-しかし、私は見つけられませんでした。