CODEWITHSUNDEEP
silverlightcanvasbackgroundmousemove
jesseoak
jesseoak

Reputation: 1

Dynamic drawing of opacity mask

I've got two background pictures, one is blurry, the other one is the same picture, but more colorful. The default background image is the blurry one. When I move the cursor, I'd like to change the background image from the blurry to the colorful one, but only in a circle around the cursor, and when I move the cursor forward, the changed background stays where the circle around the cursor went earlier. (like when you scratch a lottery ticket with a coin) I think I have to handle the MouseMove event, and use the MouseEventArgs cursor position, but I cannot go through, and I really need help! Thanks in advance!

Upvotes: 0

Views: 651

Answers (1)

robertos
robertos

Reputation: 1796

You might want to try following this path:

  1. Add a Canvas to your page, with the same size as both of your images

  2. Create a clipping path in the shape of an ellipse (<Ellipse ...>) and position it outside of your image, in the canvas

  3. Put the "blurry image" on your canvas first (below), and then the "sharp image", filling the whole canvas.

  4. Let the ellipse be the clipping mask of your "sharp image" (using Image.Clip or YourUIElement.Clip (reference on MSDN)

  5. Move your ellipse with the mouse cursor. The code might look like this (note: I didn't test the code):

-

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);
}

If this works, you can increment your visual design adding animations on MouseEnter/MouseLeave, etc.

Upvotes: 1

Related Questions