在 QScintilla 编辑器中插入图像
Inserting an image in a QScintilla editor
编辑：
标准 QScintilla 软件不支持此功能。但是 Matic Kukovec 进行了一些修改以使其无论如何都能正常工作。他的解决方案在下面的回答中有解释，也在这个网页上：https://qscintilla.com/insert-images/
我想在 QScintilla 编辑器中插入图像。遗憾的是，此类功能不会很快添加到官方 Scintilla 项目中。在 Scintilla-interest-group 上查看此 post：
https://groups.google.com/forum/#!topic/scintilla-interest/Bwr4DY2Pv3Q
所以我必须自己实现它。我试过了。请把下面的代码copy-past改成python-file和运行吧。只需确保您在同一文件夹中有一张 qscintilla_logo.png 图片，大约 80 x 80 像素：
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.Qsci import *
# -----------------------------------
# | A sample of C-code, pasted into |
# | the QScintilla editor |
# -----------------------------------
myCodeSample = r"""#include <stdio.h>
/*
* I want an image
* right here =>
*/
int main()
{
char arr[5] = {'h', 'e', 'l', 'l', 'o'};
int i;
for(i = 0; i < 5; i++) {
printf(arr[i]);
}
return 0;
}""".replace("\n","\r\n")
# --------------------------------------------------
class CustomMainWindow(QMainWindow):
def __init__(self):
super(CustomMainWindow, self).__init__()
# ---------------------------
# | Window setup |
# ---------------------------
# 1. Define the geometry of the main window
# ------------------------------------------
self.setGeometry(300, 300, 800, 400)
self.setWindowTitle("QScintilla Test")
# 2. Create frame and layout
# ---------------------------
self.__frm = QFrame(self)
self.__frm.setStyleSheet("QWidget { background-color: #ffeaeaea }")
self.__lyt = QVBoxLayout()
self.__frm.setLayout(self.__lyt)
self.setCentralWidget(self.__frm)
self.__myFont = QFont("Consolas", 14, weight=QFont.Bold)
self.__myFont.setPointSize(14)
# 3. Place a button
# ------------------
self.__btn = QPushButton("Qsci")
self.__btn.setFixedWidth(50)
self.__btn.setFixedHeight(50)
self.__btn.clicked.connect(self.__btn_action)
self.__btn.setFont(self.__myFont)
self.__lyt.addWidget(self.__btn)
# ---------------------------
# | QScintilla editor setup |
# ---------------------------
# 1. Make instance of QSciScintilla class
# ----------------------------------------
self.__editor = QsciScintilla()
self.__editor.setText(myCodeSample)
self.__editor.setLexer(None)
self.__editor.setUtf8(True) # Set encoding to UTF-8
self.__editor.setFont(self.__myFont) # Can be overridden by lexer
# 2. Create an image
# -------------------
self.__myImg = QPixmap("qscintilla_logo.png")
self.__myImgLbl = QLabel(parent=self.__editor)
self.__myImgLbl.setStyleSheet("QLabel { background-color : white; }");
self.__myImgLbl.setPixmap(self.__myImg)
self.__myImgLbl.move(300,80)
# 3. Add editor to layout
# ------------------------
self.__lyt.addWidget(self.__editor)
self.show()
''''''
def __btn_action(self):
print("Hello World!")
''''''
''' End Class '''
if __name__ == '__main__':
app = QApplication(sys.argv)
QApplication.setStyle(QStyleFactory.create('Fusion'))
myGUI = CustomMainWindow()
sys.exit(app.exec_())
''''''
当 运行 运行 Python 脚本时，您应该得到以下结果：
我实际上是在 编辑器之上添加了一个 QLabel ，并给它一个绝对位置：
self.__myImgLbl = QLabel(parent=self.__editor)
self.__myImgLbl.move(300,80)
很遗憾，向下滚动时图像不会移动：
我想我知道为什么了。让我解释。编辑器是 QsciScintilla class 的对象，它是 QsciScintillaBase 的子class，QAbstractScrollArea 的子class：
我认为成功的关键是将 QLabel 添加到 内部的小部件 QAbstractScrollArea，而不是滚动区域本身。我尝试了几种方法来找到那个小部件，但没有成功。
如果它是 QScrollArea，那么函数 widget() 就足够了。但此功能在 QAbstractScrollArea.
上不可用
编辑 1:
python 代码示例中的编辑器不执行任何语法突出显示，甚至没有行号。那是因为我只想关注实际问题——添加图像。代码示例基于：https://qscintilla.com/an-editor-in-a-gui/
编辑 2:
请不要就在编辑器中插入图像是好是坏发表意见。让我们只关注手头的技术问题。
嗨 Kristof 试试这个（你的例子做了一些修改）：
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.Qsci import *
# -----------------------------------
# | A sample of C-code, pasted into |
# | the QScintilla editor |
# -----------------------------------
myCodeSample = r"""#include <stdio.h>
/*
* I want an image
* right here =>
*/
int main()
{
char arr[5] = {'h', 'e', 'l', 'l', 'o'};
int i;
for(i = 0; i < 5; i++) {
printf(arr[i]);
}
return 0;
}""".replace("\n","\r\n")
# --------------------------------------------------
class MyScintilla(QsciScintilla):
def __init__(self, parent=None):
super().__init__(parent)
self.image = QImage("qscintilla_logo.png")
def paintEvent(self, e):
super().paintEvent(e)
# Get paint rectangle size
current_parent_size = self.size()
image_line = 4
image_column = 17
# Find the paint offset
line_height = 20
font_width = 10
first_visible_line = self.SendScintilla(self.SCI_GETFIRSTVISIBLELINE)
paint_offset_x = image_column * font_width
paint_offset_y = (image_line - first_visible_line) * line_height
# Paint the image
painter = QPainter()
painter.begin(self.viewport())
painter.drawImage(QPoint(paint_offset_x,paint_offset_y), self.image)
painter.end()
class CustomMainWindow(QMainWindow):
def __init__(self):
super(CustomMainWindow, self).__init__()
# ---------------------------
# | Window setup |
# ---------------------------
# 1. Define the geometry of the main window
# ------------------------------------------
self.setGeometry(300, 300, 800, 400)
self.setWindowTitle("QScintilla Test")
# 2. Create frame and layout
# ---------------------------
self.__frm = QFrame(self)
self.__frm.setStyleSheet("QWidget { background-color: #ffeaeaea }")
self.__lyt = QVBoxLayout()
self.__frm.setLayout(self.__lyt)
self.setCentralWidget(self.__frm)
self.__myFont = QFont("Consolas", 14, weight=QFont.Bold)
self.__myFont.setPointSize(14)
# 3. Place a button
# ------------------
self.__btn = QPushButton("Qsci")
self.__btn.setFixedWidth(50)
self.__btn.setFixedHeight(50)
self.__btn.clicked.connect(self.__btn_action)
self.__btn.setFont(self.__myFont)
self.__lyt.addWidget(self.__btn)
# ---------------------------
# | QScintilla editor setup |
# ---------------------------
# 1. Make instance of QSciScintilla class
# ----------------------------------------
self.__editor = MyScintilla()
self.__editor.setText(myCodeSample)
self.__editor.setLexer(None)
self.__editor.setUtf8(True) # Set encoding to UTF-8
self.__editor.setFont(self.__myFont) # Can be overridden by lexer
# 3. Add editor to layout
# ------------------------
self.__lyt.addWidget(self.__editor)
self.show()
''''''
def __btn_action(self):
print("Hello World!")
''''''
''' End Class '''
if __name__ == '__main__':
app = QApplication(sys.argv)
QApplication.setStyle(QStyleFactory.create('Fusion'))
myGUI = CustomMainWindow()
sys.exit(app.exec_())
''''''
它只是子classing QsciScintilla class 并重载它的 paintEvent 方法。
诀窍是获取图像相对于文档视图的坐标。比如我刚才猜到的行高和字宽，大概可以从QScintilla中获取到。
另一件事是我只是用行和列偏移硬编码图像的位置，创建一个编辑器可以自动解析和插入图像的语法可能会很好。
此致
编辑：
标准 QScintilla 软件不支持此功能。但是 Matic Kukovec 进行了一些修改以使其无论如何都能正常工作。他的解决方案在下面的回答中有解释，也在这个网页上：https://qscintilla.com/insert-images/
我想在 QScintilla 编辑器中插入图像。遗憾的是，此类功能不会很快添加到官方 Scintilla 项目中。在 Scintilla-interest-group 上查看此 post：
https://groups.google.com/forum/#!topic/scintilla-interest/Bwr4DY2Pv3Q
所以我必须自己实现它。我试过了。请把下面的代码copy-past改成python-file和运行吧。只需确保您在同一文件夹中有一张 qscintilla_logo.png 图片，大约 80 x 80 像素：
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.Qsci import *
# -----------------------------------
# | A sample of C-code, pasted into |
# | the QScintilla editor |
# -----------------------------------
myCodeSample = r"""#include <stdio.h>
/*
* I want an image
* right here =>
*/
int main()
{
char arr[5] = {'h', 'e', 'l', 'l', 'o'};
int i;
for(i = 0; i < 5; i++) {
printf(arr[i]);
}
return 0;
}""".replace("\n","\r\n")
# --------------------------------------------------
class CustomMainWindow(QMainWindow):
def __init__(self):
super(CustomMainWindow, self).__init__()
# ---------------------------
# | Window setup |
# ---------------------------
# 1. Define the geometry of the main window
# ------------------------------------------
self.setGeometry(300, 300, 800, 400)
self.setWindowTitle("QScintilla Test")
# 2. Create frame and layout
# ---------------------------
self.__frm = QFrame(self)
self.__frm.setStyleSheet("QWidget { background-color: #ffeaeaea }")
self.__lyt = QVBoxLayout()
self.__frm.setLayout(self.__lyt)
self.setCentralWidget(self.__frm)
self.__myFont = QFont("Consolas", 14, weight=QFont.Bold)
self.__myFont.setPointSize(14)
# 3. Place a button
# ------------------
self.__btn = QPushButton("Qsci")
self.__btn.setFixedWidth(50)
self.__btn.setFixedHeight(50)
self.__btn.clicked.connect(self.__btn_action)
self.__btn.setFont(self.__myFont)
self.__lyt.addWidget(self.__btn)
# ---------------------------
# | QScintilla editor setup |
# ---------------------------
# 1. Make instance of QSciScintilla class
# ----------------------------------------
self.__editor = QsciScintilla()
self.__editor.setText(myCodeSample)
self.__editor.setLexer(None)
self.__editor.setUtf8(True) # Set encoding to UTF-8
self.__editor.setFont(self.__myFont) # Can be overridden by lexer
# 2. Create an image
# -------------------
self.__myImg = QPixmap("qscintilla_logo.png")
self.__myImgLbl = QLabel(parent=self.__editor)
self.__myImgLbl.setStyleSheet("QLabel { background-color : white; }");
self.__myImgLbl.setPixmap(self.__myImg)
self.__myImgLbl.move(300,80)
# 3. Add editor to layout
# ------------------------
self.__lyt.addWidget(self.__editor)
self.show()
''''''
def __btn_action(self):
print("Hello World!")
''''''
''' End Class '''
if __name__ == '__main__':
app = QApplication(sys.argv)
QApplication.setStyle(QStyleFactory.create('Fusion'))
myGUI = CustomMainWindow()
sys.exit(app.exec_())
''''''
当 运行 运行 Python 脚本时，您应该得到以下结果：
我实际上是在 编辑器之上添加了一个 QLabel ，并给它一个绝对位置：
self.__myImgLbl = QLabel(parent=self.__editor)
self.__myImgLbl.move(300,80)
很遗憾，向下滚动时图像不会移动：
我想我知道为什么了。让我解释。编辑器是 QsciScintilla class 的对象，它是 QsciScintillaBase 的子class，QAbstractScrollArea 的子class：
我认为成功的关键是将 QLabel 添加到 内部的小部件 QAbstractScrollArea，而不是滚动区域本身。我尝试了几种方法来找到那个小部件，但没有成功。
如果它是 QScrollArea，那么函数 widget() 就足够了。但此功能在 QAbstractScrollArea.
编辑 1:
python 代码示例中的编辑器不执行任何语法突出显示，甚至没有行号。那是因为我只想关注实际问题——添加图像。代码示例基于：https://qscintilla.com/an-editor-in-a-gui/
编辑 2:
请不要就在编辑器中插入图像是好是坏发表意见。让我们只关注手头的技术问题。
嗨 Kristof 试试这个（你的例子做了一些修改）：
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.Qsci import *
# -----------------------------------
# | A sample of C-code, pasted into |
# | the QScintilla editor |
# -----------------------------------
myCodeSample = r"""#include <stdio.h>
/*
* I want an image
* right here =>
*/
int main()
{
char arr[5] = {'h', 'e', 'l', 'l', 'o'};
int i;
for(i = 0; i < 5; i++) {
printf(arr[i]);
}
return 0;
}""".replace("\n","\r\n")
# --------------------------------------------------
class MyScintilla(QsciScintilla):
def __init__(self, parent=None):
super().__init__(parent)
self.image = QImage("qscintilla_logo.png")
def paintEvent(self, e):
super().paintEvent(e)
# Get paint rectangle size
current_parent_size = self.size()
image_line = 4
image_column = 17
# Find the paint offset
line_height = 20
font_width = 10
first_visible_line = self.SendScintilla(self.SCI_GETFIRSTVISIBLELINE)
paint_offset_x = image_column * font_width
paint_offset_y = (image_line - first_visible_line) * line_height
# Paint the image
painter = QPainter()
painter.begin(self.viewport())
painter.drawImage(QPoint(paint_offset_x,paint_offset_y), self.image)
painter.end()
class CustomMainWindow(QMainWindow):
def __init__(self):
super(CustomMainWindow, self).__init__()
# ---------------------------
# | Window setup |
# ---------------------------
# 1. Define the geometry of the main window
# ------------------------------------------
self.setGeometry(300, 300, 800, 400)
self.setWindowTitle("QScintilla Test")
# 2. Create frame and layout
# ---------------------------
self.__frm = QFrame(self)
self.__frm.setStyleSheet("QWidget { background-color: #ffeaeaea }")
self.__lyt = QVBoxLayout()
self.__frm.setLayout(self.__lyt)
self.setCentralWidget(self.__frm)
self.__myFont = QFont("Consolas", 14, weight=QFont.Bold)
self.__myFont.setPointSize(14)
# 3. Place a button
# ------------------
self.__btn = QPushButton("Qsci")
self.__btn.setFixedWidth(50)
self.__btn.setFixedHeight(50)
self.__btn.clicked.connect(self.__btn_action)
self.__btn.setFont(self.__myFont)
self.__lyt.addWidget(self.__btn)
# ---------------------------
# | QScintilla editor setup |
# ---------------------------
# 1. Make instance of QSciScintilla class
# ----------------------------------------
self.__editor = MyScintilla()
self.__editor.setText(myCodeSample)
self.__editor.setLexer(None)
self.__editor.setUtf8(True) # Set encoding to UTF-8
self.__editor.setFont(self.__myFont) # Can be overridden by lexer
# 3. Add editor to layout
# ------------------------
self.__lyt.addWidget(self.__editor)
self.show()
''''''
def __btn_action(self):
print("Hello World!")
''''''
''' End Class '''
if __name__ == '__main__':
app = QApplication(sys.argv)
QApplication.setStyle(QStyleFactory.create('Fusion'))
myGUI = CustomMainWindow()
sys.exit(app.exec_())
''''''
它只是子classing QsciScintilla class 并重载它的 paintEvent 方法。 诀窍是获取图像相对于文档视图的坐标。比如我刚才猜到的行高和字宽，大概可以从QScintilla中获取到。 另一件事是我只是用行和列偏移硬编码图像的位置，创建一个编辑器可以自动解析和插入图像的语法可能会很好。
此致