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

前言

学的东西多了,要想办法用出来.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);
    }

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

至此,页面框架设计完毕.不管里面有多少层矩阵,每个矩阵对象包含什么内容,都可以按照这个步骤来写.

补充

1.页面的修改

分两种情况:

1>这个修改如果是固定内容的改变,需要修改的矩阵内容不需要马上表现出来,那么什么都不用变,在产品重新上线的时候,传入不同参数即可.

2>如果是需要马上看见效果,调用mix算法,网页刷新时重新表现.

2.内层矩阵位置的确定

次外层hp1可以直接定位到最外层的基点位置.其他层(非次外层)的矩阵位置可能需要坐标转换

小结

1>不经意间在页面元素类型设计时用到了散列算法.感叹很神奇,很强大.

2>感觉出设计师和程序员的差别,架构师或者算法工程师掌握关键代码,把api交给程序员,剩下的就是"搬砖"的过程.不管需要什么内容都可以,分工明确.关键代码量也可能不会有多大.

3>实现了"自顶向下"的设计.同时也是"面向对象"的不错体现,各人分工写各自页面元素,一层一层向上汇总,得到最终产品.例如,给你一个对象hp1_2_3_4,你明白自己要写第3层第4个矩阵的内容.写完后交给上一层(hp1_2_3),由他分配内容的位置

4>页面刷新:由3>推导出,可以写出页面元素单独刷新或者全部刷新的代码

5>挂了个名叫实战,里面的细节没完全整理.代码要多写,写着写着感觉就有了.

鸣谢

笔者另一篇帖子数据在硬件和软件中的表示-CSDN博客里有求下载链接,如果您感觉有所帮助,请帮忙点击,下载,提高等级