Сколько цветов использует стандартная палитра языка basic
Для осуществления ввода с клавиатуры и вывода на экран символьной информации используются функции DOS. Однако DOS не поддерживает ни позиционирование курсора, ни смену цвета выводимых символов. В текстовом режиме расширить возможности DOS можно с помощью драйвера ANSI.SYS. С графическими изображениями дело обстоит хуже, так как в DOS нет никаких графических функций. Нет их также и в драйвере ANSI.SYS, за исключением возможности перевода видеоадаптера в графический режим (с помощью Esc-последовательности Еsc[=режимh). Для того, чтобы вывести на экран графическое изображение необходимо воспользоваться нижним уровнем операционной системы — базовой системы ввода-вывода (Basic In-Out System, BIOS). Программы BIOS находятся в постоянном запоминающем устройстве (ПЗУ) BIOS. В отличие от DOS, ко всем функциям которой можно обратиться с помощью прерывания 21h, в BIOS за каждым устройством компьютера закреплено свое прерывание. Так, программирование диска осуществляется с помощью прерывания int13h, клавиатуры — int16h, экрана – int10h. Прерывание int10h обеспечивает все функции видеоадаптера: смену видеорежима, вывод символьной и текстовой информации, смену шрифтов, настройку цветовой палитры, работу с графическим изображением и т.д. Воспользуемся прерыванием int10h для перехода в графический режим и вывода простейшего графического изображения.
Пример 3.1. Вывод на экран горизонтальной прямой.
;Установим графический режим EGA mov АН,00h ;(1)Функция задания режима mov AL,10h ;(2)Графический режим EGA int 10h ;(3)Вызов BIOS ;Нарисуем прямую линию в цикле по Х mov SI,150 ;(4)Начальная Х-координата mov CX,300 ;(5)Число точек по горизонтали line: push CX ;(6)Сохраним его в стеке mov AX,0Ch ;(7)Функция вывода пиксела mov AL,4 ;(8)Цвет красный mov ВН,0 ;(9)Видеостраница mov CX,SI ;(10)Х-координата (переменная) mov DX,175 ;(11)Y-координата (константа) int 10h ;(12)Вызов BIOS inc SI ;(13)Инкремент Х-координаты pop CX ;(14)Восстановим счетчик шагов loop line ;(15)Цикл из CX шагов ;Остановим программу для наблюдения результата ее работы mov АН,08h ;(16)Функция ввода с клавиатуры без эха int 21h ;(17)Вызов DOS ;Переключим видеоадаптер назад в текстовый режим mov АН,00h ;(18)Функция задания режима mov AL,03h ;(19)Текстовый режим int 10h ;(20)Вызов BIOS
В предложениях 1-3 с помощью функции 00h прерывания BIOS 10h осуществляется переключение видеоадаптера в графический режим. Поскольку номер режима заносится в байтовый регистр AL, всего может существовать 256 различных текстовых и графических режимов, из которых на сегодняшний день используются (аппаратурой различных фирм) около ста. Режим 10h обеспечивает вывод графического изображения 16 цветами с разрешением 640х350 точек и широко используется с видеоадаптерами EGA и VGA.
Изображение рисуется по точкам (в BIOS не предусмотрено программных средств вывода каких-либо геометрических фигур или хотя бы линий, как нет и средств закрашивания областей экрана). Для вывода на экран цветной точки (пиксела) используется функция 0Ch прерывания 10h. Эта функция требует занесения в регистр AL кода цвета, в ВН — номера видеостраницы, в CX — Х-координаты выводимой точки в диапазоне 0-349, а в DX — Y-координаты точки в диапазоне 0-639. Поскольку регистр CX используется, как счетчик шагов в цикле, для хранения Х — координаты зарезервирован регистр SI.
Прямая горизонтальная линия в примере 3.1 рисуется путем вызова функции 0Сh в цикле, в каждом шаге которого значение Y-координаты остается неизменным (175 в примере), а значение Х-координаты увеличивается на 1 (предложение 13). После завершения цикла формирования изображения в программе предусмотрена остановка (предложения 16-17) для того, чтобы пользователь мог, оставаясь в графическом режиме, проанализировать результаты работы программы. Для остановки программы используется функция DOS 08h ввода одного символа с клавиатуры, функция 08h, как уже отмечалось, не отображает введенный символ на экране и, тем самым, не искажает графическое изображение. Нажатие любой клавиши (кроме управляющих — Ctrl, Alt, Shift и др.) возобновляет выполнение программы.
В конце рассматриваемого фрагмента предусмотрено переключение видеоадаптера в стандартный текстовый режим с номером 03h (предложения 18. 20). Если такое переключение не выполнить, видеоадаптер останется в графическом режиме, что может помешать правильному выполнению прикладных программ.
Рассмотрим кратко параметры вызова функции 0Ch прерывания 10h. В регистр ВН заносится номер видеостраницы, на которую выводится данная точка. Графический адаптер EGA обеспечивает хранение и отображение двух графических страниц. По умолчанию видимой (активной) делается страница 0, однако рисовать изображение можно как на видимой, так и на невидимой странице. Для переключения страниц предусмотрена функция 05h прерывания 10h.
В регистр AL заносится код цвета точки. Адаптер поддерживает 64 цвета, хотя в каждый момент времени изображение на экране может содержать только 16 цветов. Этот набор из 16 цветов, выводимых на экран (цветовая палитра), задается программно и может легко изменяться. При загрузке машины устанавливается стандартная палитра, коды цветов которой приведены в табл. 3.1.
Таблица 3.1. Коды цветов стандартной цветовой палитры EGA
| Код цвета | Цвет | Вид | ||
| 0 | Черный | |||
| 1 | Синий | |||
| 2 | Зеленый | |||
| 3 | Бирюзовый | |||
| 4 | Красный | |||
| 5 | Фиолетовый | |||
| 6 | Коричневый | |||
| 7 | Белый | |||
| 8 | Серый | |||
| 9 | Голубой | |||
| 10 | Салатовый | |||
| 11 | Светло-бирюзовый | |||
| 12 | Розовый | |||
| 13 | Светло-фиолетовый | |||
| 14 | Желтый | |||
| 15 | Ярко-белый | |||
Основы организации подпрограмм
Все современные программы разрабатываются по модульному принципу – программа обычно состоит из одной или нескольких небольших частей, называемых подпрограммами или процедурами, и одной главной программы, которая вызывает эти процедуры на выполнение, передавая им управление процессором. После завершения работы процедуры возвращают управление главной программе и выполнение продолжается с команды, следующей за командой вызова подпрограммы.
Достоинством такого метода является возможность разработки программ значительно большего объема небольшими функционально законченными частями. Кроме того, эти подпрограммы можно использовать в других программах, не прибегая к переписыванию частей программного кода. В довершение ко всему, так как размер сегмента не может превышать 64К, то при разработке программ с объемом кода более 64К, просто не обойтись без модульного принципа.
Язык программирования Ассемблера поддерживает применение процедур двух типов – ближнего (near) и дальнего (far).
Процедуры ближнего типа должны находится в том же сегменте, что и вызывающая программа. Дальний тип процедуры означает, что к ней можно обращаться из любого другого кодового сегмента.
При вызове процедуры в стеке сохраняется адрес возврата в вызывающую программу:
— при вызове ближней процедуры – слово, содержащее смещение точки вызова относительно текущего кодового сегмента;
— при вызове дальней процедуры – слово, содержащее адрес сегмента, в котором расположена точка возврата, и слово, содержащее смещение точки возврата в этом сегменте.
В общем случае группу команд, образующих подпрограмму, можно никак не выделять в тексте программы. Для удобства восприятия в языке Ассемблера процедуры принято оформлять специальным образом. Описание процедуры имеет следующий синтаксис:
Следует обратить внимание, что в директиве PROC после имени не ставится двоеточие, хотя имя и считается меткой.
Параметр, указываемый после ключевого слова PROC, определяет тип процедуры: ближний (NEAR) или дальний (FAR). Если параметр отсутствует, то по умолчанию процедура считается ближней.
В общем случае, размещать подпрограмму в теле программы можно где угодно, но при этом следует помнить, что сама по себе подпрограмма выполняться не должна, а должна выполняться лишь при обращении к ней. Поэтому подпрограммы принято размещать либо в конце сегмента кода, после команд завершения программы, либо в самом начале сегмента кода, перед точкой входа в программу. В больших программах подпрограммы нередко размещают в отдельном кодовом сегменте.
Передавать фактические параметры процедуре можно несколькими способами. Простейший способ – передача параметров через регистры: основная программа записывает параметры в какие-либо регистры, а процедура по мере необходимости извлекает их из этих регистров и использует в своей работе. Такой способ имеет один основной недостаток: передавать параметры через регистры можно если их немного (если много, то просто не хватит регистров). Решить это проблему можно, передавая параметры через стек. В этом случае основная программа записывает параметры в стек и вызывает подпрограмму, подпрограмма работает с параметрами и, возвращая управление, очищает стек.
Для работы с подпрограммами в систему команд процессора включены специальные команды, это вызов подпрограммы CALL и возврат управления RET.
Все команды вызова CALL безусловны. Внутрисегментный вызов NEAR CALL используется для передачи управления процедуре, находящейся в том же сегменте. Он указывает новое значение регистра IP и сохраняет старое значение счетчика команд (IP) в стеке в качестве адреса возврата. Межсегментный вызов FAR CALL используется для передачи управления процедуре, находящейся в другом сегменте или даже программном модуле. Он задает новые значения сегмента CS и смещения IP для дальнейшего выполнения программы и сохраняет в стеке как регистр IP, так и регистр CS.
Все возвраты RET являются косвенными переходами, поскольку извлекают адрес перехода из вершины стека. Внутрисегментный возврат извлекает из стека одно слово и помещает его в регистр IP, а межсегментный возврат извлекает из стека два слова, помещая слова из меньшего адреса в регистр IP, а слово из большего адреса – в регистр CS. Команда RET может иметь операнд, который представляет собой значение, прибавляемое микропроцессором к содержимому указателя стека SP после извлечения адреса возврата (очистка стека).
Модифицируем программу из примера 3.1, разбив ее на процедуры и организовав в цикле обращение к подпрограмме с передачей ей параметров. Поскольку введение процедур несколько изменяет структуру программы, пример 3.2 приведен не фрагментарно, а полностью, включая описание сегментов.
Пример 3.2. Вывод на экран горизонтальной прямой с помощью подпрограммы.
Text segment ’code’ ;(1)Начало сегмента команд assume CS:text,DS:dat ;(2) ;Подпрограмма вывода одной точки. Параметры при вызове находятся в ;ячейках памяти: color - цвет точки, vpage - видеостраница, ;x - X-координата, y - Y-координата draw proc ;(3)Объявление процедуры - подпрограммы mov AH,Och ;(4)Функция вывода пиксела mov AL,color ;(5)Цвет mov BH,vpage ;(6)Видеостраница mov CX,x ;(7)X - координата mov DX,y ;(8)Y - координата int 10h ;(9)Вызов BIOS ret ;(10)Команда выхода из подпрограммы draw endp ;(11)Конец процедуры ;Главная процедура, с которой начинается выполнение программы main proc ;(12)Объявление главной процедуры mov AX,data ;(13)Инициализация сегментного mov DX,AX ;(14)регистра DS ;Установим графический режим EGA mov AH,00h ;(15)Функция задания режима mov AL,10h ;(16)Графический режим EGA int 10h ;(17)Вызов BIOS ;Нарисуем горизонтальную линию в цикле по X mov CX,300 ;(18)Число точек по горизонтали line: push CX ;(19)Сохраним его в стеке call draw ;(20)Вызов подпрограммы inc x ;(21)Инкремент X - координаты pop CX ;(22)Восстановим счетчик шагов loop line ;(23)Цикл из CX шагов ;Остановим программу для наблюдения результата ее работы mov AH,08h ;(24)Функция ввода с клавиатуры int 21h ;(25)Вызов DOS ;Переключим видеоадаптер назад в текстовый режим mov AH,00h ;(26)Функция задания режима mov AL,03h ;(27)Текстовый режим int 10h ;(28)Вызов BIOS mov AX,4C00h ;(29)Завершение программы int 21h ;(30) main endp ;(31)Конец главной процедуры text ends ;(32)Конец сегмента команд data segment ;(33)Начало сегмента данных x dw 150 ;(34)Текущая X - координата y dw 175 ;(35)Текущая Y - координата color db 14 ;(36)Цвет точек vpage db 0 ;(37)Видеостраница data ends ;(38)Конец сегмента данных stack segment stack ;(39)Начало сегмента стека dw 128 dup (0) ;(40)Стек stack ends ;(41)Конец сегмента стека end main ;(42) Конец текста программы
Программа состоит теперь из двух процедур — главной с именем main и процедуры — подпрограммы с именем draw. Каждая процедура начинается оператором proc, перед которым указывается имя процедуры, а заканчивается оператором endp (end procedure, конец процедуры)(пары предложений 3, 11 и 12, 31). Порядок процедур в программе в большинстве случаев не имеет значения, однако имя главной процедуры, с которой начинается выполнение программы, должно быть указано в качестве операнда директивы end, завершающей текст программы (предложение 42).
Подпрограммы вызываются оператором call (вызов); каждая подпрограмма должна заканчиваться командой ret (return, возврат), которая передает управление в точку возврата, т. е. на команду вызывающей программы, следующую за командой call.
Подпрограмма draw выводит на экран одну точку. В качестве входных параметров она должна получить две координаты точки, ее цвет, а также номер видеостраницы, на которую выводится изображение. В языке ассемблера нет установленных правил передачи параметров подпрограмме. Их можно передать через регистры общего назначения, стек или ячейки памяти. В примере 3.2 используется последний способ, не самый быстрый, но наиболее наглядный. Для хранения и модификации параметров в сегменте данных предусмотрены ячейки х, у, color и vpage. В данном примере вывода горизонтальной линии в трех ячейках хранятся константы, и лишь ячейка х модифицируется.
При использовании подпрограммы основной цикл упрощается. Фактически в нем лишь две содержательные строки: вызов подпрограммы draw и инкремент Х-координаты в ячейке х. Однако сохранение в стеке и восстановление регистра СХ является обязательным, потому что он используется в подпрограмме для задания Х-координаты.
В примере 3.3 показано, как можно, в дополнение к горизонтальной, вывести на экран и вертикальную линию. В данном примере реализовано построение прямоугольника путем рисования горизонтальных и вертикальных линий в соответствующих подпрограммах. Здесь не используется сегмент данных, поэтому он не инициализируется в начале программы.
Пример 3.3. Вывод на экран прямоугольника.
text segment 'code' ;(1) начало сегмента команд assume CS:text ;(2) vertical proc ;(3) объявление процедуры построения вертикальной линии v: ;(4) push CX ;(5) сохраним в стек счетчик цикла mov AH,0Ch ;(6) функция вывода пикселя mov AL,6 ;(7) установка цвета mov BH,0 ;(8) видеостраница mov CX,SI ;(9) установка X-координаты int 10h ;(10) вызов BIOS inc DX ;(11) счетчик Y-координаты pop CX ;(12) выгрузим из стека счетчик цикла loop v ;(13) меньшим его на единицу ret ;(14) выход из подпрограммы vertical endp ;(15) конец текста подпрограммы horizontal proc ;(16) объявление процедуры построения горизонтальной линии h: ;(17) push CX ;(18) сохраним в стек счетчик цикла mov AH,0Ch ;(19) функция вывода пикселя mov AL,6 ;(20) установка цвета mov BH,0 ;(21) видеостраница mov CX,SI ;(22) установка X-координаты int 10h ;(23) вызов BIOS inc SI ;(24) счетчик Х-координаты pop CX ;(25) выгрузим из стека счетчик цикла loop h ;(26) уменьшим его на единицу ret ;(27) выход из подпрограммы horizontal endp ;(28) конец текста подпрограммы begin: ;(29) начало основной программы mov AX,00h ;(30) функция задания режима mov AL,10h ;(31) графический режим EGA int 10h ;(32) вызов BIOS mov SI,300 ;(33) Х-координата mov DX,110 ;(34) Y-координата mov CX,50 ;(35) длина стороны call vertical ;(36) вызов подпрограммы mov SI,300 ;(37) Х-координата mov DX,110 ;(38) Y-координата mov CX,100 ;(39) длина стороны call horizontal ;(40) вызов подпрограммы mov AX,4C00h ;(41) завершение программы int 21h ;(42) text ends ;(43) конец сегмента команд end begin ;(44) конец текста программы
В данном примере рисование прямоугольника осуществляется построением четырех линий: двух горизонтальных и двух вертикальных. Для понимания работы программы достаточно проследить за алгоритмом построения по одной линии каждого типа, поскольку построения двух оставшихся отличаются только координатами начала вывода. Но помните, что для того, чтобы обнаружить на экране прямоугольник, необходимо добавить в программу соответствующие строки. Это не составит труда, если вы поймете, как работает данный алгоритм.
Как уже отмечалось, здесь не используется сегмент данных, поэтому он просто отсутствует в программе. Передача данных из основной программы в процедуру (подпрограмму) осуществляется посредством регистров. Обращаем ваше внимание, что в данном случае подпрограммы расположены перед текстом основной программы. Мы опускаем моменты, связанные с графическими особенностями, поскольку рассчитываем на вашу компетентность в данном вопросе, приобретенную при изучении более ранних примеров этого пособия. Важными здесь являются процедуры vertical и horizontal , реализующие соответственно построение вертикальных и горизонтальных линий. Для успешного выполнения в процедуру необходимо отправить значение начальных X и Y координат. Это выполняется в предложениях 33 (37) и 34 (38). В следующем предложении передается значение длины стороны прямоугольника, которое фактически является значением счетчика цикла подпрограмм в начальном состоянии. После этого можно вызывать процедуру, что и отражено в предложении 36 (40). Переходим к анализу работы подпрограмм. Он не потребует большого умственного напряжения. В самом начале необходимо сохранить в стеке текущее значение счетчика цикла (предложение 5 (18)), это будет осуществляться на каждом шаге цикла. В 9 (22) предложении поместим в регистр СХ значение координаты Х. Далее выводим пиксель на экран. Как вы уже, наверняка, заметили, эти две процедуры отличаются лишь в одном: в первой мы инкрементируем счетчик Y-координаты (предложение 11), а во второй – Х-координаты (предложение 24). После этого не забываем выгрузить из стека значение счетчика цикла. Напомним, что при использовании подпрограмм это важно вдвойне, т.к. к моменту выхода из подпрограммы в стеке не должно остаться ничего, что было туда помещено после вызова подпрограммы. Иначе мы не сможем вернуться в текст основной программы.
Механизм вызова подпрограмм
Рассмотрим механизм выполнения конкретных команд call draw и ret из примера 3.2. На рис. 3.1 приведены фрагменты загрузочного модуля программы 3.2 с указанием расположения некоторых команд, их кодов, смещений, мнемонических обозначений и описания их действия. Показана также часть сегмента данных.
Сегмент команд начинается с процедуры draw. Первая команда этой процедуры mov AH,OCh имеет поэтому смещение (относительный адрес в сегменте команд) ООООП. Процедура draw занимает 14h==20 байт с относительными адресами от OOOOh до 0013h. Последней командой процедуры draw является однобайтовая команда ret с кодом C3h.
Рис. 3.1. Фрагменты загрузочного модуля программы 3.2 с поясняющей информацией.
За процедурой draw располагается главная процедура main. Ее первая команда mov AX,data имеет смещение 0014h. Код команды включает код операции mov (B8h) и значение имени data, равное сегментному адресу сегмента данных. При загрузке программы под управлением отладчика сегментный адрес data оказался равным 4476h.
Команда call draw расположена по адресу 0023h. В ее полный код входит код операции call (E8h) и адрес процедуры draw, на которую надо осуществить переход. Этот адрес записан в виде смещения к началу процедуры draw относительно текущего содержимого IP, т.е. относительно адреса следующей команды (в нашем случае команды inc x). Смещение это знаковое и в данном случае отрицательное, так как процедура draw располагается до процедуры main. Поскольку адрес draw равен 0, а адрес следующей команды равен 26h, в коде команды записано число -26h, которое по правилам записи отрицательных чисел выражается кодом FFDAh (знаковые числа будут рассмотрены позднее).
Главная процедура занимает 18h=24 байт, а первый свободный байт после конца этой процедуры имеет смещение 003Сh. На этом заканчивается сегмент команд. С ближайшего адреса, кратного 16 (44760h в нашем случае), начинается сегмент данных. Относительные адреса в нем опять начинаются с 0, поэтому смещение первой переменной х равно 0, смещение следующей переменной у — 2 и т.д. Весь сегмент данных занимает всего 6 байт.
Вернемся к рассмотрению команд call и ret. При выполнении команды call процессор помещает адрес возврата (содержимое IP, т.е. адрес следующей команды) в стек, а в IP заносит относительный адрес процедуры draw, который находится суммированием текущего содержимого IP и смещения, записанного в коде команды call. В результате указатель стека SP смещается вверх на одно слово, а процессор переходит на выполнение подпрограммы.
Команда ret выполняет обратную операцию — извлекает из верхнего слова стека (с восстановлением исходного состояния указателя стека SP) адрес возврата и загружает его в IP, в результате чего процессор возвращается к выполнению вызывающей процедуры.
Из сказанного ясно, что если в подпрограмме используется стек, с ним надо работать очень аккуратно: все, что заносится в стек в процессе выполнения подпрограммы, должно быть обязательно снято с него до выполнения команды ret, иначе эта команда извлечет из стека и загрузит в IP не адрес возврата, а какое-то данное, что заведомо приведет к нарушению выполнения программы.
Рассмотренный нами вызов подпрограммы носит название прямого ближнего (или внутрисегментного) вызова. Прямым такой вызов называется потому, что адрес перехода хранится непосредственно в коде команды (а это, в свою очередь, получилось потому, что мы указали в качестве операнда команды call имя подпрограммы). Если бы адрес подпрограммы хранился в каком-то другом месте (именно, в регистре или в ячейке памяти), то вызов был бы косвенным. Вторая характеристика вызова говорит о том, что вызываемая подпрограмма находится в том же сегменте, что и вызывающая процедура. В этом случае для перехода на подпрограмму надо знать лишь «половину» полного адреса подпрограммы, именно, относительный адрес точки перехода. Сегментный адрес остается тем же; он не фигурирует в строке вызова подпрограммы и отсутствует в коде команды. В дальнейшем мы рассмотрим и другой вид подпрограмм — дальние подпрограммы, для обращения к которым следует применять межсегментные вызовы.
Цвета и стили для Visual Studio
Область применения:
Visual Studio Visual Studio для Mac
Visual Studio Code ![]()
Использование цвета в Visual Studio
В Visual Studio цвет используется в первую очередь как средство коммуникации, а не как украшение. Используйте минимальный цвет и зарезервируете его в ситуациях, когда вы хотите:
- Обмен данными о значении или принадлежности (например, модификаторы платформы или языка)
- Обратите внимание (например, указывающее изменение состояния)
- Повышение удобочитаемости и предоставление ориентиров для навигации по пользовательскому интерфейсу
- Увеличение желательности
Существует несколько вариантов назначения цветов элементам пользовательского интерфейса в Visual Studio. Иногда может быть трудно выяснить, какой вариант вы хотите использовать, или как его правильно использовать. Этот раздел поможет вам:
- Общие сведения о различных службах и системах, используемых для определения цветов в Visual Studio.
- Выберите правильный параметр для заданного элемента.
- Правильно используйте выбранный вариант.
Никогда не жесткого шестнадцатеричного кода, RGB или системных цветов для элементов пользовательского интерфейса. Использование служб обеспечивает гибкость при настройке оттенка. Кроме того, без службы вы не сможете воспользоваться возможностями переключения тем службы VSColor.
Методы назначения цвета элементам интерфейса Visual Studio
Выберите метод, подходящий для элементов пользовательского интерфейса.
| Пользовательский интерфейс | Метод | Какие? |
|---|---|---|
| Внедренные или автономные диалоговые окна. | Системные цвета | Системные имена, позволяющие операционной системе определять цвет и внешний вид элементов пользовательского интерфейса, таких как общие элементы управления диалогом. |
| У вас есть пользовательский интерфейс, который вы хотите быть согласованы с общей средой VS, и у вас есть элементы пользовательского интерфейса, соответствующие категории и семантическому значению общих маркеров. | Общие цвета | Существующие предопределенные имена маркеров цвета для определенных элементов пользовательского интерфейса |
| У вас есть отдельная функция или группа функций, и общий цвет для аналогичных элементов отсутствует. | Пользовательские цвета | Имена маркеров цвета, относящиеся к области и не предназначенные для совместного использования с другим пользовательским интерфейсом |
| Вы хотите разрешить конечным пользователям настраивать пользовательский интерфейс или содержимое (например, для текстовых редакторов или специализированных окон конструктора). | Настройка конечных пользователей |
Темы Visual Studio
Visual Studio имеет три различных цветовых темы: светлые, темные и синий. Он также обнаруживает режим высокой контрастности, который является системной цветовой темой, предназначенной для специальных возможностей.
Пользователям предлагается выбрать тему во время первого использования Visual Studio и переключить темы позже, перейдя в раздел «Параметры > среды > инструментов>» и выбрав новую тему в раскрывающемся меню «Цветовая тема».
Пользователи также могут использовать панель управления для переключения всей системы в одну из нескольких тем высокой контрастности. Если пользователь выбирает тему высокой контрастности, то селектор цветов Visual Studio больше не влияет на цвета в Visual Studio, хотя все изменения темы сохраняются при выходе пользователя из режима высокой контрастности. Дополнительные сведения о режиме высокой контрастности см. в разделе «Выбор цветов высокой контрастности».
Служба VSColor
Visual Studio предоставляет службу цвета среды, известную как служба VSColor, которая позволяет привязать значения цветов элементов пользовательского интерфейса к именованной записи, содержащей значения цвета для каждой темы Visual Studio. Это гарантирует, что цвета будут автоматически изменяться, чтобы отразить текущую выбранную пользователем тему или системный режим высокой контрастности. Использование службы означает, что реализация всех изменений цвета, связанных с темой, обрабатывается в одном месте, и если вы используете общие цвета из службы, пользовательский интерфейс автоматически отражает новые темы в будущих версиях Visual Studio.
Внедрение
Исходный код Visual Studio содержит несколько файлов определения пакета, содержащих списки имен токенов и соответствующие значения цвета для каждой темы. Служба цветов считывает VSColors, определенную в этих файлах определения пакета. Эти цвета ссылаются в разметке XAML или коде, а затем загружаются с помощью IVsUIShell5.GetThemedColor метода или сопоставления DynamicResource.
Системные цвета
Общие элементы управления ссылались на системные цвета по умолчанию. Если вы хотите, чтобы пользовательский интерфейс использовал системные цвета, например при создании внедренного или автономного диалогового окна, вам не нужно ничего делать.
Общие цвета в службе VSColor
Элементы интерфейса должны отражать общую среду Visual Studio. Повторно используя общие цвета, подходящие для созданного компонента пользовательского интерфейса, вы гарантируете, что ваш интерфейс согласован с другими интерфейсами Visual Studio, и что ваши цвета будут обновляться автоматически при добавлении или обновлении тем.
Прежде чем использовать общие цвета, убедитесь, что вы понимаете, как правильно использовать их. Неправильное использование общих цветов может привести к несогласованности, разочарованию или запутанности пользователей.
Настраиваемые пользователем цвета
Иногда необходимо разрешить пользователю настраивать пользовательский интерфейс, например при создании редактора кода или области конструктора. Настраиваемые компоненты пользовательского интерфейса находятся в разделе «Шрифты и цвета» диалогового окна «Параметры инструментов>», где пользователи могут изменить цвет переднего плана, цвет фона или оба.

Архитектура службы цвета среды разработки
Доступ к службе
Существует несколько различных способов доступа к службе VSColor в зависимости от того, какой цвет маркеров вы используете и какой код у вас есть.
Стандартные цвета среды
Из машинного кода
Оболочка предоставляет службу, которая предоставляет доступ к COLORREF цветам. Служба или интерфейс:
IVsUIShell2::GetVSSysColorEx(VSSYSCOLOR dwSysColIndex, DWORD *pdwRGBval)
В файле VSShell80.idl перечисление __VSSYSCOLOREX имеет константы цвета оболочки. Чтобы использовать его, передайте в качестве значения индекса один из значений из enum __VSSYSCOLOREX документированного в MSDN или регулярного номера индекса, который принимает системный API GetSysColor Windows. Это возвращает значение RGB цвета, которое должно использоваться во втором параметре.
При сохранении пера или кисти с новым цветом необходимо AdviseBroadcastMessages (от оболочки Visual Studio) и прослушивать WM_SYSCOLORCHANGE сообщения WM_THEMECHANGED .
Чтобы получить доступ к цветовой службе в машинном коде, выполните вызов, похожий на следующее:
pUIShell2->GetVSSysColorEx(VSCOLOR_COLOR_NAME, &rgbLOCAL_COLOR);
Возвращаемые COLORREF GetVSSysColorEx() значения содержат только компоненты R,G,B цвета темы. Если запись темы использует прозрачность, значение альфа-канала отключено карта перед возвратом. Таким образом, если цвет среды должен использоваться в месте, где важен канал прозрачности, следует использовать IVsUIShell5.GetThemedColor вместо IVsUIShell2::GetVSSysColorEx этого, как описано далее в этом разделе.
Из управляемого кода
Доступ к службе VSColor с помощью машинного кода довольно прост. Однако если вы работаете с управляемым кодом, определить, как использовать службу, может оказаться сложной. Учитывая это, ниже приведен фрагмент кода C#, демонстрирующий этот процесс:
private void VSColorPaint(object sender, System.Windows.Forms.PaintEventArgs e) < //getIVSUIShell2 IVsUIShell2 uiShell2 = Package.GetService(typeof(SVsUIShell)) as IVsUIShell2; Debug.Assert (uiShell2 != null, "failed to get IVsUIShell2"); if (uiShell2 != null) < //get the COLORREF structure uint win32Color; uiShell2.GetVSSysColorEx((int)__VSSYSCOLOREX.VSCOLOR_SMARTTAG_HOVER_FILL, out win32Color); //translate it to a managed Color structure Color myColor = ColorTranslator.FromWin32((int)win32Color); //use it e.Graphics.FillRectangle(new SolidBrush(myColor), 0, 0, 100, 100); >>
Если вы работаете в Visual Basic, используйте:
Dim myColor As Color = ColorTranslator.FromWin32((Integer)win32Color)
Из пользовательского интерфейса WPF
Вы можете привязаться к цветам Visual Studio с помощью значений, экспортированных в приложение ResourceDictionary . Ниже приведен пример использования ресурсов из таблицы цветов, а также привязки к данным шрифта среды в XAML.
Вспомогательные классы и методы для управляемого кода
Для управляемого кода библиотека управляемой платформы пакетов оболочки ( Microsoft.VisualStudio.Shell.12.0.dll ) содержит несколько вспомогательных классов, упрощающих использование тематических цветов.
Вспомогательные методы в классе в Microsoft.VisualStudio.Shell.VsColors MPF включают GetThemedGDIColor() и GetThemedWPFColor() . Эти вспомогательные методы возвращают значение цвета записи темы как System.Drawing.Color или System.Windows.Media.Color , используемого в WinForms или пользовательском интерфейсе WPF.
IVsUIShell5 shell5; Button button = new Button(); button.BackColor = GetThemedGDIColor(shell5, SolutionExplorerColors.SelectedItemBrushKey); button.ForeColor = GetThemedGDIColor(shell5, SolutionExplorerColors.SelectedItemTextBrushKey); ////// Gets a System.Drawing.Color value from the current theme for the given color key. /// /// The IVsUIShell5 service, used to get the color's value. /// The key to find the color for. ///The current theme's value of the named color. public static System.Drawing.Color GetThemedGDIColor(this IVsUIShell5 vsUIShell, ThemeResourceKey themeResourceKey) < Validate.IsNotNull(vsUIShell, "vsUIShell"); Validate.IsNotNull(themeResourceKey, "themeResourceKey"); byte[] colorComponents = GetThemedColorRgba(vsUIShell, themeResourceKey); // Note: The Win32 color we get back from IVsUIShell5.GetThemedColor is ABGR return System.Drawing.Color.FromArgb(colorComponents[3], colorComponents[0], colorComponents[1], colorComponents[2]); >private static byte[] GetThemedColorRgba(IVsUIShell5 vsUIShell, ThemeResourceKey themeResourceKey) < Guid category = themeResourceKey.Category; __THEMEDCOLORTYPE colorType = __THEMEDCOLORTYPE.TCT_Foreground if (themeResourceKey.KeyType == ThemeResourceKeyType.BackgroundColor || themeResourceKey.KeyType == ThemeResourceKeyType.BackgroundBrush) < colorType = __THEMEDCOLORTYPE.TCT_Background; >// This call will throw an exception if the color is not found uint rgbaColor = vsUIShell.GetThemedColor(ref category, themeResourceKey.Name, (uint)colorType); return BitConverter.GetBytes(rgbaColor); > public static System.Windows.Media.Color GetThemedWPFColor(this IVsUIShell5 vsUIShell, ThemeResourceKey themeResourceKey)
Класс также можно использовать для получения идентификаторов VSCOLOR для заданного ключа цветового ресурса WPF или наоборот.
public static string GetColorBaseKey(int vsSysColor); public static bool TryGetColorIDFromBaseKey(string baseKey, out int vsSysColor);
Методы VsColors класса запрашивают службу VSColor для возврата значения цвета при каждом вызове. Для получения значения цвета в качестве System.Drawing.Color альтернативы лучшей производительности вместо этого следует использовать методы Microsoft.VisualStudio.PlatformUI.VSColorTheme класса, которые кэшируют значения цвета, полученные из службы VSColor. Класс подписывается внутренне на события трансляции сообщений оболочки и отменяется карта кэшированное значение при возникновении события изменения темы. Кроме того, класс предоставляет объект . Понятное событие NET для подписки на изменения темы. ThemeChanged Используйте событие, чтобы добавить новый обработчик и использовать GetThemedColor() метод для получения значений цвета для ThemeResourceKeys интересующих вас значений. Пример кода может выглядеть следующим образом:
public MyWindowPanel() < InitializeComponent(); // Subscribe to theme changes events so we can refresh the colors VSColorTheme.ThemeChanged += VSColorTheme_ThemeChanged; RefreshColors(); >private void VSColorTheme_ThemeChanged(ThemeChangedEventArgs e) < RefreshColors(); // Also post a message to all the children so they can apply the current theme appropriately foreach (System.Windows.Forms.Control child in this.Controls) < NativeMethods.SendMessage(child.Handle, e.Message, IntPtr.Zero, IntPtr.Zero); >> private void RefreshColors() < this.BackColor = VSColorTheme.GetThemedColor(EnvironmentColors.ToolWindowBackgroundColorKey); this.ForeColor = VSColorTheme.GetThemedColor(EnvironmentColors.ToolWindowTextColorKey); >protected override void Dispose(bool disposing) < if (disposing) < VSColorTheme.ThemeChanged -= this.VSColorTheme_ThemeChanged; base.Dispose(disposing);>>
Выбор цветов высокой контрастности
Windows использует несколько высококонтрастных системных тем, которые повышают цветовую контрастность текста, фона и изображений, что делает элементы более четкими на экране. По соображениям специальных возможностей важно правильно реагировать на элементы интерфейса Visual Studio, когда пользователи переключаются на тему высокой контрастности.
Для тем высокой контрастности можно использовать только горстку системных цветов. При выборе системных цветов помните следующие советы:
- Выберите системные цвета с тем же семантическим значением , что и элемент, который вы цветуете. Например, если вы выбираете цвет высокой контрастности для текста в окне, используйте WindowText и не ControlText.
- Выберите пары переднего плана или фона вместе или вы не будете уверены, что ваш выбор цвета будет работать во всех темах высокой контрастности.
- Определите, какие части пользовательского интерфейса являются наиболее важными и убедитесь, что области содержимого будут выделяться. Вы потеряете много деталей, что тонкие различия в цветовом оттенке обычно отличаются, поэтому использование сильных цветов границ распространено для определения областей содержимого, потому что нет вариантов цвета для разных областей контента.
Системный набор цветов
Таблица в блоге группы WPF: SystemColors Reference указывает полный набор системных цветов и соответствующие оттенки, отображаемые в каждой теме.
При применении этого ограниченного набора цветов к пользовательскому интерфейсу ожидается, что вы потеряете тонкие детали, которые присутствовали в обычных темах. Ниже приведен пример пользовательского интерфейса с тонкими серыми цветами, которые используются для различения областей в окне инструментов. При паре с тем же окном, которое отображается в режиме высокой контрастности, можно увидеть, что все фоны одинаковые оттенки и границы этих областей указываются только границами:

Пример того, как тонкие детали теряются в высокой контрастности
Выбор цветов текста в редакторе
Цветной текст используется в редакторе или на поверхности конструктора, чтобы указать значение, например, чтобы упростить идентификацию групп похожих элементов. Однако в теме высокой контрастности у вас нет возможности различать более трех цветов текста. WindowText, GrayText и HotTrackText являются единственными цветами, доступными на поверхностях WindowBackground. Так как вы не можете использовать более трех цветов, тщательно выберите наиболее важные различия, которые вы хотите отобразить в режиме высокой контрастности.
Оттенки для каждого из имен маркеров, разрешенных на поверхности редактора, так как они отображаются в каждой теме высокой контрастности:

Сравнение редактора высокой контрастности
Примеры поверхности редактора в синей теме:

Редактор в «Голубой» теме

Редактор в теме Высокой контрастности #1
Варианты использования
Многие распространенные элементы пользовательского интерфейса уже имеют определенные цвета высокой контрастности. Вы можете ссылаться на эти шаблоны использования при выборе собственных системных цветов, чтобы элементы пользовательского интерфейса соответствовали аналогичным компонентам.
| Системный цвет | Использование |
|---|---|
| ActiveCaption | — Активные IDE и кнопки с рафтированным окном глифы на наведении указателя мыши и нажатие клавиши — фон строки заголовка для интегрированной среды разработки и рафтированных окон — Фон строки состояния по умолчанию |
| ActiveCaptionText | — активные окна интегрированной среды разработки и рафтированные окна для переднего плана строки заголовка (текст и глифы) — Фон и граница активных кнопок окна при наведении указателя мыши и нажатия клавиши |
| Элемент управления | — Поле со списком, раскрывающийся список и элемент управления поиском по умолчанию и отключенный фон, включая кнопку раскрывающегося списка — Фон целевой кнопки «Закрепить» — фон панели команд — фон окна инструментов |
| ControlDark | — фон интегрированной среды разработки — Разделители строк меню и команд — граница панели команд — Тени меню — вкладка окна инструментов по умолчанию и наведите указатель мыши на границу и разделитель — Фон кнопки переполнения документа — граница глифа целевого объекта док-станции |
| ControlDarkDarkDark | — Нефокусировано, выбранное окно вкладки документа |
| ControlLight | — граница вкладки «Автоматическое скрытие» — поле со списком и граница раскрывающегося списка — фон и граница целевого целевого объекта док-станции |
| ControlLightLight | — Выбранная, ориентированная временная граница |
| ControlText | — поле со списком и раскрывающийся список глифов — Текст вкладки «Окно инструментов» без выбора |
| Серый текст | — Поле со списком и раскрывающийся список отключенные границы, раскрывающийся список глиф, текст и текст элемента меню — Отключенный текст меню — Текст заголовка элемента управления «Параметры поиска» — разделитель разделов элемента управления поиском |
| Выделить | — Все наведите указатель мыши и нажатые фоны и границы, кроме фона раскрывающегося списка со списком, а также границы кнопки переполнения документа — Фоны выбранных элементов |
| HighlightText | — все наведите указатель мыши и нажатые на переднем плане (текст и глифы) — Окно «Фокус» и элемент управления окном вкладки документа — Граница строки заголовка окна с выделенным инструментом — Фокус, выбранная временная вкладка переднего плана — Граница кнопки переполнения документа при наведении указателя мыши и нажатии клавиши — Выбранная граница значка |
| HotTrack | — фон полосы прокрутки и граница при нажатии клавиши — глиф стрелки со стрелкой прокрутки при нажатии |
| InactiveCaption | — Неактивная интегрированная среда разработки и глифы окна с рафированными глифами при наведении указателя мыши — фон строки заголовка для интегрированной среды разработки и рафтированных окон — отключенный фон элемента управления поиском |
| InactiveCaptionText | — неактивная интегрированная среда разработки и строка заголовков окон для переднего плана (текст и глифы) — Неактивные кнопки окна фона и границы при наведении указателя мыши — фон и граница окна нефокусированного окна инструментов — отключенный элемент управления поиска переднего плана |
| Меню | — фон раскрывающегося меню — установлен и отключен фон проверка метки |
| MenuText | — граница раскрывающегося меню — флажки — глифы меню — текст раскрывающегося меню — Выбранная граница значка |
| Полоса прокрутки | — Полоса прокрутки и фон со стрелкой прокрутки, все состояния |
| Окно | — Фон вкладки «Автоматическое скрытие» — фон строки меню и полки команд — фон и граница окна документа без фокусировки или отмены выбора, а также для открытых и временных вкладок — Фон строки заголовка окна без фокусировки инструментов — Фон вкладки окна инструментов, выбранный и не выбранный |
| Окно кадра | — граница интегрированной среды разработки |
| WindowText | — автоматическое скрытие вкладки переднего плана — вкладка «Выбранное окно инструментов» на переднем плане — вкладка «Нефокусированные» окна документа и нефокусированные или не выбранные временные вкладки переднего плана — представление дерева по умолчанию переднего плана и наведите указатель мыши на неизбираемый глиф — выбранная граница вкладки окна инструментов — фон полосы прокрутки, граница и глиф |
Отображение цветов для конечных пользователей
Иногда необходимо разрешить пользователю настраивать пользовательский интерфейс, например при создании редактора кода или области конструктора. Наиболее распространенным способом этого является диалоговое окно «Параметры инструментов>». Если у вас нет специализированного пользовательского интерфейса, требующего специальных элементов управления, проще всего представить настройку на странице «Шрифты и цвета » в разделе «Среда» диалогового окна. Для каждого элемента, который предоставляется для настройки, пользователь может изменить цвет переднего плана, цвет фона или оба элемента.
Создание VSPackage для настраиваемых цветов
VSPackage может управлять шрифтами и цветами с помощью пользовательских категорий и отображения элементов на странице свойств Fonts и Colors. При использовании этого механизма VSPackages должны реализовать интерфейс IVsFontAndColorDefaultsProvider и связанные с ним интерфейсы.
В принципе этот механизм можно использовать для изменения всех существующих элементов отображения и категорий, содержащих их. Однако его не следует использовать для изменения категории текстового редактора или его отображаемых элементов. Дополнительные сведения о категории «Текстовый редактор» см. в разделе «Обзор шрифта и цвета».
Чтобы реализовать пользовательские категории или отображаемые элементы, необходимо выполнить следующее:
- Создайте или определите категории в реестре. Реализация IDE на странице свойств Fonts and Colors использует эти сведения для правильного запроса к службе, поддерживающей определенную категорию.
- Создайте или определите группы в реестре (необязательно). Может быть полезно определить группу, представляющую объединение двух или более категорий. Если определена группа, интегрированная среда разработки автоматически объединяет подкатегории и распределяет отображаемые элементы в группе.
- Реализуйте поддержку интегрированной среды разработки.
- Обработка изменений шрифта и цвета.
Создание или определение категорий
Создайте специальный тип записи реестра категорий, в которой [HKLM\SOFTWARE\Microsoft \Visual Studio\\\FontAndColors\\] не локализованное имя категории.
Заполните реестр двумя значениями:
| Имя. | Тип | Data | Description |
|---|---|---|---|
| Категория | REG_SZ | GUID | Идентификатор GUID, созданный для идентификации категории |
| Пакет | REG_SZ | GUID | GUID службы VSPackage, поддерживающей категорию |
Служба, указанная в реестре, должна предоставлять реализацию IVsFontAndColorDefaults для соответствующей категории.
Создание или идентификация групп
Создайте специальный тип записи реестра категорий, в которой [HKLM\SOFTWARE\Microsoft \Visual Studio\\\FontAndColors\\] не локализованное имя группы.
Заполните реестр двумя значениями:
| Имя. | Тип | Data | Description |
|---|---|---|---|
| Категория | REG_SZ | GUID | Идентификатор GUID, созданный для идентификации категории |
| Пакет | REG_SZ | GUID | GUID службы VSPackage, поддерживающей категорию |
Служба, указанная в реестре, должна предоставлять реализацию IVsFontAndColorGroup соответствующей группы.

Реализация интерфейса IVsFontAndColorGroup
Реализация поддержки интегрированной среды разработки
Реализуйте GetObject, который возвращает интерфейс IVsFontAndColorDefaults или IVsFontAndColorGroup интерфейс интегрированной среды разработки для каждой категории или guid группы.
Методы, реализованные с помощью IVsFontAndColorDefaults , должны предоставить интегрированную среду разработки следующим способом:
- Списки отображаемых элементов в категории
- Локализуемые имена для отображаемых элементов
- Отображение сведений для каждого члена категории
Каждая категория должна содержать по крайней мере один отображаемый элемент.
Интегрированная среда разработки использует IVsFontAndColorGroup интерфейс для определения объединения нескольких категорий.
Его реализация предоставляет интегрированную среду разработки:
- Список категорий, составляющих определенную группу
- Доступ к экземплярам IVsFontAndColorDefaults , поддерживающим каждую категорию в группе
- Локализованные имена групп
Обновление интегрированной среды разработки
Интегрированная среда разработки кэширует сведения о параметрах шрифта и цвета. Таким образом, после любых изменений конфигурации шрифта и цвета интегрированной среды разработки, чтобы обеспечить актуальность кэша, рекомендуется.
Обновление кэша выполняется через интерфейс IvsFontAndColorCacheManager и может выполняться глобально или только для выбранных элементов.
Обработка изменений шрифта и цвета
Для правильной поддержки цвета текста, отображаемого VSPackage, служба цветов, поддерживающая VSPackage, должна реагировать на изменения, инициированные пользователем, на странице свойств шрифтов и цветов.
Для этого пакет VSPackage должен:
- обработайте события , созданные IDE, реализуя интерфейс IVsFontAndColorEvents . Интегрированная среда разработки вызывает соответствующий метод после изменений пользователей страницы шрифтов и цветов. Например, он вызывает метод OnFontChanged , если выбран новый шрифт. ИЛИ
- опрос интегрированной среды разработки для изменений. Это можно сделать с помощью интерфейса IVsFontAndColor, реализованного системой служба хранилища. Хотя в основном для поддержки сохраняемости метод GetItem может получить сведения о шрифте и цвете для отображаемых элементов. Дополнительные сведения о параметрах шрифта и цвета см. в статье MSDN по доступу к хранимым шрифтам и цвету Параметры.
Чтобы убедиться, что результаты опроса правильны, используйте интерфейс IVsFontAndColorCacheManager, чтобы определить, требуется ли очистка кэша и обновление перед вызовом методов извлечения интерфейса IVsFontAndColor служба хранилища.
Регистрация пользовательского шрифта и цветовой категории без реализации интерфейсов
В следующем примере кода показано, как зарегистрировать настраиваемый шрифт и цветовую категорию без реализации интерфейсов:
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\8.0Exp\FontAndColors\CSharp Tool Window] "Package"="" "Category"="" "ToolWindowPackage"="" "NameID"=dword:00000064
В этом примере кода:
- «NameID» = идентификатор ресурса локализованного имени категории в пакете
- «ToolWindowPackage» = GUID пакета
- «Category»=»» это просто пример, и фактическое значение может быть новым GUID, предоставляемым реализутелем.
Настройка GUID категории свойств «Шрифт» и «Цвет»
В приведенном ниже примере кода показано, как задать идентификаторы GUID категории.
// m_pView is your IVsTextView IVsTextEditorPropertyCategoryContainer spPropCatContainer = (IVsTextEditorPropertyCategoryContainer)m_pView; if (spPropCatContainer != null) < IVsTextEditorPropertyContainer spPropContainer; Guid GUID_EditPropCategory_View_MasterSettings = new Guid(""); hr = spPropCatContainer.GetPropertyCategory( ref GUID_EditPropCategory_View_MasterSettings, out spPropContainer); if(hr == 0) < hr = spPropContainer.SetProperty( VSEDITPROPID.VSEDITPROPID_ViewGeneral_FontCategory, catGUID); hr = spPropContainer.SetProperty( VSEDITPROPID.VSEDITPROPID_ViewGeneral_ColorCategory, catGUID); >>
Изображения и значки для Visual Studio
Область применения:
Visual Studio Visual Studio для Mac
Visual Studio Code ![]()
Использование образа в Visual Studio
Перед созданием иллюстрации рассмотрите возможность использования более 1000 изображений из библиотеки изображений Visual Studio.
Типы изображений
- Значки. Небольшие изображения, отображаемые в командах, иерархиях, шаблонах и т. д. В Visual Studio по умолчанию используются значки размером 16×16 в формате PNG. Значки, созданные службой изображений, автоматически создают формат XAML для поддержки HDPI.
Примечание. Хотя изображения и используются в системе меню, не следует создавать значки для каждой команды. Просмотрите статью Меню и команды Visual Studio, чтобы узнать, следует ли добавлять значок для команды.
Конструктор значков
В Visual Studio используются значки в современном стиле, которые имеют четкую геометрию, баланс 50/50 позитива и негатива (светлого и темного) и используют прямые, понятные метафоры. Важнейшими аспектами дизайна значков являются ясность, упрощение и контекст.
- Ясность. Сфокусируйтесь на основной метафоре, которая придает значку смысл и индивидуальность.
- Упрощение. Уменьшите значок до основного значения — обозначьте тему с использованием только необходимых элементов и без излишеств.
- Контекст. Рассмотрите все аспекты роли значка во время разработки концепции, что очень важно при принятии решения о том, какие элементы составляют основную метафору значка. При разработке дизайна значков стоит избегать некоторых аспектов.
- Не используйте значки, обозначающие элементы пользовательского интерфейса, кроме случаев, когда это необходимо. Выберите более абстрактный или символьный подход, если элемент пользовательского интерфейса не является ни распространенным, ни очевидным, ни уникальным.
- Не используйте такие общие элементы, как документы, папки, стрелки и лупу. Используйте такие элементы только в том случае, если они указывают на значение значка. Например, лупа, обращенная вправо, должна указывать только на поиск и просмотр.
- Хотя некоторые устаревшие значки используют перспективу, не создавайте новые значки с перспективой за исключением случаев, когда без перспективы элемент теряет четкость.
- Не пытаетесь запихнуть в значок слишком много информации. Простое изображение, которое можно легко распознать или которое является легко узнаваемым символом, гораздо более удобно, чем чрезмерно сложный образ. Значок не может рассказать всю историю от начала до конца.
Создание значка
Разработка концепции
В пользовательском интерфейсе Visual Studio имеется широкий спектр типов значков. Во время разработки следует тщательно обдумывать тип значка. Не используйте непонятные или нестандартные объекты пользовательского интерфейса для элементов значков. В таких случаях следует выбрать символ, например со значком смарт-тега. Обратите внимание, что значение абстрактной бирки слева является более очевидным, чем расплывчатый вариант на основе пользовательского интерфейса справа:
| Правильное использование символьных изображений | Неправильное использование символьных изображений |
|---|---|
![]() |
![]() |
Существуют примеры, в которых стандартные, легко узнаваемые элементы пользовательского интерфейса хорошо подходят для значков. Добавление окна — один из таких примеров:
| Правильное использование элемента пользовательского интерфейса в значке | Неправильное использование элемента пользовательского интерфейса в значке |
|---|---|
![]() |
![]() |
Не используйте документ в качестве базового элемента, если он не является обязательным для значения значка. Без документа в значке «Добавить документ» (ниже) значение теряется, в то время как при обновлении элемента документа это значение передавать не требуется.
| Правильное использование значка документа | Неправильное использование значка документа |
|---|---|
Понятие «Показать» должно быть представлено значком, который лучше всего иллюстрирует то, что отображается, например, в значке «Показать все файлы». Метафору линзы при необходимости можно использовать для указания концепции «Просмотр», например в значке «Просмотр ресурсов».
| «Показать» | «Просмотр» |
|---|---|
![]() |
![]() |
Значок лупы, обращенной вправо, должен указывать только на поиск и просмотр. Лупа, обращенная влево, со значком плюс или минус должна указывать только на увеличение и уменьшение масштаба.
| «Поиск» | «Масштаб» |
|---|---|
![]() |
![]() |
В древовидных представлениях не используйте одновременно значки папки и модификатора. По возможности используйте только модификатор.
| Правильный значок представления в виде дерева | Неправильный значок представления в виде дерева |
|---|---|
![]() ![]() |
![]() ![]() |
Детали стиля
Макет
Структура элементов для стандартных значков 16×16:

Стек макета для значков 16 x 16
Элементы уведомлений о состоянии лучше использовать в качестве отдельных значков. Однако есть контексты, в которых уведомление должно быть наложено на базовый элемент, например в значке завершения задачи:
![]()
Отдельные значки уведомлений

Значок завершения задачи
Значки проектов обычно являются файлами ICO, содержащими несколько размеров. Большинство значков 16×16 содержат одни и те же элементы. Версии 32×32 содержат более подробную информацию, включая тип проекта, если это применимо.
![]()
Значки проекта из библиотеки элементов управления Windows VB, 16×16 и 32×32
Центрируйте значок в пиксельной рамке. Если это невозможно, выровняйте значок по верхнему или правому краю рамки.
![]()
Значок, отцентрированный внутри пиксельной рамки
![]()
Значок, выровненный по правому верхнему углу рамки
![]()
Значок, отцентрированный и выровненный по верхнему краю рамки
Чтобы добиться идеального выравнивания и баланса, избегайте засорения базового элемента глифами действий. Размещайте глиф в верхней левой части базового элемента. При добавлении дополнительного элемента учитывайте выравнивание и баланс значка.
| Правильное выравнивание и баланс | Неправильное выравнивание и баланс |
|---|---|
![]() |
![]() |
Обеспечьте равенство размеров для значков, которые имеют общие элементы и используются в наборах. Обратите внимание, что при неправильном сочетании круг и стрелка имеют слишком большой размер и не совпадают.
| Правильное сочетание размеров | Неправильное сочетание размеров |
|---|---|
![]() |
![]() |
Используйте согласованные линии и визуальный вес. Оцените, как создаваемый значок выглядит по сравнению с другими значками, сравнив их бок о бок. Никогда не используйте всю рамку 16×16, используйте 15×15 или меньше. Отношение негатива к позитиву (темного к светлому) должно быть 50/50.

Используйте простые сопоставимые формы и дополняющие углы для создания элементов без ущерба для их целостности. По возможности используйте углы 45° и 90°.
![]()
Перспектива
Значок должен быть четким и понятным. Используйте перспективу и источники света только при необходимости. Хотя использования перспективы в элементах значков и следует избегать, некоторые элементы без нее тяжело распознать. В таких случаях стилизованная перспектива передает ясности элементу.

3-точечная перспектива

1-точечная перспектива
Большинство элементов должны быть направлены вперед или под углом вправо:

Используйте источники света только для добавления ясности объекту.
| Правильный источник света | Неправильный источник света |
|---|---|
![]() |
![]() |
Используйте контуры только для улучшения читаемости или лучшей передачи метафоры. Баланс негатива и позитива (темного и светлого) должен составлять 50/50.
| Правильное использование контуров | Неправильное использование контуров |
|---|---|
![]() |
![]() |
Типы значков
Значки оболочки и панели команд содержат не более трех из следующих элементов: один базовый, один модификатор, одно действие или одно состояние.
![]()
Примеры значков оболочки и панели команд
Значки командной панели окна инструментов содержат не более трех из следующих элементов: один базовый, один модификатор, одно действие или одно состояние.
![]()
Примеры значков командной панели окна инструментов
Значки определителя контекста представления в виде дерева содержат не более трех из следующих элементов: один базовый, один модификатор, одно действие или одно состояние.
![]()
Примеры значков определителя контекста представления в виде дерева
Значки классификации значений на основе состояния могут находиться в следующих состояниях: активно, активно отключено и неактивно отключено.

Примеры значков классификации значений на основе состояния
Значки IntelliSense содержат не более трех из следующих элементов: один базовый, один модификатор и одно состояние.
![]()
Примеры значков IntelliSense
Мелкие значки проектов (16×16) должны содержать не более двух элементов: один базовый и один модификатор.
Примеры мелких значков проектов (16×16)
Крупные значки проектов (32×32) содержат не более четырех из следующих элементов: один базовый, один или два модификатора и одно наложение языка.
Примеры крупных значков проектов (32×32)
Детали создания
Все новые элементы пользовательского интерфейса должны создаваться с помощью Windows Presentation Foundation (WPF), а все новые значки для WPF — быть в 32-разрядном формате PNG. 24-разрядный формат PNG является устаревшим, не поддерживает прозрачность и поэтому не рекомендуется для значков.
Используйте разрешение 96 DPI.
Типы файлов
- 32-разрядный PNG. Предпочтительный формат для значков. Формат файла сжатия данных без потерь, в котором может храниться одно растровое (пиксельное) изображение. 32-разрядные файлы в формате PNG поддерживают прозрачность альфа-канала, гамма-коррекцию и чередование.
- 32-разрядный BMP. Для элементов управления, отличных от WPF. 32-разрядный BMP, также называемый XP или high color, представляет собой формат изображения RGB/A с истинным цветом и прозрачностью альфа-канала. Альфа-канал — это слой прозрачности, определенный в Adobe Photoshop, который затем сохраняется в точечном рисунке как дополнительный (четвертый) цветовой канал. Во время создания иллюстраций во все 32-битные файлы BMP добавляется черный фон, чтобы обеспечить быструю визуальную подсказку о глубине цвета. Этот черный фон представляет область, которая должна быть замаскирована в пользовательском интерфейсе.
- 32-разрядный ICO. Для значков проекта и элементов добавления. Все файлы ICO имеют 32-разрядный истинный цвет с прозрачностью альфа-канала (RGB/A). Так как ICO-файлы могут хранить несколько размеров и глубин цветов, значки Vista часто имеют формат ICO и содержат изображения с размером 16×16, 32×32, 48×48 и 256×256. Для правильного отображения в проводнике Windows ICO-файлы должны сохраняться в 24-разрядной и 8-разрядной цветовой палитре для каждого размера изображения.
- XAML. Для дизайна поверхностей и графических элементов Windows. Значки XAML — это векторные файлы изображений, поддерживающие масштабирование, вращение, заполнение и прозрачность. В настоящее время они не распространены в Visual Studio, но становятся все более популярными благодаря своей гибкости.
- SVG
- 24-разрядный BMP. Для панели команд Visual Studio. 24-разрядный BMP, RGB-формат изображений с истинным цветом, — это соглашение о значках, которое создает слой прозрачности с помощью пурпурного (R=255, G=0, B=255) в качестве цветового ключа для слоя с выделенной прозрачностью. В 24-разрядном BMP все пурпурные поверхности отображаются с использованием цвета фона.
- 24-разрядный GIF. Для панели команд Visual Studio. RGB-формат изображения с истинным цветом, поддерживающий прозрачность. GIF-файлы часто используются в изображениях мастеров и для GIF-анимации.
Создание значков
Наименьшим размером значков в Visual Studio является 16×16. Самым большим из распространенных является 32×32. Помните, что при разработке значка не нужно заполнять всю рамку 16×16, 24×24 или 32×32. Четкая и единообразная структура значков важна для распознавания пользователями. При создании значков придерживайтесь следующих правил.

- Значки должны быть четкими, понятными и единообразными.
- Лучше использовать элементы уведомлений о статусе в виде отдельных значков, а не размещать их поверх значка базового элемента. В отдельных контекстах пользовательский интерфейс может требовать, чтобы элемент статуса был соединен с базовым элементом.
- Значки проектов обычно являются файлами ICO, содержащими несколько размеров. Обновляются только значки 16×16, 24×24 и 32×32. Большинство значков 16×16 и 24×24 содержат одни и те же элементы. Значки 32×32 содержат дополнительные детали, включая тип языка проекта, если применимо.
- Для значков 32×32 базовые элементы обычно имеют толщину линий 2 пикселя. Для элементов деталей можно использовать толщину линии в 1 или 2 пикселя. Постарайтесь сами определить, что вам больше подходит.
- Для значков 16×16 и 24×24 необходимо иметь по меньшей мере один пиксель между элементами. Для значков 32×32 используйте интервал в 2 пикселя между элементами и между модификатором и базовым элементом.
Расстояние между элементами для значков размером 16×16, 24×24 и 32×32
Цвет и специальные возможности
В соответствии с рекомендациями Visual Studio, все значки в продукте должны соответствовать требованиям к специальным возможностям по цвету и контрастности. Это достигается за счет инверсии значков, и когда вы их разрабатываете, вы должны знать, что они будут инвертированы программно в продукте.
Дополнительные сведения об использовании цвета в значках Visual Studio см. в разделе Использование цвета в изображениях.
Использование цвета в изображениях
Значки в Visual Studio в основном являются монохромными. Цвет зарезервирован для передачи определенной информации и никогда не используется для оформления. Цвет используется:
- для обозначения действия;
- для оповещения пользователя о состоянии;
- для указания языковой принадлежности;
- для различения элементов в IntelliSense.
Специальные возможности
В соответствии с рекомендациями Visual Studio, все значки, регистрируемые в продукте, должны соответствовать требованиям к специальным возможностям по цвету и контрастности. Цвета в визуальной языковой палитре были протестированы и удовлетворяют этим требованиям.
Инверсия цвета в темных темах
Чтобы значки отображались с правильным коэффициентом контрастности в темной теме Visual Studio, программным способом применяется инверсия. Цвета в этом руководстве были выбраны отчасти для правильного инвертирования. Используйте цвета только из этой палитры, иначе инверсия приведет к непредсказуемым результатам.

Примеры значков с инвертированными цветами
Базовая палитра
Все стандартные значки содержат три основных цвета. Значки не содержат градиенты и тени за редким исключением для значков трехмерных инструментов.
| Использование | Имя | Значение (светлая тема) | Образец | Пример |
|---|---|---|---|---|
| Фон (темный) | VS BG | 424242 / 66,66,66 | ![]() |
![]() |
| Передний план (светлый) | VS FG | F0EFF1 / 240,239,241 | ![]() |
|
| Границы | VS Out | F6F6F6 / 246,246,246 | ![]() |
Помимо основных цветов, каждый значок может содержать один дополнительный цвет из расширенной палитры.
Расширенная палитра
Модификаторы действий
Следующие четыре цвета указывают типы действий, необходимых для модификаторов действий.
| Использование | Имя | Значение (все темы) | Образец |
|---|---|---|---|
| Положительные | VS Action Green | 388A34 / 56,138,52 | ![]() |
| Отрицательный | VS Action Red | A1260D / 161,38,13 | ![]() |
| Нейтральные | VS Action Blue | 00539C / 0,83,156 | ![]() |
| Создать | VS Action Orange | C27D1A / 194,156,26 | ![]() |
Примеры
Зеленый используется для положительных модификаторов действий, таких как «Добавить», «Выполнить», «Воспроизвести» и «Проверить».
| Выполнить | Выполнить запрос | Воспроизвести все этапы | Добавить элемент управления |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
Красный используется для отрицательных модификаторов действий, таких как «Удалить», «Остановить», «Отмена» и «Закрыть».
| Удаление связи | Удалить столбец | Остановить запрос | Автономный режим |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
Синий цвет используется для нейтральных модификаторов действий, часто представляемым в виде стрелок, таких как «Открыть», «Следующий», «Предыдущий», «Импорт» и «Экспорт».
| Перейти к полю | Пакетный возврат | Редактор адреса | Редактор ассоциаций |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
Темно-золотистый в основном используется для модификатора «Создать».
| Создать проект | Создать новую диаграмму | Создать модульный тест | Создать элемент списка |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
Особые случаи
В особых случаях цветовой модификатор действия может использоваться независимо в качестве отдельного значка. Цвет, используемый для значка, отражает действия, с которыми он связан. Такое использование ограничено небольшим набором значков, включая следующие:
| Выполнить | Остановить | Удаление | Сохранить | Назад |
|---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
Палитра иерархии кода
Папка
| Использование | Имя | Значение (все темы) | Образец | Пример |
|---|---|---|---|---|
| Папки | Папка | DCB67A / 220,182,122 | ![]() |
![]() |
Языки Visual Studio
Все распространенные языки и платформы, доступные в Visual Studio, имеют связанный цвет. Эти цвета используются на базовом значке или в модификаторах языка, отображаемых в правом верхнем углу составных значков.
| Использование | Имя | Значение (все темы) | Образец |
|---|---|---|---|
| ASP, HTML, WPF | ASP HTML WPF Blue | 0095D7 / 0,149,215 | ![]() |
| C++ | CPP Purple | 9B4F96 / 155,79,150 | ![]() |
| C# | CS Green (VS Action Green) | 388A34 / 56,138,52 | ![]() |
| CSS | CSS Red | BD1E2D / 189,30,45 | ![]() |
| F# | FS Purple | 672878 / 103,40,120 | ![]() |
| JavaScript | JS Orange | F16421 / 241,100,33 | ![]() |
| VB | VB Blue (VS Action Blue) | 00539C / 0,83,156 | ![]() |
| TypeScript | TS Orange | E04C06 / 224,76,6 | ![]() |
| Python | PY Green | 879636 / 135,150,54 | ![]() |
Примеры значков с модификаторами языка
| VB | C# | C++ | F# | JavaScript | Python |
|---|---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
| HTML | WPF | ASP | CSS | TypeScript |
|---|---|---|---|---|
![]() HTML |
![]() WPF |
![]() ASP |
![]() CSS |
![]() TypeScript |
IntelliSense
Значки IntelliSense используют эксклюзивную цветовую палитру. Эти цвета помогают пользователям быстро различать элементы во всплывающем списке функций IntelliSense.
| Использование | Имя | Значение (все темы) | Образец |
|---|---|---|---|
| Класс, событие | VS Action Orange | C27D1A / 194,125,26 | ![]() |
| Метод расширения, метод, модуль, делегат | VS Action Purple | 652D90 / 101,45,144 | ![]() |
| Поле, элемент перечисления, макрос, структура, тип значения объединения, оператор, интерфейс | VS Action Blue | 00539C / 0,83,156 | ![]() |
| Объект | VS Action Green | 388A34 / 56,138,52 | ![]() |
| Константа, исключение, элемент перечисления, сопоставление, элемент сопоставления, пространство имен, шаблон, определение типа | Background (VS BG) | 424242 / 66,66,66 | ![]() |
Примеры значков IntelliSense
| Класс | Закрытое событие | Делегирование | Метод Friend | Поле |
|---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
| Защищенный элемент перечисления | Объект | Template | Ярлык исключения |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
Уведомления
Уведомления в Visual Studio используются для указания состояния. В палитре уведомлений используются следующие четыре цвета, а также параметры заливки переднего плана черным или белым, чтобы определять уведомления с указанными уровнями состояния.
| Использование | Имя | Значение (все темы) | Образец |
|---|---|---|---|
| Состояние: нейтральное | Notification Blue (VS Blue) | 1BA1E2 / 27,161,226 | ![]() |
| Состояние: положительное | Notification Green (VS Green) | 339933 / 51,153,51 | ![]() |
| Состояние: отрицательное | Notification Red (VS Red) | E51400 / 229,20,0 | ![]() |
| Состояние: предупреждение | Notification Yellow (VS Orange) | FFCC00 / 255,204,0 | ![]() |
| Заливка переднего плана | Notification Black (Black) | 000000 / 0,0,0 | ![]() |
| Заливка переднего плана | Notification White (White) | FFFFFF / 255,255,255 | ![]() |
Примеры значков уведомлений
| Предупреждение | Предупреждение | Завершено | Остановить |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
Сколько цветов использует стандартная палитра языка basic
Монитор современного компьютера может работать в двух режимах: текстовом и графическом. В языке программирования Quick Basic предусмотрены способы вывода информации на экран в обоих режимах.
Рассмотрим, что и каким образом можно выводить на экран в текстовом режиме.
По умолчанию Quick Basic работает с монитором в текстовом режиме. В этом режиме на экран можно вывести все символы, которые есть на клавиатуре , и символы псевдографики. В текстовом режиме экран имеет 25 строк, в каждой строке 80 позиций ( однако, с помощью оператора WIDTH 40 можно получить 40 “широких” позиций) для вывода символом, следовательно, максимальное количество символов, которое можно разместить на экране в текстовом режиме , равно 2000=25х80.
5.1. Управление цветом в текстовом режиме
Оператор COLOR цвет_символа, цвет_фона устанавливает цвет выводимого символа и цвет фона под символом.
Цвет символа — это число от 0 до 15, т.е. символ может быть выведен на экран одним из 16 цветов .
Цвет фона — это число от 0 до 7.
Если оператора COLOR в программе нет совсем, то Quick Basic по умолчанию устанавливает цвет 7 (белый) для символа и цвет 0 (черный) для фона.
Каждый цвет — это комбинация трех основных цветов — красного, зеленого и синего . Каждый цвет может выводиться с низкой или высокой интенсивностью (яркостью).
0 — черный
8 – серый
1 — синий
9 — ярко-синий
2 — зеленый
10 — ярко-зеленый
3 — голубой (точнее, циан)
11 — ярко-голубой
4 — красный
12 — ярко-красный
5 — фиолетовый
13 — ярко-фиолетовый
6 — коричневый
14 — желтый
7 — белый
15 — ярко-белый
Составим таблицу цветов. Наличие в цвете какой-либо цветовой компоненты будем отмечать единицей, а ее отсутствие — нулем.
Если к цветам, указанным в таблице, прибавить 16, то символы будут выводиться тем же цветом, но кроме того начнут мигать. Таким образом, если в качестве цвета символа указан код со значением с 16 по 31, то мы получим соответствующий мигающий цвет.
Пример: обычный красный — 4; мигающий — 20.
Задание . Загрузите программу PRG.BAS и сделайте полоски разных цветов.
Некоторые символы не так-то просто вывести на экран просто потому, что их нет на клавиатуре. Это, в частности, относится к символам псевдографики.
Псевдографика — это символы, с помощью которых можно рисовать линии, рамки и другие графические изображения в текстовом режиме. Символы псевдографики отличаются от обычных символов тем, что занимают всю ширину (высоту) места, отведенного символу на экране. Поэтому они, будучи поставлены рядом, сливаются и образуют непрерывные линии.
Чтобы вывести на экран символ, отсутствующий на клавиатуре , нужно нажать клавишу Alt и, не отпуская ее, другой рукой набрать код символа (число от 0 до 255). (Некоторые драйверы клавиатуры имеют режим набора псевдосимволов.)
Приведем коды некоторых символов.
| Одинарная рамка: | Двойная рамка: |
Задача . Вывести на экран таблицу символов.
Решение. С помощью функции CHR$ получим символ по его коду:
символ = CHR$( число )
и сразу выведем его на экран оператором PRINT . Чтобы все символы поместились на экране, расположим их в виде таблицы 16х16. Пронумеруем строки и столбцы таблицы числами от 0 до 15. Тогда код символа, стоящего на пересечении i-ой строки и j-го столбца , равен значению 16*i + j. Организуем вывод таблицы по строчкам:
CLS FOR i = 0 TO 15 ‘Выводим строку таблицы FOR j = 0 TO 15 kod = 16*i + j LOCATE i + 5, 2* j + 5 PRINT CHR$(kod) NEXT j NEXT i
Запишем программу под именем TABL.BAS и выполним ее. На экране появится таблица, однако некоторые места в ней останутся пустыми — для этих кодов нет графического представления. Но это не значит, что ими нельзя воспользоваться в программе! Так, например, при выполнении оператора PRINT CHR$(7) раздается звуковой сигнал, PRINT CHR$(12) очищает экран, PRINT CHR$(13) переводит курсор на новую строку и т.д.
Конечно, чаще всего, те же действия можно выполнить “стандартными” операторами: BEEP — звуковой сигнал, CLS — очистка экрана, перевод строки делается автоматически после вывода на экран (если только в конце оператора PRINT не стоит точка с запятой для подавления перевода строки!). Иногда знание кода символа необходимо. Невозможно, например, вывести оператором PRINT текст, содержащий кавычки, так как последние воспринимаются как ограничители. Чтобы вывести на экран фразу: “Смотрите фильмы в кинотеатре “Космос”!” следует написать
PRINT “Смотрите фильмы в кинотеатре”; CHR$(34);“Космос”; CHR$(34); “!”
PRINT “Смотрите фильмы в кинотеатре”+ CHR$(34) +“Космос”+ CHR$(34) + “!”
Вернемся к программе TABL.BAS. Поскольку вывод символа с кодом 12 эквивалентен оператору CLS , то с экрана сотрется изображения предыдущих символов, и мы их не увидим (разве что заметим, как что-то мелькнуло на экране). Вставим, поэтому, проверку условия: код символа не равен 12 (Так как знака “не равен” нет на клавиатуре, то он изображается двумя символами: <> или ><).
CLS FOR i = 0 TO 15 ‘Выводим строку таблицы FOR j = 0 TO 15 kod = 16*i + j IF kod <> 12 THEN LOCATE i + 5, 2* j + 5 PRINT CHR$(kod) END IF NEXT j NEXT i
Задания . Пользуясь символами псевдографики “нарисуйте” на экране рамку, лестницу, флаг, забор и т.д.
6. Работа с монитором в графическом режиме
В графическом режиме минимальным элементом, который можно вывести на экран, является не символ, а пиксель . Пиксель (точка экрана) представляет собой крошечный прямоугольник, размеры которого зависят от установленного графического режима. Верхняя левая точка экрана имеет координату (0,0), ось ОХ направлена вправо, ось О Y – вниз, т.е. чем ниже на экране расположена точка, тем больше ее координата по оси OY..
Оператор SCREEN номер режима переводит режим работы экрана из текстового в графический с заданным номером. Если оператор SCREEN не указан, то подразумевается текстовый режим. Текстовый режим имеет номер 0, поэтому, если нужно из графического режима перейти в текстовый, следует использовать SCREEN 0 . Иногда при возврате из графического режима (например, из SCREEN 7) символы текста становятся широкими. Вернуть им нормальные размеры можно только оператором WIDTH 80. Графические режимы различаются разрешением (количеством “точек”) экрана и количеством возможных цветов.
Например, SCREEN 7 устанавливает разрешение экрана в 320 точек по горизонтали и 200 точек по вертикали. Положение произвольной точки на экране задается двумя числами (x, y) в экранной системе координат. От декартовых координат эта система отличается тем, что ось Oy направлена вниз, а не вверх.
В графическом режиме на экран кроме символов можно выводить и геометрические фигуры: точки, линии, прямоугольники, окружности и т.д. Замкнутые фигуры можно закрашивать.
6.1. Рисование точек и линий
Оператор PSET (x, y)[, цвет ] закрашивает точку экрана заданным цветом.
Оператор LINE (x1, y1)-(x2, y2)[, цвет ] рисует отрезок, соединяющий на экране точки с координатами (x1, y1) и (x2, y2)
Оператор LINE — (x2, y2)[, цвет ] рисует отрезок, соединяющий последнюю выведенную на экран точку с точкой (x2, y2).
Цвет в этих операторах задается числом от 0 до 15. Если цвет в графических операторах не указан, то все линии рисуются белым цветом. (О том, какие могут быть цвета в различных графических режимах, мы поговорим позже.)
Пример. Соединить точки (20, 45) и (38, 144).
| Первый способ: | LINE (20, 45)-(38, 144) |
| Второй способ: | PSET (20, 45) |
| LINE -(38, 144 ) |
Задание . Построить на экране треугольник, четырехугольник, пятиугольник; нарисовать домик. Записать программу “Домик” в файл HOUSE.BAS.
6.2. Прямоугольники и квадраты
Рисовать домик отдельными линиями — не самый рациональный способ. Легко увидеть, что домик представляет собой прямоугольник с крышей из двух отрезков. (Так рисуют домик почти все, кроме гениальных фантазеров и профессиональных художников.) А нарисовать прямоугольник можно одним оператором
LINE (x1, y1)-(x2, y2), [ цвет ], B
Этот оператор рисует рамку-прямоугольник со сторонами, параллельными границам экрана. Точки (x1, y1) и (x2, y2) суть две вершины прямоугольника, расположенные по одной из его диагоналей. Если параметр цвет отсутствует, то будет нарисована белая рамка. (Но “лишняя” запятая должна остаться!)
Поскольку точки экрана представляют собой маленькие прямоугольнички, то попытка нарисовать квадрат оператором
LINE (20, 20)-(120, 120), , B
потерпит неудачу. Высота этого “квадрата” окажется больше, чем ширина, хотя обе стороны содержат одинаковое число пикселей. Уменьшим число точек в высоте “квадрата” в 1.2 раза (для SCREEN 1 !) или во столько же раз увеличим ширину “квадрата” — только тогда мы получим истинный квадрат. Поправочный коэффициент назовем “коэффициентом вытянутости” пикселя.
Оператор LINE (x1, y1)-(x2, y2), [ цвет ], BF рисует такой же, но закрашенный прямоугольник.
Задача . Нарисовать на экране пирамиду из 10 ступенек-прямоугольников.
Решение. Воспользуемся тем, что пирамида имеет осевую симметрию. Расположим ось пирамиды посредине экрана. Пронумеруем прямоугольники сверху вниз числами от 1 до 10. Очевидно, что значения x1, y1, x2, y2 зависят от номера прямоугольника. В силу симметрии, чтобы получить x1, нужно от 160 вычесть что-то, а чтобы получить x2 — прибавить столько же.
Составим вспомогательную табличку.
| Номер ступеньки | x1 | x2 |
|---|---|---|
| 1 | 160 — 10 | 160 + 10 |
| 2 | 160 — 20 | 160 + 20 |
| 3 | 160 — 30 | 160 + 30 |
| . | . | . |
| 10 | 160 — 100 | 160 + 100 |
Легко заметить, что номер ступеньки-прямоугольника и величина добавки связаны зависимостью
Если обозначить через k номер ступеньки, получим формулы для вычисления x1 и x2:
Значения y1 и y2 также зависят от номера и высоты ступеньки h , где h — некоторая заранее заданная величина (например, h = 10 ):
Теперь можно составить программу.
SCREEN 7 h = 10 FOR k = 1 TO 10 x1 = 160 - 10*k x2 = 160 + 10*k y1 = 40 + h*k y2 = y1 + h LINE (x1, y1)-( x2, y2), , B NEXT k
Задание . Запишите программу под именем PIRAMIDA.BAS. Измените высоту, ширину, цвет ступенек. Составьте пирамиду из закрашенных прямоугольников; из закрашенных прямоугольников с рамкой другого цвета.
Заметим, что использование переменной h для обозначения высоты ступенек позволяет проще изменять высоту ступеньки.
6.3. Окружности и дуги
Оператор CIRCLE (x, y), радиус [, цвет ] рисует окружность заданного радиуса и цвета с центром в точке (x, y). Если вся окружность на экране не поместится, то будет нарисована только ее часть. Радиус окружности задается в пикселях, но такое количество пикселей укладывается только по горизонтали. Размер вертикального радиуса (в пикселях) зависит от номера графического режима.
Задача . Нарисовать несколько концентрических окружностей (“мишень”).
SCREEN 7 FOR r = 5 TO 65 STEP 5 CIRCLE (160, 100), r, 3 NEXT r
Задание . Запишите программу под именем MISHEN.BAS. Сделайте шаг в цикле равным 3, 2, затем 1 (но не 0, так как программа “зациклится”!). Объясните возникающий при этом эффект. Измените положение “мишени” на экране так, чтобы ее часть ушла за экран. Введите зависимость положения центра окружности от ее радиуса. Поэкспериментируйте с несколькими разноцветными “мишенями ”.
Тем же оператором можно нарисовать и дугу, только дополнительно потребуется задать значения начального и конечного углов дуги:
CIRCLE (x, y), радиус , [ цвет ], нач_угол , кон_угол
Если поместить в точку (x, y) начало математической системы координат, то начальный и конечный углы откладываются от оси Ox в направлении против часовой стрелки.
Начальный угол может быть больше конечного, но принцип рисования дуги останется прежним.
Углы дуги должны задаваться в радианах. Поскольку это не всегда удобно , автор рекомендует переводить градусы в радианы каждый раз, как это потребуется. Коэффициент пропорциональности QR вычисляется по формуле QR = p /180, где p » 3.14159265358 всем известная константа. Конечно, можно использовать и конкретное значение коэффициента: QR » 0.0174329252.
Пример . Изобразите на листе бумаги, что получится на экране после выполнения программы:
SCREEN 7 QR = 0.0174329252 CIRCLE (100, 50), 60, 2, 270*QR, 0 CIRCLE (220, 50), 60, 2, 180*QR, 270*QR CIRCLE (100, 150), 60, 2, 0, 90*QR CIRCLE (220, 150), 60, 2, 90*QR, 180*QR
Правильность ответа проверьте на компьютере.
Замечание. Математики рассматривают как положительные, так и отрицательные углы. В операторе CIRCLE также могут использоваться отрицательные значения для начального и конечного углов, однако здесь знак минус “сообщает”, что следует не только нарисовать дугу, но и провести один или оба радиуса. Измените предыдущую программу, посмотрите, что получится на экране. Учтите, что с точки зрения Quick Basic’а “отрицательный” нуль ничем не отличается от обычного, поэтому замените его очень маленьким отрицательным числом, например, — 0.001.
Задания для самостоятельной работы
Составьте программы, которые выводят на экран следующие картинки:
6.4. Графические режимы
SCREEN 1 — это устаревший графический режим, используемый в Quick Basic только для совместимости с некоторыми мониторами. В этом режиме доступны одновременно только 4 цвета (включая цвет фона). Одному и тому же номеру соответствуют разные цвета в зависимости от выбранной палитры :
голубой (3)
зеленый (2)
фиолетовый (5)
красный (4)
белый (7)
коричневый (6)
Оператор COLOR в этом режиме имеет свой особый синтаксис:
COLOR цвет_фона, номер_палитры
Выбор цвета фона намного богаче — он может быть любым из 16 основных цветов (от 0 до 15).
По умолчанию SCREEN 1 устанавливает первую палитру.
SCREEN 2 задает разрешение 640 точек по горизонтали на 200 точек по вертикали. В этом графическом режиме возможны только два цвета — черный и белый, заданные “раз и навсегда”. Использование оператора COLOR в этом режиме некорректно и вызовет сообщение об ошибке “Illegal function call” (“Недопустимый вызов функции”).
Высота пикселя в этом режиме больше его ширины в 2.4 раза.
SCREEN 7 задает разрешение 320 точек по горизонтали на 200 точек по вертикали, следовательно, “коэффициент вытянутости” пикселя , как и в SCREEN 1 равен 1.2..
В этом и следующих режимах оператор COLOR управляет цветом линий, цветом фона экрана и цветом символов текста. Можно указывать цвет рисования и в каждом графическом операторе (если цвет пропущен, то линия рисуется цветом, заданным в операторе COLOR , а если нет и оператора — то ярко-белым цветом). Оператор COLOR имеет следующий вид:
COLOR цвет_линии, цвет_фона
Цвет линии — число от 0 до 15, цвет фона — число от 0 до 7. Заданные параметры распространяются и на текстовый вывод, но в отличие от текстового режима нельзя вывести на экран мигающие символы. Кроме того, изменение цвета фона действует и на уже выведенный текст!
SCREEN 8 задает разрешение 640 точек по горизонтали на 200 точек по вертикали (“коэффициент вытянутости” = 2.4), а SCREEN 9 — 640 точек по горизонтали на 350 точек по вертикали. Точное значение “коэффициента вытянутости“ в SCREEN 9 равно 48/35. что практически равно 1.37.
Для мониторов типа VGA и SVGA возможны и другие графические режимы. Чаще всего используются режим SCREEN 12 с разрешением 640 точек по горизонтали на 480 точек по вертикали, в котором “коэффициент вытянутости” в точности равен 1. Однако в этом режиме в операторе COLOR указывается только один параметр — цвет линии (символа). Цвет фона оператором не задается!
Задание . Загрузите программу PIRAMIDA.BAS и посмотрите результат выполнения в рассмотренных графических режимах. Сделайте ступеньки пирамиды разных цветов. Подпишите рисунок (используйте оператор COLOR для задания цвета фона и символов текста).
6.5. Закраска произвольной области
Если на экране нарисована замкнутая кривая, то область внутри нее можно закрасить. Также можно закрасить и область, оставшуюся снаружи от кривой. Для этого используется оператор
PAINT (x, y), цвет_закраски, цвет_границы
Точка (x, y) должна попасть внутрь области, подлежащей закрашиванию.
Если граница области “дырявая”, то краска выльется за пределы области, даже если дырка всего в один пиксель. То же самое произойдет, если граница области содержит по недосмотру кусочек другого цвета — для оператора PAINT это все равно что дырка.
Пример . Нарисовать флаг Японии — красный круг на белом фоне.
‘--------- Флаг Японии --------- SCREEN 7 LINE (10, 10)-(100, 50), 15, BF CIRCLE (55, 30), 20, 12 PAINT (55, 30), 12, 12
Задание . Нарисовать флаги предложенных ниже стран или любой другой страны.
Чтобы упростить построение сложного контура, можно составить его из нескольких простых. Например, крест на флаге Швеции сделать из двух закрашенных прямоугольников, серп на флаге Турции — из двух кругов, один из которых закрасить белым, а другой, меньший, красным.
При закраске окружности в качестве начальной точки для оператора PAINT удобно брать центр окружности, в других случаях, особенно при закраске маленьких областей, легко “ промахнуться ” мимо области. Чтобы проконтролировать расположение начальной точки, заменим оператор PAINT оператором PSET(x, y). Убедимся в том, что точка (x, y) попала в нужное место, и после этого вернем оператор PAINT на свое законное место.
| helloworld.ru © 2001-2021 Все права защищены |























































































