Qt로 문자와 이미지의 혼합 텍스트 그리기

최근 만든 편리 라이브러리의 소개입니다.

텍스트를 그리려면 QPainter::drawText 함수를 사용하지만 텍스트와 동시에 이미지 (아이콘 등)를 함께 그리기를 원합니다. QLabel와 QPushButton는 이미지와 텍스트를 표시하는 기능을 가지고 있지만, QPainter::drawText 함수를 사용하여 텍스트를 그릴 필요가 있고, 드디어 이미지도 함께 그리기를 원할 때, 그리고 기호나 이모티콘 글꼴이 아닌 응용 프로그램에 저장된 리소스의 이미지를 텍스트와 함께 그릴 수 있습니다.

이미지

GUI 프레임워크 라이브러리인 Qt는 이미지를 다루는 기능이 풍부합니다. 용도에 따라 픽스맵, 이미지, 아이콘이 있습니다.
QPixmap pm(":/image/sushi.svg");
그리기에 최적화된 이미지는 QPixmap입니다. 다소 어폐가 있습니다만, Windows에서 말하는 곳의 DDB(디바이스 의존 비트맵)에 가까운 것이라고 말할 수 있을지도 모릅니다.
QImage img(":/image/sushi.svg");
픽셀 지향 이미지는 QImage입니다. scanLine 함수로 픽셀 포인터를 가져 와서 이미지를 직접 다시 쓰는 것과 같은 용도로 이것을 사용합니다. Windows에서 예를 들면 DIB(디바이스 독립 비트맵)에 해당합니다.
QIcon icon(":/image/sushi.svg");
이미지 크기와 가로 세로 비율을 더 잘 느끼는 이미지는 QIcon입니다. Windows HICON보다 다루기 쉽습니다.

어느 것을 사용해도 많은 경우 서로 변환할 수 있으므로 너무 신경쓰지 않아도 됩니다. 일반적으로 이미지를 그리기를 원한다면 QPixmap 또는 QIcon 또는 이미지 처리로 픽셀을 조작하는 경우 QImage를 사용하면 기억해야합니다.

그리려면 QPainter::drawPixmap, QPainter::drawImage 또는 QIcon::paint 함수 중 하나를 사용합니다.

이번에는 QIcon을 이용합니다.

이미지 파일의 형식은 무엇이든 상관 없습니다만, 확대 축소되었을 경우에도 깨끗이 그릴 수 있도록, SVG 형식을 추천합니다.

텍스트

QPainter::drawText 함수로 그립니다. 기본적인 함수이므로 친숙하다고 생각하므로 자세한 내용은 할애하겠습니다.

텍스트와 이미지를 혼합 그리기

QPainter::fontMertics 함수를 사용하면 텍스트를 그리기 위한 좌표 계산에 사용할 수 있는 다양한 정보를 얻을 수 있습니다. 이번 중요한 것은 ascent라는 매개 변수로 텍스트를 그릴 때 기준선에서 문자의 맨 위까지의 높이를 사용합니다.

텍스트와 혼합하여 그리려는 이미지의 크기를 정사각형이라고 가정하면 이미지의 크기는 ascent × ascent입니다. 이미지를 그린 후 다음 좌표를 오른쪽 방향으로 ascent 분 앞으로 이동하여 이미지가 문자인 것처럼 문자 이송 처리를 수행합니다.

프로그램

소스 코드는 GitHub에 넣었습니다.
htps : // 기주 b. 코 m / 소라 미미 / D 라우 모토 xt
Qt Creator에서 DrawEmojiText.pro를 열고 빌드하십시오.

사용법

Qt 응용 프로그램 리소스에 :/image/sushi.svg라는 이미지가 있다고 가정합니다.

다음과 같은 문자열을 준비합니다.
"hoge&:/image/sushi.svg;fuga"이것을 좌표 등과 함께 DrawEmojiText 함수에 건네줍니다.
& 및 ;로 묶인 부분에 리소스 이름을 씁니다. 다른 부분은 일반 텍스트입니다. 텍스트의 &를 그리려면 && 또는 &를 씁니다.

시작 부분의 샘플 이미지는 다음과 같이 그려집니다.

    QString text = "&:/image/cuctus.svg;Hello&:/image/sushi.svg;world&:/image/thinking.svg;";
    DrawEmojiText(&painter, x, y, text);

요약

문자열의 구문 분석과 묘화 하는 좌표 계산이 조금 번거로운 이외는, QPainter::drawText 나 QIcon::paint 를 교대로 호출하고 있을 뿐이므로, 실은 별다른 일은 하고 있지 않습니다.