Как открыть графический редактор в visual studio
This article describes how to work with the Visual Studio Image Editor to view and modify texture and image resources.
You can use the Image Editor to work with the kinds of rich texture and image formats that are used in DirectX app development. This includes support for popular image file formats and color encodings, features such as alpha-channels and MIP-mapping, and many of the highly compressed, hardware-accelerated texture formats that DirectX supports.
Supported formats
The Image Editor supports the following image formats:
Format name | File Name Extension |
---|---|
Portable Network Graphics | .jpg |
JPEG | .jpg, .jpg, .jpe, .jfif |
Direct Draw Surface | .dds |
Graphics Interchange Format | .jpg |
Bitmap | .bmp, .dib |
Tagged Image File Format | .tif, .tiff |
TGA (Targa) | .tga |
Get started
This section describes how to add an image to your Visual Studio project and configure it for your requirements.
Add an image to your project
In Solution Explorer, open the shortcut menu for the project that you want to add the image to, and then choose Add > New Item.
In the Add New Item dialog box, under Installed, select Graphics, and then select an appropriate file format for the image.
If you don't see the Graphics category in the Add New Item dialog, you may need to install the Image and 3D model editors component. Close the dialog and then select Tools > Get Tools and Features from the menu bar, to open the Visual Studio Installer. Select the Individual components tab, and then select the Image and 3D model editors component under the Games and Graphics category. Select Modify.
For information about how to choose a file format based on your requirements, see Choose the image format.
Specify the Name of the image file and the Location where you want it to be created.
Choose the Add button.
Choose the image format
Depending on how you plan to use the image, certain file formats might be more appropriate than others. For example, some formats might not support a feature that you need, for example, transparency or a specific color format. Some formats might not provide suitable compression for the kind of image content you have planned.
The following information can help you choose an image format that meets your needs:
Bitmap Image (.bmp)
The bitmap image format. An uncompressed image format that supports 24-bit color. The bitmap format doesn't support transparency.
GIF Image (.jpg)
The Graphics Interchange Format (GIF) image format. An LZW-compressed, lossless image format that supports up to 256 colors. Unsuitable for photographs and images that have a significant amount of color detail, but provides good compression ratios for low-color images that have a high degree of color coherence.
JPG Image (.jpg)
The Joint Photographic Experts Group (JPEG) image format. A highly compressed, lossy image format that supports 24-bit color and is suitable for general-purpose compression of images that have a high degree of color coherence.
PNG Image (.jpg)
The Portable Network Graphics (PNG) image format. A moderately compressed, lossless image format that supports 24-bit color and alpha transparency. It is suitable for both natural and artificial images, but does not provide compression ratios as good as lossy formats such as JPG or GIF.
TIFF Image (.tif)
The Tagged Image File Format (TIFF or TIF) image format. A flexible image format that supports several compression schemes.
DDS Texture (.dds)
The DirectDraw Surface (DDS) texture format. A highly compressed, lossy texture format that supports 24-bit color and alpha transparency. Its compression ratios can be as high as 8:1. It's based on S3 Texture compression, which can be decompressed on graphics hardware.
TGA Image (.tga)
The Truevision Graphics Adapter (TGA) image format (also known as Targa). An RLE-compressed, lossless image format that supports both color-mapped (color palette) or direct-color images of up to 24-bit color and alpha transparency. Unsuitable for photographs and images that have a significant amount of color detail, but provides good compression ratios for images that have long spans of identical colors.
Configure the image
Before you begin to work with the image that you created, you can change its default configuration. For example, you can change its dimensions or the color format that it uses. For information about how to configure these and other properties of the image, see Image properties.
Before you save your work, make sure to set the Color Format property if you want to use a specific color format. If the file format supports compression, you can adjust the compression settings when you save the file for the first time or when you choose Save As.
Work with the Image Editor
This section describes how to use the Image Editor to modify textures and images.
Commands that affect the state of the Image Editor are located on the Image Editor Mode toolbar together with advanced commands. The toolbar is located along the topmost edge of the Image Editor design surface. Drawing tools are located on the Image Editor toolbar along the leftmost edge of the Image Editor design surface.
Image Editor Mode toolbar
The following table describes the items on the Image Editor Mode toolbar, which are listed in the order in which they appear from left to right:
Green Channel
Blue Channel
Checkerboard
Uses a green color together with the specified background color to display the background as a checkerboard pattern. You can use this option to help make transparent parts of the image more apparent.
White Background
Uses the color white to display the background.
Black Background
Uses the color black to display the background.
Filters
Provides several common image filters: Black and White, Blur, Brighten, Darken, Edge Detection, Emboss, Invert Colors, Ripple, Sepia Tone, and Sharpen.
Graphics Engines
Render with D3D11
Uses Direct3D 11 to render the Image Editor design surface.
Render with D3D11WARP
Uses Direct3D 11 Windows Advanced Rasterization Platform (WARP) to render the Image Editor design surface.
Tools
Flip Horizontal
Transposes the image around its horizontal, or x, axis.
Flip Vertical
Transposes the image around its vertical, or y, axis.
Generate Mips
Generates MIP levels for an image. If MIP levels already exist, they are recreated from the largest MIP level. Any changes that were made to smaller MIP levels are lost. To save the MIP levels that you have generated, you must use the .dds format to save the image.
View
Image Editor toolbar
The following table describes the items on the Image Editor toolbar, which are listed in the order in which they appear from top to bottom:
Work with MIP levels
Some image formats, for example, DirectDraw Surface (.dds), support MIP levels for texture-space Level-of-Detail (LOD). For information about how to generate and work with MIP levels, see How to: Create and modify MIP levels
Work with transparency
Some image formats, for example, DirectDraw Surface (.dds), support transparency. There are several ways you can use transparency, depending on the tool that you're using. To specify the level of transparency for a color selection, in the Properties window, set the A (alpha) component of the color selection.
The following table describes how different kinds of tools control how transparency is applied:
Image properties
You can use the Properties window to specify various properties of the image. For example, you can set the width and height properties to resize the image.
The following table describes image properties:
Property | Description |
---|---|
Width | The width of the image. |
Height | The height of the image. |
Bits Per Pixel | The number of bits that represent each pixel. The value of this property depends on the Color Format of the image. |
Transparent Selection | True to blend the selection layer together with the main image, based on the alpha value of the selection layer; otherwise, False. This item is only available for images that support alpha. |
Format | The color format of the image. You can specify a variety of color formats, depending on the image format. The color format defines the number and kind of color channels that are included in the image, and also the size and encoding of various channels. |
Mip Level | The active MIP level. This item is only available for textures that have MIP levels. |
Mip Level Count | The total number of MIP levels in the image. This item is only available for textures that have MIP levels. |
Frame Count | The total number of frames in the image. This item is only available for images that support texture arrays. |
Frame | The current frame. Only the first frame can be viewed; all other frames are lost when the image is saved. |
Depth Slice Count | The total number of depth slices in the image. This item is only available for images that support volume textures. |
Depth Slice | The current depth slice. Only the first slice can be viewed; all other slices are lost when you save the image. |
Resize images
There are two ways to resize an image. In both cases, the Image Editor uses bilinear interpolation to resample the image.
In the Properties window, specify new values for the Width and Height properties.
Select the entire image and use the border markers to resize the image.
Selected regions
Selections in the Image Editor define regions of the image that are active. Active regions are affected by tools and transformations. When there is an active selection, areas outside the selected region are not affected by most tools and transformations. If there is not an active selection, the entire image is active.
Most tools (Pencil, Brush, Airbrush, Fill, Eraser, and 2D primitives) and transformations (Rotate, Trim, Invert Colors, Flip Horizontal, and Flip Vertical) are constrained or defined by the active selection. However, some tools (Eyedropper and Text) and transformations (Generate Mips) aren't affected by any active selection. These tools always behave as if the entire image is the active selection.
While you're selecting a region, you can press and hold Shift to make a proportional (square) selection. Otherwise, the selection is not constrained.
Resize selections
After you select a region, you can resize it or its image contents by changing the size of the selection marker. While you're resizing the selected region, you can use the following modifier keys to change the behavior of the selected region as you resize it:
Ctrl - Copies the contents of the selected region before it's resized. This leaves the original image intact while the copy is resized.
Shift - Resizes the selected region in proportion to its original size.
Alt - Changes the size of the selection region. This leaves the image unmodified.
The following table describes the valid modifier key combinations:
Ctrl | Shift | Alt | Description |
---|---|---|---|
Resizes the content of the selected region. | |||
Shift | Proportionally resizes the content of the selected region. | ||
Alt | Resizes the selected region. This defines a new selection region. | ||
Shift | Alt | Proportionally resizes the selected region. This defines a new selection region. | |
Ctrl | Copies and then resizes the content of the selected region. | ||
Ctrl | Shift | Copies and then proportionally resizes the content of the selected region. |
Tool properties
While a tool is selected, you can use the Properties window to specify details about how it affects the image. For example, you can set the thickness of the Pencil tool or the color of the Brush tool.
You can set both a foreground color and a background color. Both support an alpha channel to provide user-defined opacity. The settings apply to all tools. If you use a mouse, the left mouse button corresponds to the foreground color, and the right mouse button corresponds to the background color.
The following table describes tool properties:
Value
The text to be drawn.
Font
The font used to draw the text.
Size
The size of the text.
Bold
Makes the font bold.
Italics
Makes the font italic.
Thickness
Defines the thickness of the line that forms the boundary of the primitive.
Radius X
(Rounded rectangle only) Defines the rounding radius for the top and bottom edges of the primitive.
При выборе файла изображения (например, ICO, .bmp, .jpg) в Обозреватель решений изображение открывается в редакторе изображений так же, как файлы кода открываются в редакторе кода. Если вкладка редактора изображений активна, вы увидите панели инструментов с множеством инструментов для создания и редактирования изображений. Наряду с растровыми изображениями, значками и курсорами можно редактировать изображения в формате GIF или JPEG с помощью команд в меню "Изображение " и инструментов на панели инструментов редактора изображений .
Графические ресурсы — это изображения, которые вы определяете для приложения. Вы можете нарисовать произвольный или нарисовать с помощью фигур. Вы можете выбрать части изображения для редактирования, перелистывания или изменения размера или создать пользовательскую кисть из выбранной части изображения и нарисовать с помощью этой кисти. Вы можете определять свойства изображений, сохранять изображения в разных форматах и преобразовывать изображения из одного формата в другой.
С помощью редактора изображений можно просматривать 32-разрядные изображения, но их нельзя редактировать.
Редактор изображений и двоичный редактор также можно использовать для работы с файлами ресурсов в управляемых проектах. Все управляемые ресурсы, которые нужно редактировать, должны быть связанными ресурсами. Редакторы ресурсов Visual Studio не поддерживают редактирование внедренных ресурсов.
Помимо создания новых графических ресурсов, можно импортировать существующие изображения для редактирования, а затем добавить их в проект. Вы также можете открывать и редактировать изображения, которые не являются частью проекта для редактирования автономных изображений.
Скачайте бесплатно библиотеку изображений Visual Studio, содержащую множество анимаций, растровых рисунков и значков, которые можно использовать в приложениях. Дополнительные сведения о скачивании библиотеки см. в Visual Studio библиотеке образов.
Меню "Изображение"
Меню "Изображение ", которое отображается только в том случае, если редактор изображений активен, содержит команды для редактирования изображений, управления цветовой палитрой и настройки параметров окна редактора изображений . Кроме того, команды для использования изображений устройств доступны при работе со значками и курсорами.
Диалоговое окно "Сетка Параметры" позволяет указать параметры сетки для изображения и отобразить линии сетки над измененным изображением. Строки полезны для редактирования изображения, но не сохраняются как часть самого изображения.
Панель инструментов
Панель инструментов редактора изображений содержит инструменты для рисования, рисования, ввода текста, стирания и управления представлениями. Он также содержит селектор параметров, с помощью которого можно выбрать параметры для использования каждого средства. Например, можно выбрать различные ширины кисти, коэффициенты увеличения и стили линий.
Все средства, доступные на панели инструментов редактора изображений, также доступны в меню ImageTools >. Чтобы использовать панель инструментов редактора изображенийи селектор параметров, выберите нужный инструмент или параметр.
Панель инструментов редактора изображений
Подсказки отображаются при наведении курсора на кнопку панели инструментов. Эти советы помогут определить функцию каждой кнопки.
Так как многие средства рисования доступны с клавиатуры, иногда бывает полезно скрыть панель инструментов редактора изображений .
- Чтобы отобразить или скрыть панель инструментов редактора изображений, перейдите в меню ViewToolbars > и выберите "Редактор изображений".
Элементы на этой панели инструментов будут недоступны, если файл изображения из текущего проекта или решения не открыт в редакторе изображений.
Селектор параметров
С помощью селектора параметров можно указать ширину линии, росчерка кисти и многое другое. Значок кнопки выбора параметров изменяется в зависимости от выбранного инструмента.
Выбор параметров на панели инструментов редактора изображений
Текст
Используйте диалоговое окно "Средство текста" , чтобы добавить текст в ресурс курсора, растрового рисунка или значка.
Чтобы открыть это диалоговое окно, откройте редактор изображений и перейдите в меню ImageTools >, а затем выберите команду "Текстовый инструмент".
Вы можете щелкнуть правой кнопкой мыши диалоговое окно "Текстовый инструмент", чтобы открыть контекстное меню по умолчанию, содержащее список стандартных команд Windows.
Откройте диалоговое окно "Шрифт текстового инструмента ", чтобы изменить шрифт, стиль или размер шрифта курсора. Изменения применяются к тексту, отображаемого в области текста .
Чтобы открыть это диалоговое окно, нажмите кнопку "Шрифт " в диалоговом окне "Средство текста ". Доступны следующие свойства:
Изменение шрифта текста на изображении
Ниже приведен пример добавления текста в значок в приложении Windows и управления шрифтом текста.
Создайте приложение Windows Forms C++. Дополнительные сведения см. в разделе "Практическое руководство. Создание приложений Windows Forms". Файл app.ico добавляется в проект по умолчанию.
В Обозреватель решений дважды щелкните файл app.ico. Откроется редактор изображений.
Перейдите в меню ImageTools > и выберите "Средство текста".
В диалоговом окне "Текстовое средство " введите C++ в пустой текстовой области. Этот текст появится в поле с возможностью изменения размера, расположенном в левом верхнем углу app.ico в редакторе изображений.
В редакторе изображений перетащите редизируемый прямоугольник в центр app.ico , чтобы улучшить удобочитаемость текста.
В диалоговом окне "Текстовое средство" нажмите кнопку "Шрифт ".
В диалоговом окне "Шрифт текстового инструмента ":
Выберите Times New Roman из списка доступных шрифтов, перечисленных в списке шрифтов .
Выберите полужирный шрифт в списке доступных стилей шрифтов, перечисленных в списке стилей шрифтов .
Выберите 10 из списка доступных размеров точек, перечисленных в списке "Размер ".
В текстовой области отображается текст, который отображается как часть ресурса. Изначально эта область пуста.
Если задан прозрачный фон , на изображении будет помещен только текст. Если задан непрозрачный фон , ограничивающий прямоугольник, заполненный цветом фона, будет помещен за текстом.
Области окна
В окне редактора изображений отображаются два представления изображения с разделенной полосой, разделяющей две панели. Чтобы изменить соотношение областей, переместите разделитель в нужную сторону. Активная панель окружена границами, как выделенная область.
Одно представление является фактическим размером, а другое увеличивается по умолчанию коэффициентом увеличения 6. Представления в этих двух панелях обновляются автоматически, все изменения, внесенные в одной области, сразу же отображаются в другом. Две панели упрощают работу с увеличенным представлением изображения, в котором можно различать отдельные пиксели и, в то же время, наблюдать за эффектом работы над представлением фактического размера изображения.
В левой области используется столько места, сколько требуется (до половины окна изображения ) для отображения представления увеличения изображения по умолчанию 1:1. В правой области отображается увеличенное изображение по умолчанию 6:1. Вы можете изменить увеличение на каждой панели с помощью инструмента "Увеличение " на панели инструментов редактора изображений или с помощью клавиш акселератора.
Вы можете увеличить меньшую панель окна редактора изображений и использовать две области для отображения разных областей большого изображения. Выберите в области, чтобы выбрать ее.
Можно изменить относительные размеры панелей, разместив указатель на полосе разделения и переместив разделителя вправо или влево. Разделенная панель может перемещаться по обе стороны, если вы хотите работать только на одной панели.
Если область редактора изображений увеличена на 4 или больше, можно отобразить сетку пикселей, разделяющую отдельные пиксели на изображении.
Изменение коэффициента увеличения
По умолчанию редактор изображений отображает представление на левой панели с фактическим размером и представление в правой области в 6 раз фактического размера. Коэффициент увеличения (показан в строке состояния в нижней части рабочей области) — это соотношение между фактическим размером изображения и отображаемым размером. Значение по умолчанию — 6, а диапазон — от 1 до 10.
Выберите область редактора изображений , коэффициент увеличения которого требуется изменить.
На панели инструментов редактора изображений щелкните стрелку справа от инструмента Magnify и выберите коэффициент увеличения в подменю: 1X, 2X, 6X или 8X.
Чтобы выбрать коэффициент увеличения, отличный от перечисленных в средстве magnify , используйте клавиши ускорителя.
Отображение или скрытие сетки пикселей
Для всех панелей редактора изображений с коэффициентом увеличения 4 или больше можно отобразить сетку, разделяющую отдельные пиксели на изображении.
Перейдите в меню ImageGrid > Параметры.
Установите флажок "Сетка пикселей ", чтобы отобразить сетку, или снимите флажок, чтобы скрыть сетку.
В этой статье рассматривается, как работать с редактором изображений Visual Studio для просмотра и изменения ресурсов изображений и текстур.
Вы можете использовать редактор изображений для работы с различными форматами изображений и текстур, которые используются при разработке приложений DirectX. Он также поддерживает популярные форматы файлов изображений и цветовые кодировки, функции, такие как альфа-каналы и MIP-текстурирование, а также многие форматы текстур с аппаратным ускорением и высокой степенью сжатия, поддерживаемые DirectX.
Поддерживаемые форматы
Редактор изображений поддерживает следующие форматы изображений:
Название формата | Расширение имени файла |
---|---|
PNG (Portable Network Graphics) | PNG |
JPEG | JPG, JPEG, JPE, JFIF |
Поверхность DirectDraw | DDS |
Graphics Interchange Format | GIF |
Bitmap | BMP, DIB |
Формат TIFF | TIF, TIFF |
TGA (Targa) | TGA |
Начало работы
В этом разделе рассматривается, как добавить в проект Visual Studio изображение и настроить его в соответствии с вашими требованиями.
Добавление изображения в проект
В обозревателе решений откройте контекстное меню проекта, в который требуется добавить изображение, и выберите пункты Добавить > Новый элемент.
В диалоговом окне Добавление нового элемента в разделе Установленные выберите Графика, а затем выберите подходящий формат файла для изображения.
Если в диалоговом окне Добавление нового элемента нет категории Графика, возможно, необходимо установить компонент Редакторы изображений и трехмерных моделей. Закройте диалоговое окно и в строке меню выберите Сервис > Получить средства и компоненты, чтобы открыть Visual Studio Installer. Перейдите на вкладку Отдельные компоненты и выберите компонент Редакторы изображений и трехмерных моделей в категории Наборы для разработки игр. Выберите Изменить.
Сведения том, как выбрать формат файла, соответствующий вашим требованиям, см. в разделе Выбор формата изображения.
Укажите имя файла изображения и расположение, где его необходимо создать.
Выберите кнопку Добавить.
Выбор формата изображения
В зависимости от того, как вы планируете использовать изображение, некоторые форматы файлов могут оказаться более подходящими, чем другие. Некоторые форматы могут не поддерживать нужную функцию, например прозрачность или определенный формат цвета. Некоторые форматы могут не обеспечивать подходящее сжатие для вашего содержимого изображения.
Следующие сведения помогут вам выбрать формат изображения, соответствующий вашим нуждам:
Точечный рисунок (BMP)
Формат растрового изображения. Формат изображения без сжатия, который поддерживает 24-разрядный цвет. Формат точечного рисунка не поддерживает прозрачность.
Изображение в формате GIF
Формат изображения GIF. Формат изображения со сжатием LZW без потери качества, который поддерживает до 256 цветов. Не подходит для фотографий и изображений со значительным объемом цветовых оттенков, но обеспечивает хорошую степень сжатия изображений с малым количеством цветов и высокой степенью их согласованности.
Изображение в формате JPG
Формат изображения JPEG. Формат изображения с высокой степенью сжатия с потерями, который поддерживает 24-разрядный цвет и подходит для сжатия изображений общего назначения с высокой степенью согласованности цвета.
Изображение в формате PNG
Формат изображения PNG. Формат изображения средней степени сжатия, без потери качества, который поддерживает 24-разрядный цвет и альфа-прозрачность. Подходит для естественных и искусственных изображений, но не обеспечивает степень сжатия, применяемую в форматах JPG или GIF.
Изображение в формате TIFF
Формат изображения TIFF (TIFF или TIF). Гибкий формат изображения, поддерживающий несколько алгоритмов сжатия.
Текстура в формате DDS
Формат текстуры DirectDraw Surface (DDS). Формат текстур высокой степени сжатия с потерей качества, который поддерживает 24-разрядный цвет и альфа-прозрачность. Его максимальная степень сжатия равна 8:1. Он создан на основе сжатия текстур S3. Его можно распаковать с помощью графического оборудования.
Изображение в формате TGA
Формат изображения TGA или Targa. Формат изображения, сжатого с использованием алгоритма RLE, без потери данных, который поддерживает закодированные цветом (цветовой палитры) или простые цветные изображения с 24-разрядным цветом и альфа-прозрачностью. Не подходит для фотографий и изображений со значительным объемом цветовых деталей, но обеспечивает хорошую степень сжатия изображений с широким диапазоном одинаковых цветов.
Настройка изображения
Перед началом работы с созданным изображением можно изменить его конфигурацию по умолчанию. Например, можно изменить его размеры или формат цвета. Дополнительные сведения о настройке этих и других свойств изображения см. в разделе Свойства изображения.
Перед тем как сохранить результаты работы, задайте свойство Формат цвета, если требуется использовать определенный формат цвета. Если формат файла поддерживает сжатие, при первом сохранении файла или при выборе команды Сохранить как можно настроить параметры сжатия.
Работа с редактором изображений
В этом разделе рассматривается, как с помощью редактора изображений вносить изменения в текстуры и изображения.
Команды, влияющие на состояние редактора изображений, находятся на панели инструментов Режим редактора изображений вместе с расширенными командами. Панель инструментов расположена у верхнего края области конструктора редактора изображений. Инструменты для рисования расположены на панели инструментов Редактора изображений у левого края области конструктора редактора изображений.
Панель инструментов "Режим редактора изображений"
В следующей таблице описываются элементы на панели инструментов Режим редактора изображений, перечисленные в порядке отображения, слева направо:
Зеленый канал
Синий канал
Шахматная доска
Для отображения фона в виде шахматной доски вместе с указанным цветом фона используется зеленый цвет. Этот параметр можно использовать, чтобы выделить прозрачные части изображения.
Белый фон
Для отображения фона используется белый цвет.
Черный фон
Для отображения фона используется черный цвет.
Фильтры
Предоставляет несколько распространенных фильтров изображения: Черно-белое, Размытие, Brighten (Осветление), Darken (Затемнение), Определение границ, Тиснение, Обратить цвета, Ripple (Рябь), Sepia Tone (Оттенок сепия) и Повысить резкость.
Графические модули
Render with D3D11 (Визуализация с помощью D3D11)
Использует Direct3D 11, чтобы отрисовать область конструктора редактора изображений.
Render with D3D11WARP (Визуализация с помощью D3D11WARP)
Использует платформу Windows Advanced Rasterization Platform (WARP) Direct3D 11 для отрисовки области конструктора редактора изображений.
Инструменты
Отразить по-горизонтали
Транспонирует изображение вокруг оси X, или по горизонтали.
Отразить по-вертикали
Транспонирует изображение вокруг оси Y, или по вертикали.
Создать MIP-объекты
Создает уровни MIP для изображения. Если уровни MIP уже существуют, они создаются повторно из наибольшего уровня MIP. Любые изменения, внесенные в меньшие уровни MIP, будут потеряны. Чтобы сохранить созданные уровни MIP, для сохранения изображения необходимо использовать формат DDS.
Просмотр
Панель инструментов редактора изображений
В следующей таблице приведены описания элементов на панели инструментов редактора изображений, перечисленные в порядке отображения, сверху вниз:
Работа с уровнями MIP
Некоторые форматы изображений, например поверхность DirectDraw (DDS), поддерживают уровни MIP для уровня детализации текстур и пространства. Сведения о том, как создавать уровни MIP и работать с ними, см. в статье Практическое руководство. Создание и изменение MIP-уровней.
Работа с прозрачностью
Некоторые форматы изображений, например поверхность DirectDraw (DDS), поддерживают прозрачность. В зависимости от применяемого инструмента существует несколько способов использования прозрачности. Чтобы указать уровень прозрачности для выбранного цвета, в окне Свойства установите альфа-компонент A.
В следующей таблице описывается, как используются различные инструменты для применения прозрачности.
Свойства образа
Окно Свойства можно использовать для задания различных свойств изображения. Например, можно задать свойства ширины и высоты, чтобы изменить размеры изображения.
В приведенной ниже таблице описаны свойства изображений.
Свойство | Описание |
---|---|
Ширина | Ширина изображения. |
Высота | Высота изображения. |
Бит на пиксель | Количество битов, в которых представлен каждый пиксель. Значение этого свойства зависит от цветового формата изображения. |
Прозрачное выделение | Если задать значение True, выбранный слой смешивается с основным изображением на основе альфа-фактора выбранного слоя. В противном случае следует установить значение False. Этот элемент доступен только для изображений, поддерживающих альфа-канал. |
Формат | Формат цвета изображения. Вы можете указать несколько форматов цвета в зависимости от формата изображения. Формат цвета определяет количество и тип цветовых каналов, которые содержит изображение, а также размер и кодирование различных каналов. |
Уровень MIP | Активный уровень MIP. Этот элемент доступен только для текстур с уровнями MIP. |
Число уровней MIP | Общее количество уровней MIP в изображении. Этот элемент доступен только для текстур с уровнями MIP. |
Число кадров | Общее количество кадров в изображении. Этот элемент доступен только для изображений, поддерживающих массивы текстур. |
Frame | Текущий кадр. Вы можете просмотреть только первый кадр. Остальные кадры будут потеряны при сохранении изображения. |
Число срезов глубины | Общее количество срезов глубины в изображении. Этот элемент доступен только для изображений, которые поддерживают объемные текстуры. |
Срез глубины | Текущий срез глубины. Вы можете просмотреть только первый срез. Остальные срезы будут потеряны при сохранении изображения. |
Изменение размеров изображений
Существует два способа изменения размера изображения. В обоих случаях редактор изображений использует билинейную интерполяцию для изменения размера изображения.
В окне Свойства задайте новые значения для свойств Ширина и Высота.
Выберите все изображение и используйте метки границ для изменения его размера.
Выбранные области
Параметры, выбранные в редакторе изображений, определяют активные области изображения. Активные области попадают под действие инструментов и преобразований. При наличии активного выделения на области большинство инструментов и преобразований не влияют за его пределами. При отсутствии активного выделения активно все изображение.
Большинство инструментов (Карандаш, Кисть, Распылитель, Заливка, Ластик, а также двумерные примитивы) и преобразований (Повернуть, Обрезать, Обратить цвета, Перевернуть слева направо и Перевернуть сверху вниз) ограничиваются или определяются активным выделением. Но некоторые инструменты (Пипетка и Текст) и преобразования (Создать MIP-объекты) работают независимо от выделений. Эти инструменты всегда действуют так, как если бы было выделено все изображение.
Выделяя область, можно сделать ее пропорциональной (квадрат). Для этого нужно нажать и удерживать клавишу SHIFT. В противном случае выделение не ограничивается.
Изменение размера выделения
После выделения области можно изменить размер выделения или содержимое изображения, поменяв размер метки выделения. При изменении размера выбранной области можно использовать следующие клавиши-модификаторы для изменения поведения выбранной области в процессе изменения:
CTRL: копирует содержимое выбранной области до изменения ее размера. Исходное изображение при этом остается неизменным; изменяется размер копии.
SHIFT: изменяет размер выбранной области пропорционально ее исходным размерам.
ALT: изменяет размер области выделения. Изображение при этом остается неизменным.
В следующей таблице перечислены сочетания клавиш-модификаторов:
Ctrl | Shift | Alt | Описание |
---|---|---|---|
Изменяет размер содержимого области выделения. | |||
Сдвиг | Пропорционально изменяет размер содержимого области выделения. | ||
ALT | Изменяет размер области выделения. Определяет новую область выделения. | ||
Сдвиг | ALT | Пропорционально изменяет размер области выделения. Определяет новую область выделения. | |
Ctrl | Копирует, а затем изменяет размер содержимого области выделения. | ||
Ctrl | Сдвиг | Копирует, а затем пропорционально изменяет размер содержимого области выделения. |
Свойства инструмента
Когда инструмент выбран, в окне Свойства можно задать, как он должен влиять на изображение. Например, можно задать толщину инструмента Карандаш или цвет инструмента Кисть.
Вы можете задать основной цвет и цвет фона. Передний план и фон поддерживают альфа-канал, который позволяет пользователю указать прозрачность. Параметры применяются ко всем инструментам. При использовании мыши ее левая кнопка отвечает за основной цвет, а правая кнопка — за цвет фона.
Эти свойства инструментов описаны в приведенной ниже таблице:
Значение
Текст для отрисовки.
Шрифт
Шрифт, который используется для отрисовки текста.
Размер
Размер текста.
Полужирный
Делает шрифт полужирным.
Курсив
Выделяет шрифт курсивом.
Thickness
Определяет толщину линии, формирующей границу примитива.
Радиус X
(Скругленный прямоугольник.) Определяет радиус закругления для верхнего и нижнего краев примитива.
В этой статье рассматривается, как работать с редактором изображений Visual Studio для просмотра и изменения ресурсов изображений и текстур.
Вы можете использовать редактор изображений для работы с различными форматами изображений и текстур, которые используются при разработке приложений DirectX. Он также поддерживает популярные форматы файлов изображений и цветовые кодировки, функции, такие как альфа-каналы и MIP-текстурирование, а также многие форматы текстур с аппаратным ускорением и высокой степенью сжатия, поддерживаемые DirectX.
Поддерживаемые форматы
Редактор изображений поддерживает следующие форматы изображений:
Название формата | Расширение имени файла |
---|---|
PNG (Portable Network Graphics) | PNG |
JPEG | JPG, JPEG, JPE, JFIF |
Поверхность DirectDraw | DDS |
Graphics Interchange Format | GIF |
Bitmap | BMP, DIB |
Формат TIFF | TIF, TIFF |
TGA (Targa) | TGA |
Начало работы
В этом разделе рассматривается, как добавить в проект Visual Studio изображение и настроить его в соответствии с вашими требованиями.
Добавление изображения в проект
В обозревателе решений откройте контекстное меню проекта, в который требуется добавить изображение, и выберите пункты Добавить > Новый элемент.
В диалоговом окне Добавление нового элемента в разделе Установленные выберите Графика, а затем выберите подходящий формат файла для изображения.
Если в диалоговом окне Добавление нового элемента нет категории Графика, возможно, необходимо установить компонент Редакторы изображений и трехмерных моделей. Закройте диалоговое окно и в строке меню выберите Сервис > Получить средства и компоненты, чтобы открыть Visual Studio Installer. Перейдите на вкладку Отдельные компоненты и выберите компонент Редакторы изображений и трехмерных моделей в категории Наборы для разработки игр. Выберите Изменить.
Сведения том, как выбрать формат файла, соответствующий вашим требованиям, см. в разделе Выбор формата изображения.
Укажите имя файла изображения и расположение, где его необходимо создать.
Выберите кнопку Добавить.
Выбор формата изображения
В зависимости от того, как вы планируете использовать изображение, некоторые форматы файлов могут оказаться более подходящими, чем другие. Некоторые форматы могут не поддерживать нужную функцию, например прозрачность или определенный формат цвета. Некоторые форматы могут не обеспечивать подходящее сжатие для вашего содержимого изображения.
Следующие сведения помогут вам выбрать формат изображения, соответствующий вашим нуждам:
Точечный рисунок (BMP)
Формат растрового изображения. Формат изображения без сжатия, который поддерживает 24-разрядный цвет. Формат точечного рисунка не поддерживает прозрачность.
Изображение в формате GIF
Формат изображения GIF. Формат изображения со сжатием LZW без потери качества, который поддерживает до 256 цветов. Не подходит для фотографий и изображений со значительным объемом цветовых оттенков, но обеспечивает хорошую степень сжатия изображений с малым количеством цветов и высокой степенью их согласованности.
Изображение в формате JPG
Формат изображения JPEG. Формат изображения с высокой степенью сжатия с потерями, который поддерживает 24-разрядный цвет и подходит для сжатия изображений общего назначения с высокой степенью согласованности цвета.
Изображение в формате PNG
Формат изображения PNG. Формат изображения средней степени сжатия, без потери качества, который поддерживает 24-разрядный цвет и альфа-прозрачность. Подходит для естественных и искусственных изображений, но не обеспечивает степень сжатия, применяемую в форматах JPG или GIF.
Изображение в формате TIFF
Формат изображения TIFF (TIFF или TIF). Гибкий формат изображения, поддерживающий несколько алгоритмов сжатия.
Текстура в формате DDS
Формат текстуры DirectDraw Surface (DDS). Формат текстур высокой степени сжатия с потерей качества, который поддерживает 24-разрядный цвет и альфа-прозрачность. Его максимальная степень сжатия равна 8:1. Он создан на основе сжатия текстур S3. Его можно распаковать с помощью графического оборудования.
Изображение в формате TGA
Формат изображения TGA или Targa. Формат изображения, сжатого с использованием алгоритма RLE, без потери данных, который поддерживает закодированные цветом (цветовой палитры) или простые цветные изображения с 24-разрядным цветом и альфа-прозрачностью. Не подходит для фотографий и изображений со значительным объемом цветовых деталей, но обеспечивает хорошую степень сжатия изображений с широким диапазоном одинаковых цветов.
Настройка изображения
Перед началом работы с созданным изображением можно изменить его конфигурацию по умолчанию. Например, можно изменить его размеры или формат цвета. Дополнительные сведения о настройке этих и других свойств изображения см. в разделе Свойства изображения.
Перед тем как сохранить результаты работы, задайте свойство Формат цвета, если требуется использовать определенный формат цвета. Если формат файла поддерживает сжатие, при первом сохранении файла или при выборе команды Сохранить как можно настроить параметры сжатия.
Работа с редактором изображений
В этом разделе рассматривается, как с помощью редактора изображений вносить изменения в текстуры и изображения.
Команды, влияющие на состояние редактора изображений, находятся на панели инструментов Режим редактора изображений вместе с расширенными командами. Панель инструментов расположена у верхнего края области конструктора редактора изображений. Инструменты для рисования расположены на панели инструментов Редактора изображений у левого края области конструктора редактора изображений.
Панель инструментов "Режим редактора изображений"
В следующей таблице описываются элементы на панели инструментов Режим редактора изображений, перечисленные в порядке отображения, слева направо:
Зеленый канал
Синий канал
Шахматная доска
Для отображения фона в виде шахматной доски вместе с указанным цветом фона используется зеленый цвет. Этот параметр можно использовать, чтобы выделить прозрачные части изображения.
Белый фон
Для отображения фона используется белый цвет.
Черный фон
Для отображения фона используется черный цвет.
Фильтры
Предоставляет несколько распространенных фильтров изображения: Черно-белое, Размытие, Brighten (Осветление), Darken (Затемнение), Определение границ, Тиснение, Обратить цвета, Ripple (Рябь), Sepia Tone (Оттенок сепия) и Повысить резкость.
Графические модули
Render with D3D11 (Визуализация с помощью D3D11)
Использует Direct3D 11, чтобы отрисовать область конструктора редактора изображений.
Render with D3D11WARP (Визуализация с помощью D3D11WARP)
Использует платформу Windows Advanced Rasterization Platform (WARP) Direct3D 11 для отрисовки области конструктора редактора изображений.
Инструменты
Отразить по-горизонтали
Транспонирует изображение вокруг оси X, или по горизонтали.
Отразить по-вертикали
Транспонирует изображение вокруг оси Y, или по вертикали.
Создать MIP-объекты
Создает уровни MIP для изображения. Если уровни MIP уже существуют, они создаются повторно из наибольшего уровня MIP. Любые изменения, внесенные в меньшие уровни MIP, будут потеряны. Чтобы сохранить созданные уровни MIP, для сохранения изображения необходимо использовать формат DDS.
Просмотр
Панель инструментов редактора изображений
В следующей таблице приведены описания элементов на панели инструментов редактора изображений, перечисленные в порядке отображения, сверху вниз:
Работа с уровнями MIP
Некоторые форматы изображений, например поверхность DirectDraw (DDS), поддерживают уровни MIP для уровня детализации текстур и пространства. Сведения о том, как создавать уровни MIP и работать с ними, см. в статье Практическое руководство. Создание и изменение MIP-уровней.
Работа с прозрачностью
Некоторые форматы изображений, например поверхность DirectDraw (DDS), поддерживают прозрачность. В зависимости от применяемого инструмента существует несколько способов использования прозрачности. Чтобы указать уровень прозрачности для выбранного цвета, в окне Свойства установите альфа-компонент A.
В следующей таблице описывается, как используются различные инструменты для применения прозрачности.
Свойства образа
Окно Свойства можно использовать для задания различных свойств изображения. Например, можно задать свойства ширины и высоты, чтобы изменить размеры изображения.
В приведенной ниже таблице описаны свойства изображений.
Свойство | Описание |
---|---|
Ширина | Ширина изображения. |
Высота | Высота изображения. |
Бит на пиксель | Количество битов, в которых представлен каждый пиксель. Значение этого свойства зависит от цветового формата изображения. |
Прозрачное выделение | Если задать значение True, выбранный слой смешивается с основным изображением на основе альфа-фактора выбранного слоя. В противном случае следует установить значение False. Этот элемент доступен только для изображений, поддерживающих альфа-канал. |
Формат | Формат цвета изображения. Вы можете указать несколько форматов цвета в зависимости от формата изображения. Формат цвета определяет количество и тип цветовых каналов, которые содержит изображение, а также размер и кодирование различных каналов. |
Уровень MIP | Активный уровень MIP. Этот элемент доступен только для текстур с уровнями MIP. |
Число уровней MIP | Общее количество уровней MIP в изображении. Этот элемент доступен только для текстур с уровнями MIP. |
Число кадров | Общее количество кадров в изображении. Этот элемент доступен только для изображений, поддерживающих массивы текстур. |
Frame | Текущий кадр. Вы можете просмотреть только первый кадр. Остальные кадры будут потеряны при сохранении изображения. |
Число срезов глубины | Общее количество срезов глубины в изображении. Этот элемент доступен только для изображений, которые поддерживают объемные текстуры. |
Срез глубины | Текущий срез глубины. Вы можете просмотреть только первый срез. Остальные срезы будут потеряны при сохранении изображения. |
Изменение размеров изображений
Существует два способа изменения размера изображения. В обоих случаях редактор изображений использует билинейную интерполяцию для изменения размера изображения.
В окне Свойства задайте новые значения для свойств Ширина и Высота.
Выберите все изображение и используйте метки границ для изменения его размера.
Выбранные области
Параметры, выбранные в редакторе изображений, определяют активные области изображения. Активные области попадают под действие инструментов и преобразований. При наличии активного выделения на области большинство инструментов и преобразований не влияют за его пределами. При отсутствии активного выделения активно все изображение.
Большинство инструментов (Карандаш, Кисть, Распылитель, Заливка, Ластик, а также двумерные примитивы) и преобразований (Повернуть, Обрезать, Обратить цвета, Перевернуть слева направо и Перевернуть сверху вниз) ограничиваются или определяются активным выделением. Но некоторые инструменты (Пипетка и Текст) и преобразования (Создать MIP-объекты) работают независимо от выделений. Эти инструменты всегда действуют так, как если бы было выделено все изображение.
Выделяя область, можно сделать ее пропорциональной (квадрат). Для этого нужно нажать и удерживать клавишу SHIFT. В противном случае выделение не ограничивается.
Изменение размера выделения
После выделения области можно изменить размер выделения или содержимое изображения, поменяв размер метки выделения. При изменении размера выбранной области можно использовать следующие клавиши-модификаторы для изменения поведения выбранной области в процессе изменения:
CTRL: копирует содержимое выбранной области до изменения ее размера. Исходное изображение при этом остается неизменным; изменяется размер копии.
SHIFT: изменяет размер выбранной области пропорционально ее исходным размерам.
ALT: изменяет размер области выделения. Изображение при этом остается неизменным.
В следующей таблице перечислены сочетания клавиш-модификаторов:
Ctrl | Shift | Alt | Описание |
---|---|---|---|
Изменяет размер содержимого области выделения. | |||
Сдвиг | Пропорционально изменяет размер содержимого области выделения. | ||
ALT | Изменяет размер области выделения. Определяет новую область выделения. | ||
Сдвиг | ALT | Пропорционально изменяет размер области выделения. Определяет новую область выделения. | |
Ctrl | Копирует, а затем изменяет размер содержимого области выделения. | ||
Ctrl | Сдвиг | Копирует, а затем пропорционально изменяет размер содержимого области выделения. |
Свойства инструмента
Когда инструмент выбран, в окне Свойства можно задать, как он должен влиять на изображение. Например, можно задать толщину инструмента Карандаш или цвет инструмента Кисть.
Вы можете задать основной цвет и цвет фона. Передний план и фон поддерживают альфа-канал, который позволяет пользователю указать прозрачность. Параметры применяются ко всем инструментам. При использовании мыши ее левая кнопка отвечает за основной цвет, а правая кнопка — за цвет фона.
Эти свойства инструментов описаны в приведенной ниже таблице:
Значение
Текст для отрисовки.
Шрифт
Шрифт, который используется для отрисовки текста.
Размер
Размер текста.
Полужирный
Делает шрифт полужирным.
Курсив
Выделяет шрифт курсивом.
Thickness
Определяет толщину линии, формирующей границу примитива.
Радиус X
(Скругленный прямоугольник.) Определяет радиус закругления для верхнего и нижнего краев примитива.
После установки среды и всех ее компонентов, запустим Visual Studio и создадим проект графического приложения. На стартовом экране выберем Create a new project (Создать новый проект)
На следующем окне в качестве типа проекта выберем Windows Forms App :
Далее на следующем этапе нам будет предложено указать имя проекта и каталог, где будет располагаться проект.
В поле Project Name дадим проекту какое-либо название. В моем случае это HelloApp .
После этого Visual Studio откроет наш проект с созданными по умолчанию файлами:
Справа находится окно Solution Explorer, в котором можно увидеть структуру нашего проекта. В данном случае у нас сгенерированная по умолчанию структура:
Далее идет файл единственной в проекте формы - Form1.cs , который по умолчанию открыт в центральном окне:
Класс формы - Form1 представляет графическую форму - фактически то окно, которое мы увидим на экране при запуске проекта.
Этот класс определяется как частичный (с модификатором partial ) и наследуется от встроенного класса Form , который содержит базовую функциональность форм.
В самом классе Form1 определен по умолчанию только конструктор, где вызывается метод InitializeComponent() , который выполняет инициализацию компонентов формы из файла дизайнера.
Рядом с этим элементом можно заметить другой файл формы - Form1.Designer.cs . Это файл дизайнера - он содержит определение компонентов формы, добавленных на форму в графическом дизайнере и именно его код по сути передается выше через вызов InitializeComponent()
Program.cs определяет точку входа в приложение:
Метод Main снабжен атрибутом [STAThread] . Этот атрибут, грубого говоря, необходим для корректной работы компонентов Windows. В самом методе сначала вызывается метод
который устанавливает некоторую базовую конфигурацию приложения
Затем вызывается метод
в который передается объект отображаемой по умолчанию на экране формы.
Настройка компиляции проекта
В итоге нам откроектся файл с расширением csproj , который называется по имени проекта (например, HelloApp.csproj) со следующим содержимым:
Для компиляции приложения Windows Forms указаны следующие настройки:
OutputType : определяет выходной тип проекта. Должен иметь значение WinExe - то есть выполняемое приложение с расширением exe под Windows
Nullable : подключает в проект функционалность ссылочных nullable-типов
UseWindowsForms : указывает, будет ли проект использовать Windows Forms (для этого устанавливается значение true )
ImplicitUsings : подключает в проект функциональность неявно подключаемых глобальных пространств имен
Запуск приложения
Чтобы запустить приложение в режиме отладки, нажмем на клавишу F5 или на зеленую стрелочку на панели Visual Studio.
После этого запустится пустая форма Form1 по умолчанию.
После запуска приложения студия компилирует его в файл с расширением exe. Найти данный файл можно, зайдя в папку проекта и далее в каталог \bin\Debug\net6.0-windows
Рассмотрев вкратце создание проекта графического приложения, мы можем перейти к обзору основных компонентов и начнем мы с форм.
Читайте также: