【问题标题】:Compute untransformed element's bounding rectangle given the element's current bounding rectangle and its transform matrix给定元素的当前边界矩形及其变换矩阵,计算未变换元素的边界矩形
【发布时间】:2021-04-12 01:58:06
【问题描述】:

给定一个我们应用了变换矩阵MDOMMatrix的实例)的DOM元素el,以及它当前的边界矩形rect,我们如何获得边界矩形rect_init对应于未转换的元素?

即给定这段代码:

let rect = el.getBoundingClientRect();
el.style.transform = '';
let rect_init = el.getBoundingClientRect();
el.style.transform = M.toString();

知道rectM,可以得到rect_init吗?

矩阵仅包含平移、均匀缩放和旋转变换。在下图中,元素由 蓝色矩形 表示,其转换后的边界矩形为红色。

older, related question 的答案似乎并未涵盖平移、缩放和旋转的所有组合。

在下面的演示中,给定 Mcurrent bbox,我正在寻找 initial bbox

let target_element = document.querySelector('#target');
let M = new DOMMatrix()
  .translate(20, 30)
  .rotate(30)
  .scale(1.25);

let init_rect = target_element.getBoundingClientRect();

target_element.style.transform = M.toString();

let rect = target_element.getBoundingClientRect();

document.querySelector('#rect-init').textContent = serialize(init_rect);
document.querySelector('#rect').textContent = serialize(rect);
document.querySelector('#matrix').textContent = M.toString();

function serialize(rect) {
  return `x: ${rect.x}; y: ${rect.y}, w: ${rect.width}, h: ${rect.height}`;
}
#target {
  background: red;
  width: 200px;
  height: 100px;
  position: absolute;
  left: 30px;
  top: 50px;
}

#info {
  background: #eee;
  padding: 1em;
  margin-top: 250px;
  font: 0.9em monospace;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id='target'>Target</div>
  
  <dl id='info'>
    <dt>initial bbox: </dt>
    <dd id='rect-init'></dd>
    <dt>current bbox: </dt>
    <dd id='rect'></dd>
    <dt>M:</dt>
    <dd id='matrix'></dd>
  </dl>
</body>
</html>

【问题讨论】:

  • P 的变换通常由Q = M*P 完成(在齐次坐标w=1 中),相反很简单P = Inverse(M)*Q 其中M 是您的变换矩阵...在如果你有不同的符号,它可以被反转 Q = Inverse(M)*P; P = M*Q; 或者如果转置则 Q = Transpose(P)*M; P = Transpose(Q)*Inverse(M); 或两者兼而有之......所以只需将 BBOX 的顶点转换为你想要的坐标......
  • @Spektre 我试图找到矩形左上角的坐标给定以下:(1)变换矩阵M(2)变换后的左上角坐标矩形的边界框。将 M 的倒数应用于它会给我们一些可能有助于计算的东西,但不会产生最终解决方案。
  • 提供一个示例:所以我可以尝试......所以我需要 BBOX、矩阵并预览它的外观,以便我可以匹配正确的方程,因为单独的变换有 4 种组合。 ..
  • 我已更新问题以包含一个代码 sn-p,它为 current bboxM 生成一些示例值。
  • 对不起,如果我没有 100% 遵循...如果你运行上面的代码 sn-p,它的视觉输出包括(在红色矩形下的灰色框中)矩阵 M :matrix(1.0825317547305484, 0.6249999999999999, -0.6249999999999999, 1.0825317547305484, 20, 30);这些数字对应于a-f 值。这是您需要的信息吗?

标签: math dom


【解决方案1】:

我设法让它工作......

所以我做了一个小的 C++/OpenGL 示例来测试它:

//---------------------------------------------------------------------------
//--- input data ------------------------------------------------------------
//---------------------------------------------------------------------------
double m[16]=       // matrix
    {
    1.0825317547305484,-0.6249999999999999,0.0,20.0,
    0.6249999999999999, 1.0825317547305484,0.0,30.0,
    0.0               , 0.0               ,1.0,0.0 ,
    0.0               , 0.0               ,0.0,1.0
    };
double a[4][3]=     // your un-transformed rectangle
    {
    { 30    ,50    ,0 },
    { 30+200,50    ,0 },
    { 30+200,50+100,0 },
    { 30    ,50+100,0 },
    };
//---------------------------------------------------------------------------
//--- just matrix and vector math you can ignore this -----------------------
//---------------------------------------------------------------------------
void  vector_copy      (double *c,double *a) { for(int i=0;i<3;i++) c[i]=a[i]; }
void  matrix_mul       (double *c,double *a,double *b)  // c[16] = a[16]*b[16]
    {
    double q[16];
    q[ 0]=(a[ 0]*b[ 0])+(a[ 1]*b[ 4])+(a[ 2]*b[ 8])+(a[ 3]*b[12]);
    q[ 1]=(a[ 0]*b[ 1])+(a[ 1]*b[ 5])+(a[ 2]*b[ 9])+(a[ 3]*b[13]);
    q[ 2]=(a[ 0]*b[ 2])+(a[ 1]*b[ 6])+(a[ 2]*b[10])+(a[ 3]*b[14]);
    q[ 3]=(a[ 0]*b[ 3])+(a[ 1]*b[ 7])+(a[ 2]*b[11])+(a[ 3]*b[15]);
    q[ 4]=(a[ 4]*b[ 0])+(a[ 5]*b[ 4])+(a[ 6]*b[ 8])+(a[ 7]*b[12]);
    q[ 5]=(a[ 4]*b[ 1])+(a[ 5]*b[ 5])+(a[ 6]*b[ 9])+(a[ 7]*b[13]);
    q[ 6]=(a[ 4]*b[ 2])+(a[ 5]*b[ 6])+(a[ 6]*b[10])+(a[ 7]*b[14]);
    q[ 7]=(a[ 4]*b[ 3])+(a[ 5]*b[ 7])+(a[ 6]*b[11])+(a[ 7]*b[15]);
    q[ 8]=(a[ 8]*b[ 0])+(a[ 9]*b[ 4])+(a[10]*b[ 8])+(a[11]*b[12]);
    q[ 9]=(a[ 8]*b[ 1])+(a[ 9]*b[ 5])+(a[10]*b[ 9])+(a[11]*b[13]);
    q[10]=(a[ 8]*b[ 2])+(a[ 9]*b[ 6])+(a[10]*b[10])+(a[11]*b[14]);
    q[11]=(a[ 8]*b[ 3])+(a[ 9]*b[ 7])+(a[10]*b[11])+(a[11]*b[15]);
    q[12]=(a[12]*b[ 0])+(a[13]*b[ 4])+(a[14]*b[ 8])+(a[15]*b[12]);
    q[13]=(a[12]*b[ 1])+(a[13]*b[ 5])+(a[14]*b[ 9])+(a[15]*b[13]);
    q[14]=(a[12]*b[ 2])+(a[13]*b[ 6])+(a[14]*b[10])+(a[15]*b[14]);
    q[15]=(a[12]*b[ 3])+(a[13]*b[ 7])+(a[14]*b[11])+(a[15]*b[15]);
    for(int i=0;i<16;i++) c[i]=q[i];
    }
void  matrix_mul_vector(double *c,double *a,double *b)      // c[3] = a[16]*b[3]
    {
    double q[3];
    q[0]=(a[ 0]*b[0])+(a[ 4]*b[1])+(a[ 8]*b[2])+(a[12]);
    q[1]=(a[ 1]*b[0])+(a[ 5]*b[1])+(a[ 9]*b[2])+(a[13]);
    q[2]=(a[ 2]*b[0])+(a[ 6]*b[1])+(a[10]*b[2])+(a[14]);
    for(int i=0;i<3;i++) c[i]=q[i];
    }
void  matrix_subdet    (double *c,double *a);               // c[16] = all subdets of a[16]
double matrix_subdet   (          double *a,int r,int s);   //       = subdet(r,s) of a[16]
double matrix_det      (          double *a);               //       = det of a[16]
double matrix_det      (          double *a,double *b);     //       = det of a[16] and subdets b[16]
void  matrix_inv2       (double *c,double *a);              // c[16] = a[16] ^ -1
void  matrix_subdet    (double *c,double *a)
        {
        double   q[16];
        int     i,j;
        for (i=0;i<4;i++)
         for (j=0;j<4;j++)
          q[j+(i<<2)]=matrix_subdet(a,i,j);
        for (i=0;i<16;i++) c[i]=q[i];
        }
double matrix_subdet    (         double *a,int r,int s)
        {
        double   c,q[9];
        int     i,j,k;
        k=0;                            // q = sub matrix
        for (j=0;j<4;j++)
         if (j!=s)
          for (i=0;i<4;i++)
           if (i!=r)
                {
                q[k]=a[i+(j<<2)];
                k++;
                }
        c=0;
        c+=q[0]*q[4]*q[8];
        c+=q[1]*q[5]*q[6];
        c+=q[2]*q[3]*q[7];
        c-=q[0]*q[5]*q[7];
        c-=q[1]*q[3]*q[8];
        c-=q[2]*q[4]*q[6];
        if (int((r+s)&1)) c=-c;       // add signum
        return c;
        }
double matrix_det       (         double *a)
        {
        double c=0;
        c+=a[ 0]*matrix_subdet(a,0,0);
        c+=a[ 4]*matrix_subdet(a,0,1);
        c+=a[ 8]*matrix_subdet(a,0,2);
        c+=a[12]*matrix_subdet(a,0,3);
        return c;
        }
double matrix_det       (         double *a,double *b)
        {
        double c=0;
        c+=a[ 0]*b[ 0];
        c+=a[ 4]*b[ 1];
        c+=a[ 8]*b[ 2];
        c+=a[12]*b[ 3];
        return c;
        }
void  matrix_inv(double *c,double *a)
        {
        double   d[16],D;
        matrix_subdet(d,a);
        D=matrix_det(a,d);
        if (D) D=1.0/D;
        for (int i=0;i<16;i++) c[i]=d[i]*D;
        }
//---------------------------------------------------------------------------
//--- render ----------------------------------------------------------------
//---------------------------------------------------------------------------
void TForm1::draw()
    {
    int i;
    double xs=ClientWidth,ys=ClientHeight; // just my GL view resolution
    double p[3],im[16]; // some temp point and inverse matrix
    double b[4][3];     // your rectangle
    matrix_inv(im,m);   // im=Inverse(m)

    glClear(GL_COLOR_BUFFER_BIT);
    glDisable(GL_CULL_FACE);
    glDisable(GL_DEPTH_TEST);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glTranslated(-0.5,+0.5,0.0);
    glScaled(2.0/xs,-2.0/ys,1.0);
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();

    // render transformed a and compute its BBOX into b
    glColor3d(0.0,0.5,0.5); // aqua
    glBegin(GL_LINE_LOOP);
    for (i=0;i<4;i++)
        {
        // transform and render rectangle a
        matrix_mul_vector(p,im,a[i]);   // p = inverse(m)*a[i]
        glVertex2dv(p);
        // compute transformed BBOX b[0]=min(p) b[2]=max(p)
        if (i==0)
            {
            vector_copy(b[0],p);
            vector_copy(b[2],p);
            }
        if (b[0][0]>p[0]) b[0][0]=p[0];
        if (b[2][0]<p[0]) b[2][0]=p[0];
        if (b[0][1]>p[1]) b[0][1]=p[1];
        if (b[2][1]<p[1]) b[2][1]=p[1];
        }
    glEnd();
    // convert BBOX b[0],b[2] to rectangle
    b[1][0]=b[2][0];
    b[1][1]=b[0][1];
    b[3][0]=b[0][0];
    b[3][1]=b[2][1];

    // render transformed b
    glColor3d(0.8,0.0,0.0); // red
    glBegin(GL_LINE_LOOP);
    for (i=0;i<4;i++) glVertex2dv(b[i]); glEnd();

    // untransform b to rectangle local coordinates
    for (i=0;i<4;i++) matrix_mul_vector(b[i],m,b[i]);   // b[i] = m*b[i]

    // render a,b in local coordiantes (untransformed)
    glColor3d(0.0,0.25,0.25); // aqua
    glBegin(GL_LINE_LOOP);
    for (i=0;i<4;i++) glVertex2dv(a[i]);
    glEnd();
    glColor3d(0.4,0.0,0.0); // red
    glBegin(GL_LINE_LOOP);
    for (i=0;i<4;i++) glVertex2dv(b[i]);
    glEnd();


    glFlush();
    SwapBuffers(hdc);
    }
//---------------------------------------------------------------------------

并调整了你的转换符号,直到它与你的预览相匹配:

较浅的颜色对应于由m 转换的东西,而较深的颜色则没有转换(矩形局部)。

我发现您将p 转换为画布坐标的符号是:

p' = Inverse(m)*p

所以要转换回来,你通常会完成:

p = m*p`

但是,如果您的逆矩阵只是伪逆矩阵(如 this),您需要将逆矩阵除以比例。

因此,如果您获得了 BBOX 的积分,您只需将 m 乘以它们,结果就是您所寻求的。

【讨论】:

  • 感谢您花时间写这篇文章。在您的代码中,如果 a 是原始矩形,则 m 是应用于它的矩阵变换,而 b 是转换后的矩形——如果我只有 mb,我如何获得(如果有的话)原始矩形 a?这就是我的问题的要点。
  • @DanBurzo bInverse(m)*a 的最小值/最大值,所以您只需执行b' = m*b。希望我的矩阵数学不会转换为你的(它在 OpenGL 风格中,因为矩阵是列主要的,所以以防万一我也提供了数学函数)......当心你需要使用点!如果您有向量(或增量记录大小),那么您需要使用 w=0 而不是 w=1
  • @DanBurzo 暂时不需要考虑这个问题
  • @DanBurzo 嗯,我唯一能想到的就是拟合一些函数来估计红色和水色矩形对角线之间的角度差,从角度 m 旋转和红色矩形纵横比...但是想不通。也许后来有什么东西打到了我……但是无论我现在尝试什么,都会弹出无数的解决方案……
  • @Spektre:我相信我这里有一个兄弟姐妹:stackoverflow.com/questions/64402167/…
猜你喜欢
  • 1970-01-01
  • 2012-07-31
  • 1970-01-01
  • 2012-02-10
  • 1970-01-01
  • 2019-01-05
  • 1970-01-01
  • 1970-01-01
  • 2011-03-29
相关资源
最近更新 更多