形をグループに変換します

StackOverflow https://stackoverflow.com//questions/23012171

  •  21-12-2019
  •  | 
  •  

質問

私は私の舞台に異なる形をしています、そして私は彼らが選ばれたときにそれらをサイズ変更可能にしたいです。

形状をグループに「変換」し、それに留置済みを追加しました。形状が解除されたら、留解を解除してからグループから形状を取り除き、それを古い親に追加します。

私はそれを試してみましたが、座標の原点が形状に対して変化し、それが悪いことが悪い場合には実際には機能しません。だからそれは多くの仕事のようです、そしてそれは間違っていると感じます。私はおそらく広範なものであるそのようなものへのより良いアプローチがなければならないと思いました。

だから私の質問は、その場で既存の形状に留置額を追加する最善の方法は何ですか。

役に立ちましたか？

解決

合意された、「アンカー」のサイズ変更は視覚的に不安定で複雑なコード

です。

画像への別々の留解を追加することは視覚的にawkward

（O / S Windowsは、サイズ変更を有効にするためにCrunky Looking Resizerを追加しません）。

別々の留解を追加するとすぐに複雑になります。

比喩的には、あなたはあなたの太陽の形についての別々のリサイザー - 惑星を軌道に乗せなければなりません。

DragBoundFuncによって形状が制限されている場合の衛星の管理が複雑です。

形状が回転したときの衛星の管理KineticJSのオフセットを使用して回転点を定義するために驚くほど複雑になります。

代替案：サイズ自体の境界ボックスを使用してサイズ変更を管理します。

  • ステージ上のマウスイベントを聞いてください。
  • ユーザーが形状の境界にまったく区切られているときは、サイズ変更操作を開始してください。
  • ユーザーがドラッグしたときに、マウスがドラッグ側に対向する側からどれだけドラッグされたかに基づいて形状のサイズを変更します。

利益：

  • アンカーなし
  • ユーザーがO / S Windows
    • のサイズ変更時に慣れているのと同じサイズ変更方法を使用します。
  • 形状自体だけが関与しているので、複雑な「衛星アンカー」管理は不要です。

これは例です。 http://jsfiddle.net/m1erikson/t4e9y/

形状を定義します（この例では画像を使用しています）。 

kImage = new Kinetic.Image({
    image:img,
    x:10,
    y:10,
    width:img.width,
    height:img.height,
});
layer.add(kImage);
layer.draw();
.

現在のサイズで形状の境界領域を保存

舞台上のムーズタウンイベントを聴く。

Shape BoundingBox Border

内のメイダウン時に起動ドラッグ位置を保存します。 
$(stage.getContent()).on('mousedown', function (event) {
    var pos=stage.getPointerPosition();
    var mouseX=parseInt(pos.x);
    var mouseY=parseInt(pos.y);
    var ipos=kImage.position();
    var isize=kImage.getSize();
    var right=ipos.x+isize.width;
    if(mouseX>right-10 && mouseX<right+10){
        startRight=mouseX;
        startWidth=isize.width;
        startHeight=isize.height;
    }
});
.

ステージ上のMouseMoveイベントを聴く。

開始ドラッグ位置からドラッグされた距離に基づいて形状を拡大縮小します。

$(stage.getContent()).on('mousemove', function (event) {
    if(startRight>=0){
        var pos=stage.getPointerPosition();
        var mouseX=parseInt(pos.x);
        var mouseY=parseInt(pos.y);
        var dx=mouseX-startRight;
        var scaleFactor=(mouseX-(startRight-startWidth))/startWidth;
        kImage.width(startWidth*scaleFactor);
        kImage.height(startHeight*scaleFactor);
        layer.draw();
    }
});
.

ステージ上のマウスアップイベントを聴きます。

ユーザがマウスを解放するとドラッグサイズ変更を終了する

$(stage.getContent()).on('mouseup', function (event) {
    startRight=-1;
});
.

ここから行く場所：

この例では、右枠からリサイザをアクティブにします。同様に他の罫線を有効にすることができます。

ムース区のターゲットを変えることでどの形状が変わるかを変更することができます。

非常に不規則な形状には、ユーザーがその境界ボックスに移動したときに形状の境界ボックスを表示できます。その後、バウンディングボックスの境界を使用してユーザーがサイズ変更させます。

マウスがドラッグボーダー内にあるときに、すべての種類の形状の境界ボックスをハイライトとして表示できます。バウンディングボックスはユーザーに有用なビジュアルになります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top