0

KineticJs を使用して、dragBoundFunc で既に Rectangle を作成しています。

    var myrect=new Kinetic.Rect({
        x:0,
        y:0,
         width: 10,
         height: 80,
         fill:"grey",
         opacity:1,
         draggable:true,
         dragBoundFunc: function(pos) {
         var newx = pos.x < 0 ? 0 : pos.x && pos.x > 150 ? 150 : pos.x
         var newy = pos.y < 0 ? 0 : pos.y && pos.y > 150 ? 150 : pos.y
         return{
         x:newx,
         y:newy
         }

         }
    })

説明させてください、長方形に長方形を作成したいと思います。この長方形は長方形の中にあるため、dragBoundFunc があります。問題は、「myrect.setRotationDeg(90)」のように回転を設定すると、この長方形の位置も回転するため、dragBound がうまくいかなかったことです。この問題を解決するにはどうすればよいですか?

4

1 に答える 1

0

長方形を回転すると、バウンディング ボックスのサイズが変わります。その新しいサイズを計算し、新しいサイズを使用して回転した四角形の新しい境界線を計算する方法は次のとおりです (疑似コード)。

var cos = Math.abs(Math.cos(rotationInRadians));
var sin = Math.abs(Math.sin(rotationInRadians));
var newWidth =  rectHeight * sin + rectWidth * cos;
var newHeight = rectHeight * cos + rectWidth * sin;
// assuming you rotated your rectangle around it’s center
var newLeft= rectCurrentX + rectWidth/2 – newWidth/2;
var newRight = newLeft + newWidth;
var newTop =  rectCurrentY + rectHeight/2 – newHeight/2;
var newBottom = newTop + newHeight;

次に、それを dragBoundFunc に接続します。

計算したら…これはおそらくうまくいかないでしょう！

dragBoundFunc はすべての mousemove を実行する必要があることに注意してください

dragBoundFunc非常に迅速に実行するように構築する必要があります。

現在の mousemove に対してこのすべての計算を行うまでに、ユーザーはさらに 3 ～ 5 回 mousemoved し、ドラッグ境界をエスケープするため、このソリューションは機能しません。

計算が有効になるまでに時間がかかりすぎます (比較的高速なクアッドコア マシンでも)。

実用的なソリューションには、おそらく、360 度 (2PI ラジアン) を中心に 6 ～ 12 の異なる回転で四角形の境界を事前に計算することが含まれます。

次に、dragBoundFunc で: 現在の X/Y を事前にクランチされた境界にプラグインし、それぞれの違反をテストします。

これには、dragBoundFunc での 6 ～ 12 の単純な数学計算しか含まれないため、おそらくユーザーのマウス移動の山についていくことができます。

于 2013-05-16T19:06:48.070 に答える