当前位置：首页 > article >正文

数据类设计_图片类设计之7_矩阵图形类设计更新_实战之页面简单设计（前端架构）

article 2025/3/21 6:47:56

前言

学的东西多了,要想办法用出来.C和C++是偏向底层的语言,直接与数据打交道.尝试做一些和数据方面相关的内容

引入

前面讲过的混合类型设计,实际上是矩阵类图形设计(名称已更新).他能够产生的视觉效果是这样的:

注意:外层的矩形边框可以不存在,只是说明了图形存在于一个矩形区域内.

特别是:矩阵对象之间不能层叠.这是区别矩阵类图形对象和自由图形类对象(在下一篇帖子讨论)的重要不同

有人可能会问,第一层里的图像不就是层叠起来吗?注意,矩阵对象内部可以混合任何图像,但矩阵对象之间不能层叠,他必有矩形边.

矩阵图形类的分析

矩阵图形类的优点:

占用空间少.如上图所示,他可以建立许多层的矩阵图形,而矩阵类不需要存储坐标信息,用动态数组的对象来替代.

矩阵图形类更新

根据画出的矩阵图形类的样子,矩阵图形类更新如下:

//更新后的矩阵类定义
struct Matrix : public Reg_pic {
    short length;                             //表示长度的点个数
    short height;                             //表示高度的点个数
    short red;
    short green;
    short blue;
    vector<vector<Reg_point>> matrix;         //图,点的二维数组
    vector<Matrix> inner_matrix;              //更新时添加的属性,表示内部矩阵
    Matrix(short Length, short Height, short Red,
        short Green, short Blue)              //构造函数
    {
        vector<Reg_point> tmp;                //临时容器
        for (short i = 0; i < height; i++)
            for (short j = 0; j < length; j++)
            {
                tmp.push_back(Reg_point{ Red,Green,Blue });
            }
        matrix.push_back(tmp);                //临时容器内容添加到矩阵对象
    }
};

矩阵图形类设计实例_页面设计

矩阵图形类的应用:网页的页面,应用程序的界面,都是矩阵图形类对象

1>最外层界面设计

Matrix html_page(2560,1440,256,256,256);        //生成对象,假设2k分辨率,全白色

说明:如果是放在windows里,把底部任务栏的尺寸扣掉,高度应低于1440.

2>次外层设计

1)次外层矩阵元素设计

//矩阵内第一层元素,也是矩阵对象的写法
Matrix hp1_1(300,500,256,256,256);    //意为界面内1层第1个矩阵对象
Matrix hp1_2(300,500,256,256,256);    //意为界面内1层第2个矩阵对象
...
...

2)混合矩阵内容

用前面的混合算法,把每个矩阵框的内容添加进去,因为前面只写了混合字符的算法,原帖地址:数据类设计_图片类设计之5_不规则类图形混合算法(前端架构)-CSDN博客所以借用

//字符对象混合到矩阵对象中,函数原型
Matrix& mix_zifu(short x_ref,short y_ref,Matrix& mx,Zifu& zf)

调用

hp1_1=mix_zifu(150,250,hp1_1,1);    //写入1到矩阵hp1_1中
hp1_2=mix_zifu(150,250,hp1_2,2);    //写入2到矩阵hp1_2中

产生的效果大概是这样的 :

为什么是大概呢?暂时不要纠结细节,字体位置还需要调整基点位置,达到居中或者偏左偏右等效果.

3)生成的对象添加到外层页面中.

//添加次外层矩阵元素到最外层矩阵
html_page.inner_matrix.push_back(hp1_1);    //添加第1个内部矩阵到外部矩阵
html_page.inner_matrix.push_back(hp1_2);    //添加第2个内部矩阵到外部矩阵

4)确定次外层矩阵在最外层中的位置

再次使用矩阵混合算法,原帖在数据类设计_图片类设计之6_矩阵图形类设计（前端架构）-CSDN博客,里面虽没写,大概是这个样子

//借用圆角矩阵中间部分
    for(itfm=itfm+fm.radius;itfm<itfm_end-radius;itfm++)          //圆角矩阵中间也是矩阵  
        vector<Reg_Point>::iterator itmxs=(*itmx).begin()+y_ref;  
        for(itfms=(*itfm).begin();itfms!=(*itfm).end();itfms++){
             (*itmxs).red=(*itfms).red;   
             (*itmxs).green=(*itfms).green;  
             (*itmxs).blue=(*itfms).blue;    
             itmxs++;                          
        }
        itmx++;    //背景矩阵向下偏移一行
     }

注意:

1>这里用了硬编码,实际写的时候不要这么用,根据摆放的位置所决定.他表示第一个内部矩阵基点坐标200,200;第二个矩阵基点坐标200,500.

2>为了写得好看用了遍历inner_matrix,实际上也要根据内部矩阵的实际位置来定.使用"operator[]"或者"at"函数来获得元素

for(pd=html_page.inner_matrix.begin();pd!=html_page.inner_matrix.end();pd++)
    {
        html_page=mix_matrix(200,200,html_page,pd);
        html_page=mix_matrix(200,500,html_page,pd);
    }

他表达出来的效果大概是这样: