qt中简单七巧板拼图的实现

源码:https://github.com/abmcar/Neves-rebuild
如果对你有帮助,还望star

前言

这个东西是学期的课程设计,因为最近几天不是很想写题,所以就提前把这个东西做了,这是本人第一次用qt做东西,因此此blog 仅供参考不建议任何人学习

成品图

图案-茶壶选择拼图
移动拼图
变换拼图

要求

要求
要求

思路

利用QPaintEvent在主窗口中绘制图形,用容器(咱用的vector)中的结构体储存每一个图形的坐标、类型、偏转角,图形操作(例如移动,选择,变换)用QAction绑定快捷键实现按键操作,每次修改完参数再update()重新绘制图形。

实现流程

图形绘制

因为QPainter只能在paintEevent中创建(在别的地方麻烦),所以我的操作是遍历结构体容器,根据类型再进行下一步操作
其中elementList是结构体Vector容器,paintObject是结构体,rota是偏转角

void MainWindow::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter:: Antialiasing, true);//反取样 or 抗锯齿?
    for(int i = 0; i < elementList.size(); i++)//遍历容器
    {
        paintObject nowPaint = elementList[i];
        int nextX = nowPaint.mouseX;
        int nextY = nowPaint.mouseY;
        int nextT = nowPaint.type;
        int nextR = nowPaint.rota;
        int tempX,tempY;
        tempX = nextX;
        tempY = nextY;
        painter.setBrush(elementColor[i+1]);
        painter.translate(nextX,nextY);
        painter.rotate(nextR);
        nextX = nextY = 0;
        if(nextT == 1)
            paintRectangle(&painter,nextX,nextY);
        if(nextT == 2)
            paintTriangle(&painter,nextX,nextY,200,100);
        if(nextT == 3)
            paintTriangle(&painter,nextX,nextY,282,141);
        if(nextT == 4)
            paintTriangle(&painter,nextX,nextY,400,200);
        if(nextT == 5)
            paintParallelogram(&painter,nextX,nextY);
        painter.rotate(-nextR);
        painter.translate(-tempX,-tempY);
    }
}

具体图形

正方形
void MainWindow::paintRectangle(QPainter *painter,int X,int Y)
{
    painter->drawRect(X,Y,141,141);
}
三角形
void MainWindow::paintTriangle(QPainter *painter,int X,int Y,int Height,int Width)
{
    QPainterPath triangle;
    triangle.moveTo(X,Y);
    triangle.lineTo(X+Height/2,Y-Width);
    triangle.lineTo(X+Height,Y);
    triangle.lineTo(X,Y);
    painter->drawPath(triangle);
}
平行四边形
void MainWindow::paintParallelogram(QPainter *painter,int X,int Y)
{
    QPainterPath parallelogram;
    parallelogram.moveTo(X,Y);
    parallelogram.lineTo(X+100,Y-100);
    parallelogram.lineTo(X+300,Y-100);
    parallelogram.lineTo(X+200,Y);
    parallelogram.lineTo(X,Y);
    painter->drawPath(parallelogram);
}

图形颜色

先预处理一遍颜色,用map让每一个拼图对应唯一颜色
然后在遍历容器进行具体绘制是设置颜色
elementColor是<int,QColor>的映射

预处理

这个QColor开始不会用,写的应该有些复杂

void MainWindow::preworkColor()
{
    QColor red,yellow,green,cyan,blue,violet,orange;
    red.setRed(255);
    yellow.setRed(255),yellow.setGreen(255);
    green.setGreen(255);
    cyan.setGreen(255),cyan.setBlue(255);
    blue.setBlue(255);
    violet.setRed(255),violet.setBlue(255);
    orange.setRed(255),orange.setGreen(165);
    elementColor[1] = red;
    elementColor[2] = yellow;
    elementColor[3] = green;
    elementColor[4] = cyan;
    elementColor[5] = blue;
    elementColor[6] = violet;
    elementColor[7] = orange;
}
染色

因为vector是从0开始的,所以是i+1

for(遍历容器)
	//do something
	painter.setBrush(elementColor[i+1]);
	//paintElement

图形旋转

利用painter的translate设置坐标原点,然后用rotate旋转坐标轴,绘制图形,复位

for(遍历容器)
	//do something
    painter.translate(nextX,nextY);
    painter.rotate(nextR);
    //paintElement
    painter.translate(-nextX,-nextY);
    painter.rotate(-nextR);

值得注意的是,我们定义图形的坐标为原点后,之后绘制图形的坐标应当为(0,0),而且在复位时,应当按照类似“先进先出”的顺序复位

拼图选择

定义一个nowSelect储存当前选择的拼图
当QAction触发信号时改变nowSelect的值
信号:triggered()
槽:

void MainWindow::on_action_select1_triggered()
{
    nowSelect = 1;
}

拼图操作

与拼图的选择类似,当QAction触发信号时改变当前选择的拼图的属性,改变完update()更新绘制
同样因为vector从0开始,所以下标 [nowSelect-1] 对应的才是第nowSelect个拼图

移动:

void MainWindow::on_action_moveUp_triggered()
{
    elementList[nowSelect-1].mouseY -= 25;
    update();
}

变换:

void MainWindow::on_action_elementTypeChange_triggered()
{
    elementList[nowSelect-1].type++;
    if(elementList[nowSelect-1].type == 6)
        elementList[nowSelect-1].type = 1;
   update();
}

旋转:

void MainWindow::on_action_elementRotateChange_triggered()
{
    elementList[nowSelect-1].rota += 45;
    if(elementList[nowSelect-1].rota >= 360)
        elementList[nowSelect-1].rota -= 360;
    update();
}

文件操作

文件格式

第一行应该有一个 n 表示图形数量(虽然七巧板是7个拼图,但刚开始做的是类似画图的东西,因此没有限制数量)
接下来n行,每行有4个数 a b c d
a 表示拼图类型
b 表示拼图的x轴坐标
c 表示拼图的y轴坐标
d 表示拼图的旋转角

打开文件

先用QFileDialog获取文件路径,之后就是常规的文件读取了

void MainWindow::on_action_openFile_triggered()
{
    QString path = QFileDialog::getOpenFileName(this,
                                                tr("Open File"),
                                                ".",
                                                tr("Text Files(*.txt)"));
    if(!path.isEmpty())
    {
        QFile file(path);
        file.open(QIODevice::WriteOnly | QIODevice::Text);
        elementList.clear();
        QTextStream in(&file);
        int totNum;
        in >> totNum;
        for(int i = 0; i < totNum; i++)
        {
            paintObject tempObject;
            in >> tempObject.type >> tempObject.mouseX >> tempObject.mouseY >> tempObject.rota;
            elementList.push_back(tempObject);
        }
        file.close();
        update();
    }
    else
    {
        QMessageBox::warning(this, tr("Path"),
                             tr("You did not select any file."));
    }
}

保存文件

同样是用QFileDialog获取文件路径

void MainWindow::on_action_saveFile_triggered()
{
    QString path = QFileDialog::getSaveFileName(this,
                                                tr("Open File"),
                                                ".",
                                                tr("Text Files(*.txt)"));
    if(!path.isEmpty())
    {
        QFile file(path);
        file.open(QIODevice::WriteOnly | QIODevice::Text);
        QTextStream out(&file);
        out << elementList.size() << endl;
        for(int i = 0; i < elementList.size(); i++)
            out << elementList[i].type << " " << elementList[i].mouseX << " " << elementList[i].mouseY << " " << elementList[i].rota << endl;
        file.close();
    }
    else
    {
        QMessageBox::warning(this, tr("Path"),
                             tr("You did not select any file."));
    }
}

预设图案及初始图案

预设和初始的图案均按照格式储存
利用不同QAction传递的不同参数打开不同的预设图案
预设图案也是类似的道理,在执行构造函数的时候打开文件
值得注意的是,我们的预设图案应当储存在项目的资源库中方便调用(防止篡改

资源库相关

创建资源库

1.在项目文件夹创建qrc文件
qrc

2.编辑qrc文件
用记事本打开
添加以下内容

<RCC>
    <qresource prefix="/">
        <file>Config/finishNeves.txt</file>
    </qresource>
</RCC>

其中 Config/finishNeves.txt 便是我们要添加的资源的路径
其实推荐使用notepad++打开
notepad++

使用资源

右键资源库中的文件 可以直接获取文件路径
path

窗口图标的添加

先把图标文件(XX.ico)扔进资源库,之后再窗口的构造函数中调用 setWindowIcon 即可
在这里插入图片描述

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    setWindowTitle("Neves");
    setWindowIcon(QIcon(":/Config/Neves.ico"));
    preworkColor();
    readConfig(1);
    resize(1280,720);
}

顺带一提,setWindowTitle 可以设置窗口标题,resize 可以设置窗口大小。
效果图:
效果1
在这里插入图片描述

文件图标的添加

回到项目文件夹 复制你的文件图标(XX.ico)进来,然后再创建一个XX.rc的文件
在这里插入图片描述
编辑XX.rc文件
在这里插入图片描述

IDI_ICON1   ICON   DISCARDABLE   "XX.ico"

回到qt creator里 打开项目的pro文件(xx.pro)
到末尾添加

RC_FILE = XX.rc

在这里插入图片描述

总结

个人感觉这个七巧板还是比较好做的,虽然需要baidu很多前置知识,但入了门(真的吗?)后会发现轮子真是太好用了,无脑写就行了(比写题爽~),但写之前应当对整个流程有一个大概的了解,不然很可能会出现牵一发而动全身的情况

因为多文件以及ui类的特殊性就不放代码了,但仍希望大家能多多指正,因为自己本身也是第一次接触qt这种东西,难免会有一些片面的理解,见谅,见谅

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Abmcar

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值