QTextEdit内拖入图片——QtWidgets

2023-12-01 03:10

本文主要是介绍QTextEdit内拖入图片——QtWidgets,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 前言

QTextEdit是用来编辑和展示文本和富文本的一个控件。我之前一直拿它当纯文本编辑器(QPlainTextEdit)使,一直没啥机会去用一下他的富文本功能。

这次有时间了,准备做一个可以添加图片的编辑框:拖入即可添加到编辑框。

 

效果图

实现的两种方式

有两种方式,一种是根据动作想到了Drag 、Drop来实现;另一种是QTextEdit自带的方法实现。

拖入、落下事件来实现

一般在光标处添加图片,代码为

  QImage img = ...textDocument->addResource(QTextDocument::ImageResource, QUrl("myimage"), img);cursor.insertImage("myimage");

 现在我们重写QTextEdit,命名为MyTextEdit,然后在落下事件中,获取MineData,将其转化为QImage,最后根据上面的方法,也就实现了拖入图片功能了

void MyTextEdit::dragEnterEvent(QDragEnterEvent *e)
{e->acceptProposedAction();
}void MyTextEdit::dropEvent(QDropEvent *e)
{QString url=e->mimeData()->urls().first().toLocalFile();if(e->mimeData()->hasImage()){//这只是个名字 供后续调用的名字QUrl name ( QString ( "file://%1" ).arg ( url ) );//获取图片 并插入到光标处QImage image = QImageReader ( url ).read();QTextDocument * textDocument = this->document();document()->addResource( QTextDocument::ImageResource, name, QVariant ( image ) );textCursor().insertImage(name.toString());}
}

QTextEdit自带的方法实现

后来,我发现QTextEdit对插入图片等数据都有固定的方法可实现。通过方法canInsertFromMimeData对插入的数据进行筛选,

然后在insertFromMimeData方法中根据不同类的数据进行操作添加。不过我经过测试发现:source->hasImage()条件的,不知情况下能满足,经过我拖入的或者复制粘贴的,都不是hasImage(),所以谁能解决我的疑问?!

bool MyTextEdit::canInsertFromMimeData(const QMimeData *source) const
{return source->hasImage()||source->hasUrls()||QTextEdit::canInsertFromMimeData(source);}void MyTextEdit::insertFromMimeData(const QMimeData *source)
{if(source->hasImage()){qDebug()<<"hasImage-------------------";static int i=1;QUrl name(QString("imgName_%1").arg(i));QImage img=qvariant_cast<QImage>(source->imageData());document()->addResource(QTextDocument::ImageResource,name,img);textCursor().insertImage(name.toString());i++;}else if (source->hasUrls()){qDebug()<<"urls-----------------------------";foreach (QUrl url, source->urls()){QFileInfo info(url.toLocalFile());if (QImageReader::supportedImageFormats().contains(info.suffix().toLower().toLatin1())){QImage image(info.filePath());if (!image.isNull()){document()->addResource(QTextDocument::ImageResource, url, image);textCursor().insertImage(url.toString());}}else{QFile file(url.toLocalFile());if(file.open(QIODevice::ReadOnly|QIODevice::Text))textCursor().insertText(file.readAll());}}}else{qDebug()<<"insertFromMimeData--------------------";QTextEdit::insertFromMimeData(source);}}

官方源码说明 

我在QTextEdit看到了以下一段话,解释了我以上两个方法的可行性:

QTextEdit also supports custom drag and drop behavior. By default, QTextEdit will insert plain text, HTML and rich text when the user drops data of these MIME types onto a document. Reimplement canInsertFromMimeData() and insertFromMimeData() to add support for additional MIME types.

还有我很好奇,QTextEdit底层是如何写的canInsertFromMimeDatainsertFromMimeData方法:它是另写了一个控制类QWidgetTextControl来操作,从以下源码中,我们可以清楚的看到它能够支持什么类型插入,还有根据不同的数据类型,进行的不同的处理,这些都是默认自带的。

bool QWidgetTextControl::canInsertFromMimeData(const QMimeData *source) const
{Q_D(const QWidgetTextControl);if (d->acceptRichText)return (source->hasText() && !source->text().isEmpty())|| source->hasHtml()|| source->hasFormat(QLatin1String("application/x-qrichtext"))|| source->hasFormat(QLatin1String("application/x-qt-richtext"));elsereturn source->hasText() && !source->text().isEmpty();
}void QWidgetTextControl::insertFromMimeData(const QMimeData *source)
{Q_D(QWidgetTextControl);if (!(d->interactionFlags & Qt::TextEditable) || !source)return;bool hasData = false;QTextDocumentFragment fragment;
#ifndef QT_NO_TEXTHTMLPARSERif (source->hasFormat(QLatin1String("application/x-qrichtext")) && d->acceptRichText) {// x-qrichtext is always UTF-8 (taken from Qt3 since we don't use it anymore).const QString richtext = QLatin1String("<meta name=\"qrichtext\" content=\"1\" />")+ QString::fromUtf8(source->data(QLatin1String("application/x-qrichtext")));fragment = QTextDocumentFragment::fromHtml(richtext, d->doc);hasData = true;} else if (source->hasHtml() && d->acceptRichText) {fragment = QTextDocumentFragment::fromHtml(source->html(), d->doc);hasData = true;} else {QString text = source->text();if (!text.isNull()) {fragment = QTextDocumentFragment::fromPlainText(text);hasData = true;}}
#elsefragment = QTextDocumentFragment::fromPlainText(source->text());
#endif // QT_NO_TEXTHTMLPARSERif (hasData)d->cursor.insertFragment(fragment);ensureCursorVisible();
}

还有就是QTextEdit支持剪贴板(clipboard)的,从源码中,你可以看到它对复制粘贴等的一系列处理。 这个我就不列举源码了。

结束语 

感觉每次深入研究一个经常用的小控件,都收获满满(*^▽^*)!

 

这篇关于QTextEdit内拖入图片——QtWidgets的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/439564

相关文章

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中,在进行一些平板等默认横屏的设备开发的过程中,需要在进入camera2的 时候,默认预览图像也是需要横屏显示的,在上一篇已经实现了横屏预览功能,然后发现横屏预览后,拍照保存的图片 依然是竖屏的,所以说同样需要将图片也保存为横屏图标了,所以就需要看下mtk的camera2的相关横屏保存图片功能, 如何实现实现横屏保存图片功能 如图所示: 2.mtk

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

研究人员在RSA大会上演示利用恶意JPEG图片入侵企业内网

安全研究人员Marcus Murray在正在旧金山举行的RSA大会上公布了一种利用恶意JPEG图片入侵企业网络内部Windows服务器的新方法。  攻击流程及漏洞分析 最近,安全专家兼渗透测试员Marcus Murray发现了一种利用恶意JPEG图片来攻击Windows服务器的新方法,利用该方法还可以在目标网络中进行特权提升。几天前,在旧金山举行的RSA大会上,该Marcus现场展示了攻击流程,

恶意PNG:隐藏在图片中的“恶魔”

&lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/bffb187dc3546c6c5c6b8aa18b34b962.jpeg&quot; title=&quot;214201hhuuhubsuyuukbfy_meitu_1_meitu_2.jpg&quot;/&gt;&lt;/strong&gt;&lt;/span&gt;&lt;

PHP抓取网站图片脚本

方法一: <?phpheader("Content-type:image/jpeg"); class download_image{function read_url($str) { $file=fopen($str,"r");$result = ''; while(!feof($file)) { $result.=fgets($file,9999); } fclose($file); re

(入门篇)JavaScript 网页设计案例浅析-简单的交互式图片轮播

网页设计已经成为了每个前端开发者的必备技能,而 JavaScript 作为前端三大基础之一,更是为网页赋予了互动性和动态效果。本篇文章将通过一个简单的 JavaScript 案例,带你了解网页设计中的一些常见技巧和技术原理。今天就说一说一个常见的图片轮播效果。相信大家在各类电商网站、个人博客或者展示页面中,都看到过这种轮播图。它的核心功能是展示多张图片,并且用户可以通过点击按钮,左右切换图片。

matplotlib绘图中插入图片

在使用matplotlib下的pyplot绘图时,有时处于各种原因,需要采用类似贴图的方式,插入外部的图片,例如添加自己的logo,或者其他的图形水印等。 一开始,查找到的资料都是使用imshow,但是这会有带来几个问题,一个是图形的原点发生了变化,另外一个问题就是图形比例也产生了变化,当然最大的问题是图形占据了整个绘图区域,完全喧宾夺主了,与我们设想的只在绘图区域中占据很小的一块不相符。 经

react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

1、绑定属性 constructor(){super()this.state={name:"张三",title:'我是一个title'}}render() {return (<div><div>aaaaaaa{this.state.name}<div title={this.state.title}>我是一个title</div></div></div>)} 绑定属性直接使用花括号{}   注