Подробно о TPngImage

@BRcr · Регистрация: 03.02.2011

Студворк — интернет-сервис помощи студентам

Всем привет

Никак не могу разобраться, как использовать TPngImage в связке с TImage.

Встроенная справка на эту тему в Rad XE состоит из нескольких предложений, без примеров и каких бы то ни было подробностей. Статей или литературы тоже не нашел - совсем печально.

Если рисовать методом DrawUsingPixelInformation на канве img->Canvas, то рисуется белая заливка и только потом прозрачная png; если рисовать на канве img->Picture->Bitmap->Canvas, то вообще ничего не рисуется. Если же использовать канву промежуточного TBitmap tmp, а потом копировать img->Picture->Bitmap->Assign(tmp), то опять же белая заливка, поверх нее png.

Сработали только три способа:

C++
1
2
3
img->Picture->Bitmap->Assign( png ); //1 
img->Picture->Assign( png ); //2 
img->Picture->Graphic = png //3

, причем только первый оставляет нам Bitmap внутри TImage.
Но потом поверх нарисованного у меня никак не выходит наложить другой png, вот в чем вся загвоздка.

Конечная же цель такая:
1) есть у нас новенький TImage - прозрачный, не видать его совсем;
2) рисуем на нем png с частичной прозрачностью, используя альфа-канал каждого пикселя;
3) таким же образом рисуем поверх уже нарисованного еще один png так, чтобы осталось видимым то, что уже нарисовано(условно обзовем это маской);
4) стираем все с канвы TImage, возвращая его в начальное состояние - полная прозрачность.

Помогите, кто знает, или, может, литература по теме хорошая есть? Уже задолбался комбинации перебирать

вот тестовый проект, если вдруг кому глянуть захочется...

тест1.rar

@MikeSoft · 28.02.2012, 20:13

BRcr, я так понял, основная ваша проблема - это вопрос "как наложить одно изображение на другое"?
Если да, то накидал вам простенький пример:

C++
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
TPngImage *png1 = new TPngImage();
TPngImage *png2 = new TPngImage();
TPngImage *png3 = new TPngImage();
 
png1->LoadFromFile("C:\\png1.png");
png2->LoadFromFile("C:\\png2.png");
 
png1->Transparent = true;
png2->Transparent = true;
 
Image1->Picture->Bitmap->SetSize(100,100);
Image1->Picture->Bitmap->Canvas->Draw(0,0,png1); // прорисовываем на канву первое изображение со смещением в {0, 0}
Image1->Picture->Bitmap->Canvas->Draw(20,20,png2); // прорисовываем на канву второе изображение со смещением в {20, 20}
Image1->Picture->Bitmap->Transparent = true;
Image1->Picture->Bitmap->TransparentMode = tmAuto;
 
png3->Assign(Image1->Picture->Bitmap);
png3->SaveToFile("C:\\1.png");
Image1->Picture->Bitmap->SaveToFile("C:\\1.bmp");
 
// и когда захочется "убраться за собой" - вызываем:
Image1->Picture->Bitmap->SetSize(0,0);
delete png1;
delete png2;
delete png3;

@BRcr · 28.02.2012, 23:17 **[ТС]**

Огромное спасибо MikeSoft

за две ключевые подсказки:

C++
1
2
Image1->Picture->Bitmap->Transparent = true; // что добивает больше всего - изначально я про это помнил и пробовал, но в процессе перебора комбинаций совсем позабыл :(
Image1->Picture->Bitmap->TransparentMode = tmAuto;

и Image1->Picture->Bitmap->SetSize(0,0), как способ очистки - черт, да я уже голову сломал, как канву чистить, не рисуя на ней... вот ни за что бы сам не догадался, спасибо скромности справки в ХЕ!

Хотя, то, что вы накидали и не сработало в точности, как положено, потребную комбинацию я-таки подобрал и можно подвести итог.

Сперва подгружаем картинки png и выставляем им прозрачность:

C++
1
2
3
4
5
6
    png_base->LoadFromFile( "res_640_btn_GREEN.png" );
    png_hover->LoadFromFile( "hovered_mask.png" );
    png_press->LoadFromFile( "pressed_mask.png" );
    png_base->Transparent = true;
    png_hover->Transparent = true;
    png_press->Transparent = true;

Итак, если делать, как показал MikeSoft:

C++
1
2
3
4
    img->Picture->Bitmap->SetSize( 16, 16 );
    img->Picture->Bitmap->Canvas->Draw( 0, 0, png_base );
    img->Picture->Bitmap->Transparent = true;
    img->Picture->Bitmap->TransparentMode = tmAuto;

то опять-таки рисуется белая заливка и только поверх нее png, что нас не устраивает. Поэтому для самой первой прорисовки мне пришлось делать так:

C++
1
2
3
    img->Picture->Bitmap->Assign( png_base );
    img->Picture->Bitmap->Transparent = true;
    img->Picture->Bitmap->TransparentMode = tmAuto;

Метод копирования Bitmap->Assign( ) сам выставляет размеры Bitmap под истинный размер png, поэтому Bitmap->SetSize( ) не требуется.

Вот после этого уже можно использовать метод Bitmap->Canvas->Draw( )для наложения с полупрозрачностью.
Хотя в этом месте опять небольшие непонятки. И связаны они с размерами TImage : если не менять размер именно image, а только выставить его Left и Top, то полупрозрачное наложение, как и положено, выполнят все эти методы:

C++
1
2
3
png_hover->DrawUsingPixelInformation( img->Picture->Bitmap->Canvas, Point( 0, 0 ) );
png_hover->DrawUsingPixelInformation( img->Canvas, Point( 0, 0 ) );
img->Picture->Bitmap->Canvas->Draw( 0, 0, png_hover );

А если до этого задать размер image->SetBounds( 3, 3, 16, 16 ), то корректно работает только последний метод: img->Picture->Bitmap->Canvas->Draw( ). Метод DrawUsingPixelInformation при этом не рисует вообще ничего, что выглядит странно.

Теперь, если нам требуется убрать наложенную маску png_hover , можно просто снова вызвать копирование:

C++
1
img->Picture->Bitmap->Assign( png_base );

Все, что уже нарисовано, сотрется и нужный png нарисуется, как положено, с прозрачностью.

Если же нужно все затереть, то вызываем img->Picture->Bitmap->SetSize(0,0). Если после этого вызвать копирование img->Picture->Bitmap->Assign( ), то размеры Bitmap, как я уже говорил, установятся в согласие с размерами png и все отобразится. Однако же если попробовать рисовать методом img->Picture->Bitmap->Canvas->Draw( ), то ничего не выйдет, так как этот метод на нулевые размеры Bitmap никак не повлияет.
И вот тут вскрывается самая замечательная штука, касательно метода SetSize( ) - если последовательно вызвать:

C++
1
2
3
img->Picture->Bitmap->SetSize(0,0);
img->Picture->Bitmap->SetSize(100,100);
img->SetBounds(10,10,100,100);

то мы получаем в свое распоряжение совершенно прозрачный TImage нужных нам размеров и дальше уже можем спокойно на нем рисовать в любом месте:

C++
1
2
3
     img->Picture->Bitmap->Canvas->Draw( 0, 0, png_press );
     img->Picture->Bitmap->Canvas->Draw( 30, 30, png_press );
     img->Picture->Bitmap->Canvas->Draw( 10, 10, png_press );

Однако, самую первую прорисовку на новосозданном TImage надо все-таки делать копированием img->Picture->Bitmap->Assign( ), метод SetSize( ) тут уже не поможет - опять все та же белая заливка, будь она неладна!
Поэтому, если работу с TImage надо вести, как предположил MikeSoft, рисованием неких картинок png в разных точках прозрачной канвы, то сперва приходится откопировать на нее либо полностью прозрачную png, либо любую, но потом затереть с помощью SetSize( ). Почему так - не знаю, главное, что работает исправно.

Все работает, все чудно

Удачи наступившим на те же грабли - вам мучиться уже меньше, чем мне.

@MikeSoft · 28.02.2012, 23:27

BRcr, я сделал набросок не задумываясь об прозрачности, т.к посчитал что проблема только в наложении двух изображений!

У класса Graphics::TBitmap есть метод CreateMask. Можно было воспользоваться им

@BRcr · 28.02.2012, 23:38 **[ТС]**

Сообщение от MikeSoft

У класса Graphics::TBitmap есть метод CreateMask. Можно было воспользоваться им

Насколько я понимаю, CreateMask() - функция из Delphi и ее реализации в С++ VCL я так и не нашел. Как ее использовать?

@Avazart · 05.05.2013, 02:31

Ну вообще как я себе представляю все VCL написано на Delphi

Сообщение от BRcr

функция из Delphi и ее реализации в С++ VCL я так и не нашел

Находишь хедер где объявлена, и ищешь файл с тем же именем что хедер только с расширением pas

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

Подробно о TPngImage

Решение

Решение

@MikeSoft 3957 / 1812 / 184 Регистрация: 21.11.2009 Сообщений: 2,540
	28.02.2012, 23:27
	BRcr, я сделал набросок не задумываясь об прозрачности, т.к посчитал что проблема только в наложении двух изображений! У класса Graphics::TBitmap есть метод CreateMask. Можно было воспользоваться им 0