Question

我一直在寻找与<table style = "width: 200px; height: 200px;"> <iframe>  </iframe> </table>的CoreGraphics函数相当的javascript。我找到了CGRectUnion。我正在阅读有关isPointInPath路径的内容，因此我认为这非常有可能。

这个功能的作用是采用两个矩形。

clip

每个rect对象都有4个键，function CGRectUnion(rect1, rect2) { }，w，h和x。 x和y是矩形的左上角坐标，w和h是宽度和高度。

如果rect2的任何部分与rect1重叠，则该函数返回false。如果rect2与rect1重叠，则返回两个矩形之间公共区域的矩形对象。

在javascript中是否有这样的内置函数，尤其是画布相关区域？

由于

Answer 1

我还没有听说过类似canvas的功能，但是这是一个非常简单的功能，所以你可以像这样自己实现它：

function CGRectUnion(r1, r2) {
    var rightEdge1 = r1.x+r1.w;
    var rightEdge2 = r2.x+r2.w;
    var bottomEdge1 = r1.y+r1.h;
    var bottomEdge2 = r2.y+r2.h;

    // first check if the rectangles overlap at all, if not return false
    if(r1.x > rightEdge2 || rightEdge1 < r2.x || r1.y > bottomEdge2 || bottomEdge1 < r2.y) {
        return false;
    }

    // return a new rectangle for the intersection
    return {
        x: Math.max(r1.x, r2.x),
        y: Math.max(r1.y, r2.y),
        w: Math.min(rightEdge1, rightEdge2) - Math.max(r1.x, r2.x),
        h: Math.min(bottomEdge1, bottomEdge2) - Math.max(r1.y, r2.y)
    };
}

可在此处找到演示： http://jsfiddle.net/zfaqrnth/

Canvas等效于CGRectUnion

1 个答案: