3

私は持っていselectionrectangleますmousemove（正常に動作しています）。mouseupイベント時にその長方形の範囲内で形状を選択する方法を教えてもらえますか? 私のコードは次のようなものです(主な機能のみ):

function onMouseDown() {
             if (!isMouseDown) {
                 return
             }
             isMouseDown = true;
             if (selectionrectangle) {
                 selectionrectangle.remove();
             }
             pointerPosition = stage.getPointerPosition();
             x = Math.floor(pointerPosition.x)
             y = Math.floor(pointerPosition.y )
             originX = [];
             originY = [];
             originX.push(x);
             originY.push(y);
             selectionrectangle = new Kinetic.Rect({
                 x: originX[0],
                 y: originY[0],
                 width: 0,
                 height: 0,
                 stroke: 'pink',
                 strokeWidth: 3,
                 name: 'SelectionRectangle'
             });
             refRect = selectionrectangle;
             refRect1 = selectionrectangle;
             selectionrectangle.setListening(true);
             mainLayer.add(selectionrectangle);
         }
         function onMouseMove() {
             if (!isMouseDown) {
                 return;
             };
             isMouseDown = true;
             pointerPosition = stage.getPointerPosition();
             x = Math.floor(pointerPosition.x )
             y = Math.floor(pointerPosition.y)
             refRect.setWidth(x - refRect.getX());
             refRect.setHeight(y - refRect.getY());
             mainLayer.drawScene();
         }
         function onMouseUp() {
             isMouseDown = false;
             stage.add(mainLayer);
         }
4

2 に答える 2

2

境界ボックスを使用することは、エンクロージャーをテストするための優れた方法です。

デモ: http://jsfiddle.net/m1erickson/f9pe4/

境界ボックスは、選択範囲の左端、右端、上端、および下端の座標で構成されます。

refRect の境界ボックスは、次のようにオブジェクトに配置できます。

// calculate a bounding box for the refRect

refRect.BoundingBox=refBoundingBox(refRect);

function refBoundingBox(refRect){
    return({
        left:refRect.getX(),
        top:refRect.getY(),
        right:refRect.getX()+refRect.getWidth(),
        bottom:refRect.getY()+refRect.getHeight()
    });
}

次に、その境界ボックスに対してすべての形状をテストできます。

すべての主要なキネティック シェイプは、次の 4 つのカテゴリに分類されます。

  • 長方形: Rect、Image、Text、Sprite、
  • 円形: 円、くさび、
  • ポリポイント: ライン、ポリゴン、ブロブ、スプライン
  • 定義できない構造: カスタム (この回答では調べていません)

四角形のテスト: Rect、Image、Text、Sprite:

// Test enclosure for rectangular shapes:
// Rect,Image,Text,Sprite

function isRectInBB(refBB,shape){
    var x=shape.getX();
    var y=shape.getY();
    return( 
        x>refBB.left &&
        x+shape.getWidth()<refBB.right &&
        y>refBB.top &&
        y+shape.getHeight()<refBB.bottom
    );
}

円形形状のテスト: 円、くさび:

// Test enclusure for circular shapes:
// Circle,Wedge

function isCircleInBB(refBB,shape){
    var thisX=shape.getX();
    var thisY=shape.getY();
    var thisRadius=shape.getRadius();
    return( 
        thisX-thisRadius>refBB.left &&
        thisX+thisRadius<refBB.right &&
        thisY-thisRadius>refBB.top &&
        thisY+thisRadius<refBB.bottom
    );
}

ポリポイント形状のテスト: ライン、ポリゴン、ブロブ、スプライン:

// Test enclosure for polypoint shapes:
// Line,Polygon,Blob,Spline

function isPolyInBB(refBB,shape){
    var x=shape.getX();
    var y=shape.getY();
    return(
        x+shape.minX>refBB.left &&
        y+shape.minY>refBB.top &&
        x+shape.maxX<refBB.right &&
        y+shape.maxY<refBB.bottom);
}
于 2013-11-16T01:14:20.080 に答える
0

この古い質問を確認してください: KineticJS と領域内の形状

OPには、開始に役立つJSFiddleの例があります。

于 2013-11-15T15:51:57.257 に答える