Image Effects with Silverlight: Creating the Saturation Light Sample

Articolo
04/23/2008

This sample demonstrates the following:

1. Simulating any image effect with Silverlight

2. Using the mouse wheel in a Silverlight application

Download sample source code: https://www.nokola.com/sources/SaturationLight.zip

The main XAML consists of 2 images:

1. Saturated image

2. Desaturated image

To create the visual effect of a “light” I added an opacity mask to the saturated image and set it to this radial gradient brush:

<Image.OpacityMask>

</RadialGradientBrush>

</Image.OpacityMask>

The GradientOrigin and Center control where the “light” is situated on the image. When we move the mouse on the image we change the light position like this:

Point tempPoint = new Point(0, 0);

private void imageSat_MouseMove(object sender, MouseEventArgs e)

{

_isMouseInside = true;

Point p = e.GetPosition(imageSat);

tempPoint.X = p.X / imageSat.ActualWidth;

tempPoint.Y = p.Y / imageSat.ActualHeight;

brushLight.Center = tempPoint;

brushLight.GradientOrigin = tempPoint;

}

Mouse wheel control

Is achieved by talking back to the DOM from the Silverlight app:

public Page()

{

InitializeComponent();

HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheelTurned);

HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheelTurned);

HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheelTurned);

}

Note that there are several checks for IE, Opera, Mozilla and Safari because the underlying DOM implementation is not the same.

The below code is a slightly modified version of the code on Jeff Prosise’s blog: https://www.wintellect.com/cs/blogs/jprosise/archive/2008/03/18/mousewheel-zooms-in-silverlight-2-0.aspx.

Peter Blois also has a good post wheel and deep zoom, if you’re interested: https://blois.us/blog/2008/03/ive-heard-number-of-people-wondering.html

private void OnMouseWheelTurned(object sender, HtmlEventArgs args)

{

if (!_isMouseInside) {

return;

}

double delta = 0;

ScriptObject e = args.EventObject;

if (e.GetProperty("wheelDelta") != null) // IE and Opera

{

delta = ((double)e.GetProperty("wheelDelta"));

if (HtmlPage.Window.GetProperty("opera") != null)

delta = -delta;

}

else if (e.GetProperty("detail") != null) // Mozilla and Safari

{

delta = -((double)e.GetProperty("detail"));

}

delta = Math.Sign(delta);

MouseWheelTurned(delta);

if (delta != 0)

{

args.PreventDefault();

e.SetProperty("returnValue", false);

}

private void MouseWheelTurned(double delta)

{

brushLight.RadiusX += 0.46*0.06*delta;

brushLight.RadiusY += 0.64*0.06*delta;

}

I guess that by using the “Saturation light” method by combining 2 images, you can achieve any image effect you’d like. For example: making a person’s or animal’s eyes “light up” when you move over their picture, or making all kinds of dodge, burn, blurs, etc image effects.

Comments

Anonymous
April 23, 2008
PingBack from http://microsoftnews.askpcdoc.com/silverlight/image-effects-with-silverlight-creating-the-saturation-light-sample
Anonymous
April 26, 2008
Very neat effect. Great use of an opacity mask. I was just thinking today how nice it would be if opacity masks could somehow "filter-out" a color (or "filter-in" a color). This is an ingenious way to do just that...
Anonymous
April 26, 2008
Thanks! It would be nice to see your demo, once published, if you plan to have something like "filter out a color".
Anonymous
May 21, 2008
Wow! I knew that Silverlight was a superb technology the first time I saw it but your control really brings home the granular flexibility and it's .NET!
Anonymous
May 01, 2009
Hi, Please notice the project is asking for project gocider; which is not included in your zip file. The project work without gocider project. Thank you, Rune
Anonymous
May 26, 2009
Hi Rune, Thank you for the note! I'll fix it up! Nikola

Condividi tramite

Image Effects with Silverlight: Creating the Saturation Light Sample

Mouse wheel control

Comments

Risorse aggiuntive