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

数据类设计_图片类设计之3_半规则图类设计(前端架构基础)

news 来源：原创 2025/5/15 21:57:24

前言

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

引入

接续上一篇讨论半规则图类型的设计

半规则图的定义

什么是半规则图?笔者看见了一些似乎规则又不是太规则的图形,例如带圆角的矩阵,在页面上找一个圆角框

为了看得清楚一点,自己画一个类似圆角矩阵的形状,win10搜索栏输入mspaint,打开自带画图软件,画一个下面的形状,并填充.

在计算机中是如何表示的呢?尝试给出定义.

`思考:类型定义也不是唯一的,找一种比较简洁的.圆角矩形和之前的矩阵类看起来也差不多,所以借鉴一下,用点的二维数组去定义(没错vector<vector<Reg_point>>这个类型还能用,他表示点集合的集合,但算法上有区别)其中需要包括圆角r的半径.

//圆角矩阵定义
struct Fillet_Matrix : public Reg_pic {
    short length;                             //表示长度的点个数
    short height;                             //表示高度的点个数
    short red;
    short green;
    short blue;
    short radius;                             //圆角半径
    vector<vector<Reg_point>> fillet_matrix;  //圆角矩阵,点的二维数组
    Fillet_Matrix(short Length, short Height, short Red,
        short Green, short Blue,short Radius) //构造函数
    {
        vector<Reg_point> tmp;                //临时容器
        for (short i = 0; i < Radius; i++)    //第一段:半径小于高度
            for (short j = 0; j < length-2*Radius+2*i; j++)
            {
                tmp.push_back(Reg_point{ Red,Green,Blue });
            }
        fillet_matrix.push_back(tmp);         //临时容器内容添加到矩阵对象

        for(short i=Radius;i<Height-Radius;i++)//第二段和矩阵一致
            for(short j=0; j<length;j++)
            {
                tmp.push_back(Reg_point{ Red,Green,Blue });
            }
        fillet_matrix.push_back(tmp);         //临时容器内容添加到矩阵对象
        
        for (short i =Height-Radius; i < Height; i++)    //第三段:从高度减去已扫描高度小于半径
            for (short j = 0; j < length-2*Radius+2*(Height-i-1); j++)
            {
                tmp.push_back(Reg_point{ Red,Green,Blue });
            }
        fillet_matrix.push_back(tmp);         //临时容器内容添加到矩阵对象
    }
};

问题(必须解决的)

代码写完后再读,发现他保证了从上向下扫描时每行点数的规律,比如第一行和最后一行的点个数是length-2*Radius,但他们的位置并未说明,也就是倒圆角的效果还没有.最初的设计保证个大概,在具体场景表示时再写函数来说明.

一点小惊喜

笔者本来想再写一个跑道型图片类型,跑道型图片大概是这样:

这里面有3个跑道型图片(看出网页元素上用得比较多).

本来想单独设计一个跑到类图片的类型,说明两个类型之间可能属性一致但效果不同.现在看来不用那么麻烦了,用圆角矩阵一样可以表示,只要输入的圆角半径等于高度的一半就可以了

//生成一个跑道型图片
//长度1000,高度500,半径250的半圆形跑道图片,全黑色
Fillet_Matrix Semi-circular_runway(1000,500,0,0,0,250);

小结

半规则图形是一个抛砖引玉的思路.常常看看有人问:编程和数学有没有关系?如果写应用,用别人框架里写的算法,那关系不大,编程把逻辑表达清楚就可以了.程序和数学有关系的在底层,比如数据表达方面和其他笔者不知道的领域例如编译器,进程调度算法等.

这段属于闲聊:过去听人说数学专业转程序员较为容易,数学本身就挺抽象,他是将逻辑具体化的学科.写算法的人数学有一定要求.比如画图软件中的"样条曲线",查了一下贝塞尔曲线.写一个贝塞尔曲线的类型,就可以实现样条曲线的效果.所以程序研发里会不会有前端算法工程师这个岗位,专门写图形或者建立3D模型吗?笔者感觉这属于计算机图形学范畴,和编程不大相关,有知道的可以私信笔者,谢谢.