Qt （高仿Visio）流程图组件开发（五）流程图双击编辑图元内容实现

梦醒梦起

已于 2022-11-18 17:08:43 修改

阅读量2.2k

点赞数 4

分类专栏： Qt 文章标签： qt ui 流程图

于 2022-11-14 19:13:08 首次发布

本文链接：https://blog.csdn.net/qq_43793182/article/details/127849623

版权

Qt 专栏收录该内容

20 篇文章 68 订阅

订阅专栏

文章目录

本系列目录
前言
一、实现思路
二、实现步骤
总结

本系列目录

前言

本文主要为流程图添加编辑框功能，双击显示编辑框，输入内容后修改图元显示内容。只是经验分享，描述内容并不绝对，如有误差欢迎指正。

一、实现思路

最开始考虑封装一个自绘的输入框，然后每一个图元对象维护一个输入框，初步实现后发现交互逻辑过多（复制、粘贴，选中文本等等），而且每个图元对象都维护这么一个输入框太过浪费内存，此种方法不可取。接下来就考虑，如果不想浪费内存，就需要全局共用一个输入框，而且为了方便实现最好使用qt原生的QTextEdit类对象，那这样就需要实时计算输入框的弹出位置及其大小，输入框的样式也需要修改。具体效果如下图。
编辑图元

二、实现步骤

创建一个自定义文本编辑框类（CutomTextWdit），自定义信号，在失去焦点时获取文本编辑框内容。修改其样式，禁用滚动条。

CutomTextWdit::CutomTextWdit(QWidget *parent /*= nullptr*/)
	:QTextEdit(parent)
{
	QStringList qss;
	qss.append("QTextEdit{background:rgba(255,255,255,200); border:1px solid rgb(0,0,0);}");
	this->setStyleSheet(qss.join(""));
	this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
}

void CutomTextWdit::focusOutEvent(QFocusEvent *e)
{
	emit FocusOutSignal(this->toPlainText());
	return QTextEdit::focusOutEvent(e);
}

双击，获取点击对象，根据对象获取编辑框位置及大小，这里通过基类中定义的位置接口来计算编辑框矩形的位置，方法很笨重，玩家有新想法可以留言。

// ! [1] 获取点击对象
	QList<QGraphicsItem*> graphics_items = this->selectedItems();
	if (graphics_items.size() != 1)
		return;
	FlowchartGraphicsItem* select_item = QGraphToFlow(graphics_items.at(0));
	if (select_item->GetItemType() == ItemType::Rect)
	{
		// 获取流程矩形
		FlowchartGraphicsRectItem* rect_item = (FlowchartGraphicsRectItem*)select_item;
		// 获取视口中item矩形
		QPointF item_left_top_scene = QPointF(rect_item->GetLeftPoint().x(), rect_item->GetTopPoint().y());
		QPointF item_right_bottom_scene = QPointF(rect_item->GetRightPoint().x(), rect_item->GetBottomPoint().y());
		QPointF item_left_top = widget_->mapFromScene(item_left_top_scene);
		QPointF item_right_bottom = widget_->mapFromScene(item_right_bottom_scene);
		QRectF item_rect = QRectF(item_left_top, item_right_bottom);
		input_widget_->setFixedSize(item_rect.width(), item_rect.height());
		input_widget_->move(item_left_top.toPoint());
		QRectF rect_temp = rect_item->boundingRect();
		input_widget_->setFixedSize(item_rect.width(), item_rect.height());
		input_widget_->move(item_left_top.toPoint());

		input_widget_->show();

		QString item_text = rect_item->GetItemInformation()->item_content_.content_;
		rect_item->SetText("");
		input_widget_->setText(item_text);
	}

场景类（FlowchartScene）下创建编辑框对象，绑定信号，将编辑内容更新到选中图元上。

// 初始化编辑框
void FlowchartScene::InitLineEdit()
{
	input_widget_ = new CutomTextWdit(widget_);
	QStringList qss;
	qss.append("QTextEdit{background:rgba(255,255,255,200); border:1px solid rgb(0,0,0);}");
	input_widget_->setStyleSheet(qss.join(""));
	input_widget_->hide();
	connect(input_widget_, SIGNAL(FocusOutSignal(QString)), this, SLOT(FocusOutSlot(QString)));
}

void FlowchartScene::FocusOutSlot(QString _text)
{
	QList<QGraphicsItem*> graphics_items = this->selectedItems();
	if (graphics_items.size() == 0) {
		input_widget_->hide();
		return;
	}
	FlowchartGraphicsItem* select_item = QGraphToFlow(graphics_items.at(0));
	select_item->SetText(_text);
	input_widget_->hide();
}