在鼠标移动时绘制一个矩形，并使用 kineticjs 在鼠标向上选择该矩形内的所有形状

Drawing a rectangle on mousemove and selecting all shapes within that rectangle on mouseup using kineticjs?

本文关键字：鼠标 kineticjs 选择 绘制 移动 一个      更新时间：2023-09-26

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

使用边界框是测试外壳的绝佳方法。

演示：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);
}

检查这个老问题：KineticJS和区域内的形状

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

相关文章：