Question

我不太清楚怎么说这个，但是这里......

css clip属性的定义如下：rect（top，right，bottom，left）。但是，我正在探索使用自定义Rectangle'类'来封装一些操作。矩形类具有属性height，width和x，y。

x和y值封装在Point对象中，高度和宽度封装在Dimension对象中，矩形是一个点（它的左上角位置）和一个尺寸（宽度和高度）的复合体。

到目前为止一切顺利。我可以很简单，根据矩形x，y，宽度和高度值来定义css rect属性的顶部，右侧，底部，左侧，但是我已经变得无可救药地混淆了 - 我已经谷歌搜索了一段时间，我似乎无法找到任何关于TRBL值实际是什么或它们代表什么的文档。例如，我应该考虑坐标，在这种情况下，我肯定可以使用矩形x位置为顶部，x位置+宽度为右，矩形高度+ y为底部将矩形描述为css rect和它的左侧位置......但那肯定是BS的负荷？

另外，当然，rect实际上是一个插图，或者我只是颠倒了对剪辑的理解？我很感激一些建议。我想要做的是

（i）使用x，y，width和height定义矩形（ii）以TRBL形式表示矩形，以便我可以操纵divs剪辑行为（iii）改变x，y，宽度或高度，并根据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 rect声明。

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 rect声明，并设置为clip的值。这非常适合制作动画。

如果要实现自己的矩形类，请注意至少使用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);

希望所有这些都有意义！

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

1 个答案: