案例分析2：大球自转+小球公转+移动

作者: 致青春_bf42 | 来源:发表于2020-07-19 17:52 被阅读0次

案例09：球体世界
OpenGL案例08：球体世界
案例分析2：大球自转+小球公转+移动
案例分析5：OpenGL下的球体世界
案例06：大球自转+小球公转+移动
OpenGL案例05：大球自转+小球公转+移动
OpenGL纹理综合案例
03源码--007--纹理应用：球体世界
7-1.OpenGL综合案例(大球自转，小球公转)
OpenGL综合案例(大球自转，小球公转)

最终效果

这次利用前面学过的知识来完成一个综合项目，在一个场景中绘制地板、大球、小球、公转自转和相机的移动。

Jul-19-2020 11-32-07.gif

对应代码地址大球自转+小球公转+移动。

整体流程如下

2251862-18644667721e8e87.png

其中，比较重要的逻辑都在以下三个函数中

SetupRC函数
RenderScene函数
SpecialKeys函数

下面来详细说说整体的效果的实现，可以大致分为4部分

绘制地板
绘制打球（自转）
绘制小球（包含50个静态小球+1个围绕大球公转的动态小球）
移动（特殊键位上下左右触发）

1. 准备工作

int main(int argc,char* argv[])
{
    //设置当前工作目录，针对MAC OS X
    gltSetWorkingDirectory(argv[0]);
    //初始化GLUT库
    glutInit(&argc, argv);
    //申请一个颜色缓存区、深度缓存区、双缓存区、模板缓存区
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH | GLUT_STENCIL);
    //设置window 的尺寸
    glutInitWindowSize(800, 600);
    //创建window的名称
    glutCreateWindow("OpenGL SphereWorld");
    //注册回调函数（改变尺寸）
    glutReshapeFunc(ChangeSize);
    //特殊键位函数（上下左右）
    glutSpecialFunc(SpecialKeys);
    //显示函数
    glutDisplayFunc(RenderScene);
    
    //判断一下是否能初始化glew库，确保项目能正常使用OpenGL 框架
    GLenum err = glewInit();
    if (GLEW_OK != err) {
        fprintf(stderr, "GLEW Error: %s\n", glewGetErrorString(err));
        return 1;
    }
    
    //绘制
    SetupRC();
    
    //runloop运行循环
    glutMainLoop();
    return 0;
}

// 窗口已更改大小，或刚刚创建。无论哪种情况，我们都需要
// 使用窗口维度设置视口和投影矩阵.
void ChangeSize(int nWidth, int nHeight)
{
    //1.防止h变为0
    if(nHeight == 0)
        nHeight = 1;
    
    //2.设置视口窗口尺寸
    glViewport(0, 0, nWidth, nHeight);
    
    //3.创建投影矩阵，并将它载入投影矩阵堆栈中
    //参数1：垂直方向上的视场角度
    //参数2：视口纵横比 = w/h
    //参数3：近裁剪面距离
    //参数4：远裁剪面距离
    viewFrustum.SetPerspective(35.0f, float(nWidth) / float(nHeight), 1.0f, 100.0f);
    
    //4.把透视矩阵加载到透视矩阵对阵中
    projectionMatrix.LoadMatrix(viewFrustum.GetProjectionMatrix());
    
    
    //5.设置变换管道以使用两个矩阵堆栈（变换矩阵modelViewMatrix ，投影矩阵projectionMatrix）
    //初始化GLGeometryTransform 的实例transformPipeline.通过将它的内部指针设置为模型视图矩阵堆栈 和 投影矩阵堆栈实例，来完成初始化
    //当然这个操作也可以在SetupRC 函数中完成，但是在窗口大小改变时或者窗口创建时设置它们并没有坏处。而且这样可以一次性完成矩阵和管线的设置。
    transformPipeline.SetMatrixStacks(modelViewMatrix, projectionMatrix);
}

2. 绘制地板

SetupRC函数：准备地板的顶点数据

    //1.初始化背景
    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    //初始化着色器管理器
    shaderManager.InitializeStockShaders();
    
    //2.开启深度测试
    glEnable(GL_DEPTH_TEST);
    
    //3.设置地板的顶点数据 设置顶点通过线条连接 数量324
    floorBatch.Begin(GL_LINES, 324);
    for(GLfloat x = -20.0; x <= 20.0f; x+= 0.5) {
        floorBatch.Vertex3f(x, -0.55f, 20.0f);
        floorBatch.Vertex3f(x, -0.55f, -20.0f);
        
        floorBatch.Vertex3f(20.0f, -0.55f, x);
        floorBatch.Vertex3f(-20.0f, -0.55f, x);
    }
    floorBatch.End();

RenderScene函数：利用平面着色器绘制地板

 //清楚颜色缓存区和深度缓存区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    //压栈 ->  进行多个操作 单元矩阵 -> 旋转 -> 平移 -> 缩放 -> 出栈
    modelViewMatrix.PushMatrix();
    
    //加入观察者 平移10步(地板,大球,小球,小小球)
    M3DMatrix44f mCamera;
    cameraFrame.GetCameraMatrix(mCamera);
    modelViewMatrix.PushMatrix(mCamera);
    
    ///---------  首先绘制地板 --------------------
    //1.颜色值(地板,大球,小球颜色)
    static GLfloat vFloorColor[] = { 0.0f, 1.0f, 0.0f, 1.0f};
    //2.绘制地板
    shaderManager.UseStockShader(GLT_SHADER_FLAT,transformPipeline.GetModelViewProjectionMatrix(),vFloorColor);
    //3.开始绘制
    floorBatch.Draw();

两个函数此时的流程图大致如下

2251862-0e4a0a35260d4cdd.png

3. 绘制大球

在地板绘制完成的基础上，绘制大球，并实现其自转功能，主要步骤如下

SetupRC函数：利用系统模型类创建大球

  //4.设置大球模型
    //参数1：球批次类
    //参数2：半径
    //参数3：三角形数量
    //参数4：三角形数量
    gltMakeSphere(torusBatch, 0.4f, 40, 80);

RenderScene函数：分为三部分
- 设置定时器：基于时间的变化，记录当前时间的角度
- 设置大球变换（仅平移一次，并随定时器旋转）及绘制大球
- 开启定时器：通过提交重新渲染请求，实现定时器触发的效果

    /// -------------- 绘制大球 ----------------
    //1.大球颜色值(地板,大球,小球颜色)
    static GLfloat vTorusColor[] = { 1.0f, 0.0f, 0.0f, 1.0f };
    //2.基于时间动画，因为大球要自转所以要加定时器
    static CStopWatch    rotTimer;
    float yRot = rotTimer.GetElapsedSeconds() * 60.0f;
    //3.获取光源位置
    M3DVector4f vLightPos = {0.0f,10.0f,5.0f,1.0f};
    //4.使得大球位置平移(3.0)向屏幕里面
    modelViewMatrix.Translate(0.0f, 0.0f, -3.0f);
    //5.再次压栈(复制栈顶)，是因为自转要一直自转，而平移只会一次，所以要再次压栈
    modelViewMatrix.PushMatrix();
    //6.大球自转
    modelViewMatrix.Rotate(yRot, 0.0f, 1.0f, 0.0f);
    //7.指定合适的着色器(点光源着色器)
    shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, transformPipeline.GetModelViewMatrix(),
                                 transformPipeline.GetProjectionMatrix(), vLightPos, vTorusColor);
    torusBatch.Draw();
    //8.绘制完毕则Pop
    modelViewMatrix.PopMatrix();

两个函数的流程图如下，图中红框部分流程均与大球相关

2251862-929dee270645c7be.png

大球变换的分析如下

Translate：目的是为了更好的观察的大球，因为大球创建时默认是在（0，0，0）原点位置，当前的观察者也处于原点位置，不便于观察
PushMatrix：拷贝矩阵堆栈栈顶并压栈，此时只需要将大球平移一次，然后在平移后坐标基础上围绕y轴旋转，实现自转
Rotate：大球围绕y轴旋转，实现自转

4. 绘制小球

在绘制完大球的基础上，继续绘制小球，以及动态围绕大球转

SetupRC函数：初始化小球数据

  //5.设置小球球模型
    gltMakeSphere(sphereBatch, 0.1f, 30, 60);
    //随机位置放置小球球,因为小球数量很多，所以随机放置小球
    for (int i = 0; i < NUM_SPHERES; i++) {
        
        //y轴不变，X,Z产生随机值
        GLfloat x = ((GLfloat)((rand() % 400) - 200 ) * 0.1f);
        GLfloat z = ((GLfloat)((rand() % 400) - 200 ) * 0.1f);
        
        //在y方向，将球体设置为0.0的位置，这使得它们看起来是飘浮在眼睛的高度
        //对spheres数组中的每一个顶点，设置顶点数据
        spheres[i].SetOrigin(x, 0.0f, z);
    }

RenderScene函数：绘制静态+动态小球
- 绘制50个静态小球：每绘制一个小球都需要push和pop
- 矩阵堆栈记录平移+旋转的变换
- 绘制动态小球

    //-------------- 绘制小球 -------------
    //1.大球颜色值(地板,大球,小球颜色)
    static GLfloat vSphereColor[] = { 0.0f, 0.0f, 1.0f, 1.0f};
    //画多个小球小球
    for (int i = 0; i < NUM_SPHERES; i++) {
        modelViewMatrix.PushMatrix();
        //获取新的位置
        modelViewMatrix.MultMatrix(spheres[i]);
        shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, transformPipeline.GetModelViewMatrix(),
                                     transformPipeline.GetProjectionMatrix(), vLightPos, vSphereColor);
        sphereBatch.Draw();
        modelViewMatrix.PopMatrix();
        
    }
    //2. 让一个小篮球围绕大球公众自转
    modelViewMatrix.Rotate(yRot * -2.0f, 0.0f, 1.0f, 0.0f);
    modelViewMatrix.Translate(0.8f, 0.0f, 0.0f);
    shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF,transformPipeline.GetModelViewMatrix(),transformPipeline.GetProjectionMatrix(),vLightPos,vSphereColor);
    sphereBatch.Draw();

注：这里的rotate+tranalate的顺序是不能互换的，因为矩阵相乘是叉乘，不满足交换律，如果互换了得到的是另一种结果，经过测试，如果顺序是tranalate+rotate，此时的小球是县移动后旋转，意味着小球位置变换后，是在原地实现的自转。具体的可以自己修改代码试试。

6. 移动

只需要在增加特殊键位的移动即可，此时的移动是作用于所有图形的，所以需要在绘制图形前增加一个观察者，用于记录所有图形的变换

RenderScene函数：设置加入观察着

    //加入观察者 平移10步(地板,大球,小球,小小球)
    M3DMatrix44f mCamera;
    cameraFrame.GetCameraMatrix(mCamera);
    modelViewMatrix.PushMatrix(mCamera);

SpecialKeys函数：特殊键位处理（上、下、左、右移动）进行旋转

void SpecialKeys(int key, int x, int y)
{
    
    float linear = 0.1f;
    //旋转度数
    float angular = float(m3dDegToRad(5.0f));
    
    if (key == GLUT_KEY_UP) {
        //MoveForward 平移
        cameraFrame.MoveForward(linear);
    }
    if (key == GLUT_KEY_DOWN) {
        cameraFrame.MoveForward(-linear);
    }
    
    if (key == GLUT_KEY_LEFT) {
        //RotateWorld 旋转
        cameraFrame.RotateWorld(angular, 0.0f, 1.0f, 0.0f);
    }
    
    if (key == GLUT_KEY_RIGHT) {
        cameraFrame.RotateWorld(-angular, 0.0f, 1.0f, 0.0f);
    }
}

注：入栈相机矩阵的时机
如果入栈在地板绘制之后，那么在相机移动的时候，地板是没有和相机矩阵发生计算的，所以看着就像没动一样，很不自然。所以，相机矩阵入栈，一定是要在绘制开始的最前面。

完整代码案例

#include "GLTools.h"
#include "GLShaderManager.h"
#include "GLFrustum.h"
#include "GLBatch.h"
#include "GLMatrixStack.h"
#include "GLGeometryTransform.h"
#include "StopWatch.h"

#include <math.h>
#include <stdio.h>

#ifdef __APPLE__
#include <glut/glut.h>
#else
#define FREEGLUT_STATIC
#include <GL/glut.h>
#endif

/*
 GLMatrixStack 变化管线使用矩阵堆栈
 
 GLMatrixStack 构造函数允许指定堆栈的最大深度、默认的堆栈深度为64.这个矩阵堆在初始化时已经在堆栈中包含了单位矩阵。
 GLMatrixStack::GLMatrixStack(int iStackDepth = 64);
 
 //通过调用顶部载入这个单位矩阵
 void GLMatrixStack::LoadIndentiy(void);
 
 //在堆栈顶部载入任何矩阵
 void GLMatrixStack::LoadMatrix(const M3DMatrix44f m);
 */
////设置角色帧，作为相机
GLFrame             viewFrame;
//使用GLFrustum类来设置透视投影
//001--综合训练(地板)
GLShaderManager        shaderManager;            // 着色器管理器
GLMatrixStack        modelViewMatrix;        // 模型视图矩阵
GLMatrixStack        projectionMatrix;        // 投影矩阵
GLFrustum            viewFrustum;            // 视景体
GLGeometryTransform    transformPipeline;        // 几何图形变换管道

GLTriangleBatch        torusBatch;             //大球
GLTriangleBatch     sphereBatch;            //小球
GLBatch                floorBatch;          //地板


//角色帧 照相机角色帧
GLFrame             cameraFrame;

//**4、添加附加随机球
#define NUM_SPHERES 50
GLFrame spheres[NUM_SPHERES];

// 此函数在呈现上下文中进行任何必要的初始化。.
// 这是第一次做任何与opengl相关的任务。
void SetupRC()
{
    //1.初始化背景
    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    //初始化着色器管理器
    shaderManager.InitializeStockShaders();
    
    //2.开启深度测试
    glEnable(GL_DEPTH_TEST);
    
    //3.设置地板的顶点数据 设置顶点通过线条连接 数量324
    floorBatch.Begin(GL_LINES, 324);
    for(GLfloat x = -20.0; x <= 20.0f; x+= 0.5) {
        floorBatch.Vertex3f(x, -0.55f, 20.0f);
        floorBatch.Vertex3f(x, -0.55f, -20.0f);
        
        floorBatch.Vertex3f(20.0f, -0.55f, x);
        floorBatch.Vertex3f(-20.0f, -0.55f, x);
    }
    floorBatch.End();
    
    //4.设置大球模型
    //参数1：球批次类
    //参数2：半径
    //参数3：三角形数量
    //参数4：三角形数量
    gltMakeSphere(torusBatch, 0.4f, 40, 80);
    
    
    //5.设置小球球模型
    gltMakeSphere(sphereBatch, 0.1f, 30, 60);
    //随机位置放置小球球,因为小球数量很多，所以随机放置小球
    for (int i = 0; i < NUM_SPHERES; i++) {
        
        //y轴不变，X,Z产生随机值
        GLfloat x = ((GLfloat)((rand() % 400) - 200 ) * 0.1f);
        GLfloat z = ((GLfloat)((rand() % 400) - 200 ) * 0.1f);
        
        //在y方向，将球体设置为0.0的位置，这使得它们看起来是飘浮在眼睛的高度
        //对spheres数组中的每一个顶点，设置顶点数据
        spheres[i].SetOrigin(x, 0.0f, z);
    }
    
}

//渲染场景
void RenderScene()
{
    
    //清楚颜色缓存区和深度缓存区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    //压栈 ->  进行多个操作 单元矩阵 -> 旋转 -> 平移 -> 缩放 -> 出栈
    modelViewMatrix.PushMatrix();
    
    //加入观察者 平移10步(地板,大球,小球,小小球)
    M3DMatrix44f mCamera;
    cameraFrame.GetCameraMatrix(mCamera);
    modelViewMatrix.PushMatrix(mCamera);
    
    ///---------  首先绘制地板 --------------------
    //1.颜色值(地板,大球,小球颜色)
    static GLfloat vFloorColor[] = { 0.0f, 1.0f, 0.0f, 1.0f};
    //2.绘制地板
    shaderManager.UseStockShader(GLT_SHADER_FLAT,transformPipeline.GetModelViewProjectionMatrix(),vFloorColor);
    //3.开始绘制
    floorBatch.Draw();
    
    /// -------------- 绘制大球 ----------------
    //1.大球颜色值(地板,大球,小球颜色)
    static GLfloat vTorusColor[] = { 1.0f, 0.0f, 0.0f, 1.0f };
    //2.基于时间动画，因为大球要自转所以要加定时器
    static CStopWatch    rotTimer;
    float yRot = rotTimer.GetElapsedSeconds() * 60.0f;
    //3.获取光源位置
    M3DVector4f vLightPos = {0.0f,10.0f,5.0f,1.0f};
    //4.使得大球位置平移(3.0)向屏幕里面
    modelViewMatrix.Translate(0.0f, 0.0f, -3.0f);
    //5.再次压栈(复制栈顶)，是因为自转要一直自转，而平移只会一次，所以要再次压栈
    modelViewMatrix.PushMatrix();
    //6.大球自转
    modelViewMatrix.Rotate(yRot, 0.0f, 1.0f, 0.0f);
    //7.指定合适的着色器(点光源着色器)
    shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, transformPipeline.GetModelViewMatrix(),
                                 transformPipeline.GetProjectionMatrix(), vLightPos, vTorusColor);
    torusBatch.Draw();
    //8.绘制完毕则Pop
    modelViewMatrix.PopMatrix();
    
    //-------------- 绘制小球 -------------
    //1.大球颜色值(地板,大球,小球颜色)
    static GLfloat vSphereColor[] = { 0.0f, 0.0f, 1.0f, 1.0f};
    //画多个小球小球
    for (int i = 0; i < NUM_SPHERES; i++) {
        modelViewMatrix.PushMatrix();
        //获取新的位置
        modelViewMatrix.MultMatrix(spheres[I]);
        shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF, transformPipeline.GetModelViewMatrix(),
                                     transformPipeline.GetProjectionMatrix(), vLightPos, vSphereColor);
        sphereBatch.Draw();
        modelViewMatrix.PopMatrix();
        
    }
    //2. 让一个小篮球围绕大球公众自转
    modelViewMatrix.Rotate(yRot * -2.0f, 0.0f, 1.0f, 0.0f);
    modelViewMatrix.Translate(0.8f, 0.0f, 0.0f);
    shaderManager.UseStockShader(GLT_SHADER_POINT_LIGHT_DIFF,transformPipeline.GetModelViewMatrix(),transformPipeline.GetProjectionMatrix(),vLightPos,vSphereColor);
    sphereBatch.Draw();
    
    
    modelViewMatrix.PopMatrix();
    modelViewMatrix.PopMatrix();
    //执行缓存区交换
    glutSwapBuffers();
    //重新渲染
    glutPostRedisplay();
    
}

//特殊键位处理（上、下、左、右移动） 进行旋转
void SpecialKeys(int key, int x, int y)
{
    
    float linear = 0.1f;
    //旋转度数
    float angular = float(m3dDegToRad(5.0f));
    
    if (key == GLUT_KEY_UP) {
        //MoveForward 平移
        cameraFrame.MoveForward(linear);
    }
    if (key == GLUT_KEY_DOWN) {
        cameraFrame.MoveForward(-linear);
    }
    
    if (key == GLUT_KEY_LEFT) {
        //RotateWorld 旋转
        cameraFrame.RotateWorld(angular, 0.0f, 1.0f, 0.0f);
    }
    
    if (key == GLUT_KEY_RIGHT) {
        cameraFrame.RotateWorld(-angular, 0.0f, 1.0f, 0.0f);
    }
}





// 窗口已更改大小，或刚刚创建。无论哪种情况，我们都需要
// 使用窗口维度设置视口和投影矩阵.
void ChangeSize(int nWidth, int nHeight)
{
    //1.防止h变为0
    if(nHeight == 0)
        nHeight = 1;
    
    //2.设置视口窗口尺寸
    glViewport(0, 0, nWidth, nHeight);
    
    //3.创建投影矩阵，并将它载入投影矩阵堆栈中
    //参数1：垂直方向上的视场角度
    //参数2：视口纵横比 = w/h
    //参数3：近裁剪面距离
    //参数4：远裁剪面距离
    viewFrustum.SetPerspective(35.0f, float(nWidth) / float(nHeight), 1.0f, 100.0f);
    
    //4.把透视矩阵加载到透视矩阵对阵中
    projectionMatrix.LoadMatrix(viewFrustum.GetProjectionMatrix());
    
    
    //5.设置变换管道以使用两个矩阵堆栈（变换矩阵modelViewMatrix ，投影矩阵projectionMatrix）
    //初始化GLGeometryTransform 的实例transformPipeline.通过将它的内部指针设置为模型视图矩阵堆栈 和 投影矩阵堆栈实例，来完成初始化
    //当然这个操作也可以在SetupRC 函数中完成，但是在窗口大小改变时或者窗口创建时设置它们并没有坏处。而且这样可以一次性完成矩阵和管线的设置。
    transformPipeline.SetMatrixStacks(modelViewMatrix, projectionMatrix);
}

int main(int argc,char* argv[])
{
    //设置当前工作目录，针对MAC OS X
    gltSetWorkingDirectory(argv[0]);
    //初始化GLUT库
    glutInit(&argc, argv);
    //申请一个颜色缓存区、深度缓存区、双缓存区、模板缓存区
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH | GLUT_STENCIL);
    //设置window 的尺寸
    glutInitWindowSize(800, 600);
    //创建window的名称
    glutCreateWindow("OpenGL SphereWorld");
    //注册回调函数（改变尺寸）
    glutReshapeFunc(ChangeSize);
    //特殊键位函数（上下左右）
    glutSpecialFunc(SpecialKeys);
    //显示函数
    glutDisplayFunc(RenderScene);
    
    //判断一下是否能初始化glew库，确保项目能正常使用OpenGL 框架
    GLenum err = glewInit();
    if (GLEW_OK != err) {
        fprintf(stderr, "GLEW Error: %s\n", glewGetErrorString(err));
        return 1;
    }
    
    //绘制
    SetupRC();
    
    //runloop运行循环
    glutMainLoop();
    return 0;
}

案例09：球体世界
OpenGL + OpenGL ES +Metal 系列文章汇总本案例是基于案例06：大球自转+小球公转+移动的...
OpenGL案例08：球体世界
本案例是基于案例06：大球自转+小球公转+移动[https://www.jianshu.com/p/4896498...
案例分析2：大球自转+小球公转+移动
最终效果这次利用前面学过的知识来完成一个综合项目，在一个场景中绘制地板、大球、小球、公转自转和相机的移动。对应...
案例分析5：OpenGL下的球体世界
本案例是基于案例分析2：大球自转+小球公转+移动的基础上增加了纹理和镜像显示，最终的效果如图所示对应代码地址纹理...
案例06：大球自转+小球公转+移动
OpenGL + OpenGL ES +Metal 系列文章汇总这个案例是OpenGL中的一个比较经典的综合案例...
OpenGL案例05：大球自转+小球公转+移动
这个案例是OpenGL中的一个比较经典的综合案例，结合了OpenGL中大部分知识点，下面就来了解下这个案例先来看...
OpenGL纹理综合案例
之前用OpenGL做了一个关于大球公转，小球自转的案例，现在我们通过纹理去绘制大球小球和地板，呈现出一个有倒影的画...
03源码--007--纹理应用：球体世界
案例 03源码--004--综合案例：太阳系：讲述了如何绘制一个球体世界，大球自转，小球公转；案例 03源码--0...
7-1.OpenGL综合案例(大球自转，小球公转)
案例的实现效果是在一个场景中绘制地板、大球、小球、公转自转和相机的移动，其中结合了OpenGL中大部分知识点，最终...
OpenGL综合案例(大球自转，小球公转)
在之前我写过几篇博客，关于OpenGL的一些专业名词的介绍，绘制一些简单的图形（三角形，正方形，球，金字塔等图案）...