WPF Image Mapping

Question

Is there a way to draw/fit a simple Quadrilateral cut-out from an image onto a standard axis-aligned rectangle for screen display. (So that the cut-out will be distorted to fill the rectangle points). Seems to me it should be possible with an ImageBrush but I cannot quite see it.

Answer 1

If you mean you want to show a cropped image, you can use CroppedBitmap.

Answer 2

Yes, but it ranges from extremely easy to somewhat difficult depending on your quadrilateral.

Aligned rectangle

If the quadrilateral is a rectangle aligned to the axes, you can use CroppedBitmap.

Unaligned rectangle or other parallelogram

If the quadrilateral is an arbitrary parallelogram (including rectangles), you can use a RenderTransform to map the quatrilateral's corners to the bounds of the rectangle and set ClipToBounds="True" so that only the cutout shows.

<Decorator ClipToBounds="true">
  <Rectangle Fill="{StaticResource SourceImage}" RenderTransform="1 0 0 1 0 0" />
</Decorator>

By varying the matrix parameters on the RenderTransform any parallelogram can be mapped onto the rectangle. Simple algebra will give the details. Just plug the any three corners of the parallelogram into the matrix transform equation and solve for the six transform parameters.

Arbitrary quadrilateral

If the quadrilateral is not a parallelogram, you'll need to use a non-affine transform which is not available in WPF's 2D graphics. However it is available in the 3D system: You will need to create four nested objects:

• A MeshGeometry3D to define the shape of the rectangle inside a
• GeometryModel3D to define the material (your ImageBrush) inside a
• ModelVisual3D to define your transform inside a
• Viewport3DVisual to define your camera and viewport.

Charles Petzold's blog has the calculations for the 3D solution.