Ховер прямоугольника

Главная :: Интерактивные механики :: Ховер прямоугольника

Ховер прямоугольника является базовой операцией для посторения множества интерактивных механизмов. Ховерниг (hover, наведение) это изменение поведения объекьта в момент наведения на него курсора. В частности задача сводится к проверке попадания точки курсора в прямоугольную область.

Простейший пример использования ховеринга прямоугольника это создание пользовательской кнопки. Любая кнопка часто является простым прямоугольником. Созадние кнопок подробнее рассмотрим в главе Графический интерфейс.

Создадим новое приложение по шаблону для приложения с анимацией

Объявим 4 переменные - параметры нашего прямоугольника-кнопки.

double ButtonLeft = 100;
double ButtonLTop = 100;
double ButtonWidth = 200;
double ButtonHeight = 50;

Для того чтобы проверить находится ли курсор внутри прямоугольника , нужно проверить находится ли кордината X курсора в интервале между левой и правой границей прямоугольника, и находится ли кооридната Y курсора в интервале между верхней и нижней границей прямоугольника (как мы делали здесь). Воспользуемся логическим && чтобы скомбинировать 4 условия вместе:

var gr = e.Grpaphics;
var point = PointToCLient(Cursor);
    
bool isInsideRectangle = point.X >= ButtonLeft && 
       point.X <= (ButtonLeft + ButtonWidth) &&
       point.Y >= ButtonTop && 
       point.Y <= (ButtonTop + ButtonHeight);

gr.FillRectangle(isInsideRectangle? Brushes.Blue : Brushes.White,rect);
gr.DrawRectangle(Pens.Black,rect);

По-мимо ручной проверки на пересечение границ, можно воспользоваться готовой логикой библиотеки GDI, в частности методом Contains класса Rectangle

var gr = e.Grpaphics;
var point = PointToCLient(Cursor);

Rectangle rect = new Rectanlge(ButtonLeft,ButtonTop, ButtonWidth, ButtonHeight);
bool isInsideRectangle = rect.Contains(point);
gr.FillRectangle(isInsideRectangle? Brushes.Blue : Brushes.White,rect);
gr.DrawRectangle(Pens.Black,rect);

Вставив и запустив данный пример мы увидим следующую картинку:

 

 

Исходный код данного примера вы можете найти здесь

Упражнения

  • Перeделать отрисовку с помощью Rectanlge.Contains
  • Сделать несколько непересекающихся кнопок разного размера и цвета. Сделать ховеринг для каждой из них (обязательно)
  • Сделать ховер окружности
  • Сделать ховер прямоугольника со скругленными краями (подумайте как можно представить такой прямоугольник с помощью комбинции обычного прямоугольника и двух окружностей)