Online Advertising, Web Development & General Rantings

want to clip a canvas as a mouse is dragged on the edge of it

July 9, 2007 · 2 Comments

silverlight code tips 

So this is common request in apps these days.

Here’s the code that someone at silverlight.net forums posted. I’ve copied it here cause it’s a good simple snippet of code

XAML


<Canvas Canvas.Left=”0″ Canvas.Top=”200″>
  <Rectangle Width=”300″ Height=”400″ Fill=”Black” Cursor=”Hand” MouseLeftButtonUp=”ChangeClip”/>
  <Canvas.Clip >
  <RectangleGeometry x:Name=”ClipRect” Rect=’0, 0, 300, 400′ />
  </Canvas.Clip>
  </Canvas>

Javascript


 function ChangeClip(sender, args)
{
  var clip = sender.findName(”ClipRect”);
  clip["Rect"]=”0, 0, 300, 100″;
}

Categories: silverlight code tips

2 responses so far ↓

  • jaybee // November 28, 2007 at 2:01 pm

    so this is great for clipping a canvas using a rectangle shape. what about irregular shapes, a trapezoid for instance?

    i simply want to mask an animation within a trapezoid frame..any pointers?

  • Jody // May 2, 2008 at 2:47 pm

    You can use PathGeometry for that, and just define the points for the trapezoid.

Leave a Comment