个人中心
gpt4 book ai didi

math - 给定元素的当前边界矩形及其变换矩阵，计算未变换元素的边界矩形

转载 作者：行者123 更新时间：2023-12-03 20:46:01 26 4
gpt4 key购买 nike

给定一个 DOM 元素 el我们对其应用了变换矩阵 M ( DOMMatrix 的实例)及其当前的边界矩形 rect ，我们如何获得边界矩形rect_init那对应于未转换的元素？
即给定此代码:

let rect = el.getBoundingClientRect();
el.style.transform = '';
let rect_init = el.getBoundingClientRect();
el.style.transform = M.toString();
知乎 rect和 M ，我们可以得到 rect_init ?
该矩阵仅包含平移、均匀缩放和旋转变换。在下图中，元素由蓝色矩形表示，其转换后的边界矩形是红色矩形。
有一个 older, related question他们的答案似乎没有涵盖平移、缩放和旋转的所有组合。
enter image description here
在下面的演示中，给定 M 和当前 bbox，我正在寻找初始 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>

最佳答案

我设法让它工作......
所以我做了一个小的 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);
    }
//---------------------------------------------------------------------------
并调整您的转换符号，直到它与您的预览匹配:
preview
越浅的颜色对应于由 m 转换的东西较暗的是没有变换(矩形局部)。
我发现你的 p 转换符号进入 Canvas 坐标是: 
p' = Inverse(m)*p
所以要变回你通常会完成: 
p = m*p`
但是，如果您的逆矩阵只是伪逆(如 this )以使其工作，您需要按比例划分逆矩阵。
所以如果你得到了 BBOX 的积分，你只需乘以 m和他们在一起，结果就是你所寻求的。

关于math - 给定元素的当前边界矩形及其变换矩阵，计算未变换元素的边界矩形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65593780/

26 4 0
文章推荐： javascript - 基于 Chromium 的浏览器中奇怪的 JavaScript 错误
文章推荐： flutter - Flutter 是否为 Android/iOS 发布版本执行 "Tree Shaking"/ "Dart dead-code elimination"？
文章推荐： javascript - NextJS 错误 : Component props are undefined when building the project (everything works fine on dev mode)
文章推荐： ios - 双向无限垂直 ScrollView (在顶部/底部动态添加项目)，当您添加到列表开始时不会干扰滚动位置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com