SOURCE

var containter=document.getElementById("containter")
var stage = new Konva.Stage({
    container: 'containter',   // id of container <div>
    width:containter.getBoundingClientRect().width,
    height: containter.getBoundingClientRect().height
});

// then create layer
var layer = new Konva.Layer();

var rect1 = new Konva.Rect({
    x: 300,
    y: 300,
    width: 300,
    height: 200,
    fill: '#FFF999',
    stroke: 'red',
    strokeWidth: 2,
    dash: [8, 4], 
    draggable:true
});
layer.add(rect1);

stage.add(layer);


var dRect1 = new Konva.Rect({
    x: 10,
    y: 10,
    width: 180,
    height: 150,
    fill: '#0A88C3',
    stroke: 'red',
    strokeWidth: 2,
    draggable: true
});

layer.add(dRect1);


var dRect2 = new Konva.Rect({
    x: 200,
    y: 100,
    width: 100,
    height: 80,
    fill: '#0A88C3',
    stroke: 'red',
    strokeWidth: 2,
    draggable: true
});

layer.add(dRect2);


var star1 = new Konva.Star({
    x: 0,
    y: 0,
    numPoints: 6,
    innerRadius: 5,
    outerRadius: 7,
    fill: 'yellow',
    stroke: 'black',
    strokeWidth: 2,
    visable: false
});

layer.add(star1)

var star2 = new Konva.Star({
    x: 0,
    y: 0,
    numPoints: 6,
    innerRadius: 5,
    outerRadius: 7,
    fill: 'yellow',
    stroke: 'black',
    strokeWidth: 2,
    visible: false
});

layer.add(star2)

dRect2.on('dragend', checkIntersect);
dRect1.on('dragend', checkIntersect);







function FindPoints(x1, y1, x2, y2,
    x3, y3, x4, y4) {

    // Gives bottom-left point
    // of intersection rectangle
    var x5 = Math.max(x1, x3);
    var y5 = Math.max(y1, y3);

    // Gives top-right point
    // of intersection rectangle
    var x6 = Math.min(x2, x4);
    var y6 = Math.min(y2, y4);

    // No intersection
    if (x5 > x6 || y5 > y6) {
        console.log("No intersection");
        return;
    }

    return {
        x1: x5,
        y1: y5,
        x2: x6,
        y2: y6
    }
}

function checkIntersect() {

    console.log("*******************************************************")
    var x1 = dRect1.getAttr("x")
    var y1 = dRect1.getAttr("y")
    var x2 = x1 + dRect1.getAttr("width")
    var y2 = y1 + dRect1.getAttr("height")
    console.log(x1 + "," + y1 + "," + x2 + "," + y2)

    var x3 = dRect2.getAttr("x")
    var y3 = dRect2.getAttr("y")
    var x4 = x3 + dRect2.getAttr("width")
    var y4 = y3 + dRect2.getAttr("height")
    console.log(x3 + "," + y3 + "," + x4 + "," + y4)

    var points = FindPoints(x1, y1, x2, y2, x3, y3, x4, y4)
    if (points) {
        console.log(JSON.stringify(points))

        star1.setAttrs({
            x: points.x1,
            y: points.y1,
            visible: true
        })
        star2.setAttrs({
            x: points.x2,
            y: points.y2,
            visible: true
        })
        // star2.attrs({false})

    } else {
        star1.setAttr('visible', false)
        star2.setAttr('visible', false)
    }

}





layer.draw();
var dashOffset = 0
var angularSpeed = 60;
var anim = new Konva.Animation(function (frame) {
    var angleDiff = (frame.timeDiff * angularSpeed) / 1000;
    if (dashOffset > rect1.width * 2 + rect1.height * 2) {
        dashOffset = 0
    } else {
        dashOffset += angleDiff
    }
    rect1.setDashOffset(-dashOffset);
}, layer);
anim.start()

var columnHeaders = []
var rowHeaders = []
var wh = [40, 24]
for (var i = 0; i < 12; i++) {
    var header = {
        x: i > 0 ? columnHeaders[i - 1].x + columnHeaders[i - 1].width : 0,
        width: wh[0]
    }
    columnHeaders.push(header)
}

for (var i = 0; i < 10; i++) {
    var header = {
        y: i > 0 ? rowHeaders[i - 1].y + rowHeaders[i - 1].height : 0,
        height: wh[1]
    }
    rowHeaders.push(header)
}

console.log(columnHeaders, rowHeaders)

function getSelectionAreaBoundaryRect(aredDef) {
    var x1 = columnHeaders[areaDef.from.cIdx].x
    var y1 = rowHeaders[areaDef.from.rIdx].y
    var x2 = columnHeaders[areaDef.to.cIdx].x + columnHeaders[areaDef.to.cIdx].width
    var y2 = rowHeaders[areaDef.to.rIdx].y + rowHeaders[areaDef.to.rIdx].height

    return {
        x1: x1,
        y1: y1,
        x2: x2,
        y2: y2
    }
}

var areaDef = {
    origin: {
        from: {
            cIdx: 1,
            rIdx: 1
        },
        to: {
            cIdx: 1,
            rIdx: 1
        }
    },
    from: {
        cIdx: 1,
        rIdx: 1
    },
    to: {
        cIdx: 5,
        rIdx: 5
    }
}



function newBorderLine(name, points) {
    var line = new Konva.Line({
        name: name,
        points: points,
        stroke: 'green',
        strokeWidth: 2
    });
    line.on('mouseover', function () {
        document.body.style.cursor = 'move';
    });
    line.on('mouseout', function () {
        document.body.style.cursor = 'default';
    });
    return line
}




function drawSelectionArea(areaDef) {
    var boundaryRect = getSelectionAreaBoundaryRect(areaDef)
    var width = boundaryRect.x2 - boundaryRect.x1
    var height = boundaryRect.y2 - boundaryRect.y1
    console.log(width, height)

    var lTbLinePoints = [
        0, 0, 0, height
    ]  // 左边垂线

    var tLRLinePoints = [
        0, 0, width, 0
    ]  // 上边横线

    var rTbLinePoints = [
        width, 0, width, height
    ]  // 右边垂线

    console.log(rTbLinePoints)

    var bLRLinePoints = [
        0, height, width, height
    ]  // 下边横线

    var group = new Konva.Group({
        x: 310,
        y: 50,
        width: width,
        height: height,
        draggable:true
    })

    layer.add(group)
    var selectionBackgroundAreaRect = new Konva.Rect({
        x: 0,
        y: 0,
        width: width  ,
        height: height, 
        fill: 'rgba(214,222,224,0.5)'
    });
   
    group.add(selectionBackgroundAreaRect)
    group.add(newBorderLine("ltb", lTbLinePoints))
    group.add(newBorderLine("tlr", tLRLinePoints))
    group.add(newBorderLine("rtb", rTbLinePoints))
    group.add(newBorderLine("blr", bLRLinePoints))


    var funcBtnRect = new Konva.Rect({
        x: width-2,
        y: height-2,
        width: 4  ,
        height: 4, 
        fill: '#0A88C3'
    });
    funcBtnRect.on('mouseover', function () {
        document.body.style.cursor = 'crosshair';
    });
    funcBtnRect.on('mouseout', function () {
        document.body.style.cursor = 'default';
    });

    group.add(funcBtnRect)

}

drawSelectionArea(areaDef)

<div id="containter" class="containter">
  
</div>

.containter{

width: 700px;
height: 660px;
border: solid 1px #ccc

}