Динамическое рисование маски непрозрачности - PullRequest
Новая
       23

Динамическое рисование маски непрозрачности

0 голосов
/ 27 февраля 2011

У меня есть две фоновые картинки, одна размытая, другая такая же, но более яркая. Фоновое изображение по умолчанию - размытое. Когда я перемещаю курсор, я хотел бы изменить фоновое изображение от размытого на красочное, но только по кругу вокруг курсора, и когда я перемещаю курсор вперед, измененный фон остается на том же месте, где раньше находился круг вокруг курсора. (например, когда вы царапаете лотерейный билет монетой) Я думаю, что я должен обработать событие MouseMove и использовать позицию курсора MouseEventArgs, но я не могу пройти, и мне действительно нужна помощь! Заранее спасибо!

1 Ответ

1 голос
/ 27 февраля 2011

Возможно, вы захотите попробовать следующий путь:

  1. Добавьте Canvas на свою страницу того же размера, что и ваши изображения

  2. Создайте обтравочный контур в форме эллипса (<Ellipse ...>) и поместите его вне изображения на холсте

  3. Сначала поместите «размытое изображение» на холст (ниже), а затем «резкое изображение», заполнившее весь холст.

  4. Пусть эллипс будет обтравочной маской вашего "четкого изображения" (с использованием Image.Clip или YourUIElement.Clip (ссылка на MSDN )

  5. Переместите свой эллипс с помощью курсора мыши. Код может выглядеть следующим образом ( note : код не проверялся):

- 

imageCanvas.MouseMove += imageCanvas_MouseMove;

private void imageCanvas_MouseMove(object sender, MouseEventArgs e)
{
    Point mousePosition = e.GetPosition();
    Canvas.SetTop(myEllipse, mousePosition.Y - myEllipse.ActualHeight / 2);
    Canvas.SetLeft(myEllipse, mousePosition.X - myEllipse.ActualWidth / 2);
}

Если это работает, вы можете увеличить визуальный дизайн, добавив анимацию на MouseEnter / MouseLeave и т. Д.

...