Search code examples
c#xamarinmatrixskew

Skewing or shearing Points on a 2D plane - Xamarin C#

I'm hoping to get some advice on the best way to achieve a keystoning effect which honours the individual points within the Grid, and not just the Grid itself.

I have a rectangle (Grid) that has multiple points (x,y) plotted within it. I'd like to be able to achieve a vertical keystoning effect in code, not XAML, like below:

enter image description here

Has anyone got any advice on the best/easiest way to do this? I'm looking at matrices at the moment, but wonder if I'm overthinking things? And if matrices are the right idea, then can someone provide any decent links or examples of how to apply these to my x,y values for each point?

Thank you,

Mike

Solution

  • You would definitely look at matrices for things like this. I think you will need a Homography transform, since affine transforms like scaling, rotation and shearing is not enough.

    There seem to be plenty of libraries and articles explaining how to create such a matrix from a set of source and destination points. This is common in image processing to apply or revert a perspective transform. The first google hit was HomographySharp, but this should also be available in most image processing libraries, like Open CV.

    You could also create a matrix from parameters. My linear algebra course was a long time ago, but the basic idea is to use a 3x3 matrix for 2D (or a 4x4 for 3D). Vectors are extended by a w component, that are implied to be 1 if it is not explicit. After the transformation the vector is normalized by dividing all other components by the w. A transform would look like

    [1   0   tx] 
[0   1   ty] 
[px  py   1]

    where the px/xy parameters of the bottom row is used to control the perspective effect. tx/ty is the translation, and the top left 2x2 is the affine transform for scaling/rotation/shearing etc.