Question

我正在尝试检测我的矩形是否完全封闭在圆圈内。如果矩形完全包围在圆圈中，我希望它保持“钢蓝”，如果它接触或穿过线我想要切换到红色。

我已经找到了一种基于x，y，cx，cy和r的方法来确定它是否在圆圈的边界框内，但是我需要根据实际圆圈进行检查。

我在这里有一个运行示例：http://jsfiddle.net/TheMcMurder/T92jF/

我的代码如下：

var drag = d3.behavior.drag()
.on("drag", function(){
    var self = d3.select(this)
    var dx = d3.event.dx;
    var dy = d3.event.dy;
    var x = self.attr("x")
    var y = self.attr("y")
    self.attr("x", (+x + dx))
    self.attr("y", (+y + dy))
    detection(d3.select(".circle"), d3.select(".rect"))
})


var svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 400)
.attr("class", "parent_svg")

svg.append("rect")
.attr("width", 400)
.attr("height", 400)
.style("fill", "#e4e5e5")

var rect = svg.append("rect")
.attr("width", 100)
.attr("height", 48)
.attr("x", 50)
.attr("y", 50)
.style("fill", "steelblue")
.attr("class", "rect")
.style("cursor", "all-scroll")
.call(drag)


var circle = svg.append("circle")
.attr("class", "circle")
.attr("r", 300/2)
.attr("cx", 350/2)
.attr("cy", 350/2)
.style("fill", "none")
.attr("stroke", "orange")
.attr("stroke-width", 1)

detection(circle, rect)

function detection(circle, rect){
    var cx = (+circle.attr("cx"))
    var cy = (+circle.attr("cy"))
    var r = (+circle.attr("r"))


    var x = (+rect.attr("x"))
    var y = (+rect.attr("y"))
    var width = (+rect.attr("width"))
    var height = (+rect.attr("height"))
    var x_range = false
    var y_range = false

    if ( x > (cx-r) && (x+width) < (cx+r)){

        x_range = true;
    }
    if ( y > (cy-r) && (y+height) < (cy+r)){
        y_range = true;
    }
    if (x_range && y_range){
        rect.style("fill", "steelblue")
    }else{
        rect.style("fill", "red")
    }
}

Answer 1

这样做的一种方法是迭代矩形的四个角并检查到圆心的距离是否小于半径。如果对于所有四个点都是如此，则矩形在圆内。如果1-3点为真，则矩形接触或与圆相交。

var sum = 0;
[[x,y], [x+width,y], [x,y+height], [x+width,y+height]].forEach(function(c) {
    sum += Math.sqrt(Math.pow(cx - c[0], 2) + Math.pow(cy - c[1], 2)) < r ? 1 : 0;
});

此代码构造四个角点的坐标，并计算圆内角的数量（即距中心的距离小于半径）。您现在需要做的就是检查该号码是4还是其他。

完整演示here。

检测矩形是否完全位于圆圈d3js内

1 个答案: