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 类：

  • 矩形：矩形，图像，文本，精灵，
  • 圆形：圆形，楔形，
  • 多点：线、多边形、斑点、样条线
  • 无法定义的结构：自定义（未在此答案中检查）

测试矩形形状：矩形、图像、文本、精灵：

// 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 and shapes inside area

我提供了一些关于如何解决您的问题的信息和背景，以及 OP 有一个 JSFiddle 示例，可以帮助您入门。

于 2013-11-15T15:51:57.257 回答