javascript - 如何将矩形转换为 TRBL CSS 矩形值？

Question

我不太确定怎么说，但是这里是...

css clip 属性定义如下:rect(top, right, bottom, left)。但是，我正在探索使用自定义 Rectangle“类”来封装一些操作。矩形类具有高度、宽度和 x、y 属性。

x 和 y 值封装在一个 Point 对象中，高度和宽度封装在一个 Dimension 对象中，矩形是一个点(它的左上角位置)和一个维度(宽度和高度)的组合.

到目前为止一切顺利。我虽然在具有矩形 x、y、宽度和高度值的基础上根据顶部、右侧、底部、左侧定义 css rect 属性会非常简单，但我变得非常困惑-我已经在谷歌上搜索了一段时间，我似乎找不到任何关于 TRBL 值实际是什么或它们代表什么的文档。例如，我是否应该考虑坐标，在这种情况下，我当然可以将矩形描述为 css 矩形，使用矩形 x 位置表示顶部，x 位置 + 宽度表示右侧，矩形高度 + y 表示底部及其左的 y 位置...但这肯定是一大堆废话？

另外，rect 肯定是 inset，还是我对 clip 的理解颠倒了？我会很感激一些建议。我希望能够做的是

(i) 使用 x、y、宽度和高度定义一个矩形(ii) 以 TRBL 形式表达矩形，以便我可以操纵 div 裁剪行为(iii)改变 x, y, width 或 height 并根据 TRBL 和 goto (ii) 重新计算

我明白这里还有一些其他因素，还有一些中间转换需要完成，但我自己很困惑-

谁能给我一些指点？

Answer 1

“解决方案”基本上只是在坐标空间方面更好地理解 css rect 属性。

我对如何确定 css clip rect 出现的位置感到困惑。答案实际上很简单，一旦您意识到就 css rect 而言，“坐标空间”是被裁剪元素 (E) 的尺寸，并且您始终可以将 E 视为其左上角具有坐标 x=0, y=0。

假设我们有一个元素 E，它的高度为 200，宽度为 300。我们可以这样描述它

E= {x:0, y:0, width:300, height:200}

它的 x 和 y 坐标，就我们在绘制裁剪矩形的 TRBL 值时所关心的是 0、0。所以让我们考虑裁剪矩形，一个这样定义的例子

C= {x:30, y:30, width:150, height:150}

由于 C.x 和 C.y 指的是 E 的坐标空间，而 E.x 和 E.y 始终为 0，因此在所有情况下我们都可以完全忽略 E.x 和 E.y。事实上，除非我们关心将 C(裁剪矩形)约束到 E，否则我们可以完全消除对 E 的所有了解，并使用如下方法将 C 转换为 css 矩形声明。

function toCssRect(rectangle)
{
    var left=   parseInt(rectangle.x)
    ,   right=  parseInt(left + rectangle.width)
    ,   top=    parseInt(rectangle.y)
    ,   bottom= parseInt(top + rectangle.height);

    return 'rect(' + top + 'px ' + right + 'px ' + bottom + 'px ' + left +'px)';
}

因此，使用以下 HTML 标记(将 img 元素视为 E)

<div class='.clipComponent'>
    <div id="contentClipper" class=".clipContent'>
        <img src="whatever.jpg"/>
    </div>
</div>

...和 ​​CSS

.clipComponent {position:relative}
.clipContent {position:absolute; clip:rect(auto);}

...我们将有一个未剪切的图像(因为 .clipContent 将适应 img 的大小，因为我们用 auto 定义了它)。现在为了剪辑它，我们可以将 C(上面定义的)传递给 toCssRect 函数并将它应用到 .clipContent div，就像这样

var clipDiv= document.getElementById('contentClipper')
,   clipRect= {x:10, y:10, width:100, height:20};

clipDiv.style.clip= toCssRect(clipRect);

我们到了。这样做的好处是您可以通过添加值来移动矩形到其 x 和 y 属性，或通过修改其宽度和高度属性来增大和缩小矩形。每次修改后，将矩形转换为 css 矩形声明并将其设置为剪辑的值。这非常适合制作动画。

如果你想实现你自己的矩形类，请注意至少在 Safari 和 Chrome 中，如果你实现 toString 来返回 toCssRect 方法的结果，你可以只将矩形分配给元素样式对象的 clip 属性- 为了便于说明，考虑下面的对象字面量:

var clipRect= 
{
    x:30, 
    y:40, 
    width:10, 
    height:30, 
    toString: function () 
    {
        return toCssRect(this);
    },
    translate: function (dx, dy)
    {
        this.x+= dx || 0;
        this.y+= dy || 0;
        return this;
    }
  }

现在你可以很清楚地制作动画和编码了(假设上面定义的对象和函数)

setInterval(function () 
{
    // translate will add 1px to the value of the rectangles x position, 
    // (moving it down) and then return a reference to the clipRect object.
    // When you assign the clipRect object to the divs style object
    // JavaScript will attempt to convert the clipRect object to a primitive, 
    // which will invoke toString and return the css string- nice and clean
    clipDiv.style.clip= clipRect.translate(1, 0);
}, 500);

希望一切都有意义!