0

回転したラベルが画面からドラッグされないようにしようとしていますが、回転した状態のオブジェクトの MinX、MaxX、MinY、および MaxY を取得する方法がわかりません。getHeight と getWidth は、回転前の値のみを返します。

問題を示す例を次に示します。

 var stage = new Kinetic.Stage({
     container: 'container',
     width: window.innerWidth,
     height: window.innerHeight
 });

 var layer = new Kinetic.Layer();

 var labelLeft = new Kinetic.Label({
     x: 95,
     y: 180,
     opacity: 1.0,
     listening: true,
     draggable: true,
     rotationDeg: -45,
     text: {
         text: 'Pointing Arrow',
         fontFamily: 'Calibri',
         fontSize: 20,
         padding: 5,
         fill: 'white'
     },
     rect: {
         fill: 'blue',
         pointerDirection: 'left',
         pointerWidth: 20,
         pointerHeight: 38,
         stroke: 'black',
         strokeWidth: 2
     },
     dragBoundFunc: function (pos) {
         var newY = pos.y < 50 ? 50 : pos.y;
         return {
             x: pos.x,
             y: newY
         };
     }
 });

 layer.add(labelLeft);

 // add the layer to the stage
 stage.add(layer);

http://jsfiddle.net/fSNnA/4/

この例では、dragBoundFunc を使用して、ラベルが y=50 より上にドラッグされるのを防ぎます。ただし、ラベルが回転しているため、実際の最高点 (MinY) が変更されているため、ラベルを上にドラッグして部分的に非表示にすることができます。

私が本当に必要としているのは、絶対的な現在の MinX、MaxX、MinY、および MaxY を返す関数です。回転角度とテキストの長さが常に同じであるとは限りません。

誰でも助けることができますか？

4

1 に答える 1

3

回転した四角形 (ラベル) のバウンディング ボックスのサイズを計算する方法を次に示します。

var w =    label.getWidth();
var h =    label.getHeight();
var rads = label.getRotation();
var c =    Math.abs(Math.cos(rads));
var s =    Math.abs(Math.sin(rads));
var newWidth =  h * s + w * c;
var newHeight = h * c + w * s;

次に、常に中心を中心に回転すると仮定すると、左/上の境界は次のようになります。

var centerX = label.getX()+label.getWidth()/2;
var centerY = label.getY()+label.getHeight()/2;

var MinX = centerX - newWidth/2;
var MinY = centerY - newHeight/2;

[ 免責事項: これは私の思いつきです。適宜確認してください。]

于 2013-05-15T19:36:53.950 に答える