Question

我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);
         }

Answer 1

使用边界框是测试机箱的绝佳方法。

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

矩形：矩形，图像，文字，精灵，
循环：Circle，Wedge，
Polypoint：Line，Polygon，Blob，Spline
无法定义的结构：自定义（未在此答案中查看）

测试矩形形状：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
    );
}

测试Polypoint形状：线条，多边形，Blob，样条线：

// 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);
}

Answer 2

检查这个旧问题：KineticJS and shapes inside area

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

在mousemove上绘制一个矩形，并使用kineticjs在mouseup上选择该矩形内的所有形状？

2 个答案: