locked
How to get difference between canvas and rotated canvas

    Question

  • I am using a rotation transform to rotate a canvas with a background containing a picture. I also have a crop canvas which I will use to crop the image once its been rotated. I have the rotation working ok but I need the crop canvas to size with the rotated image, at the moment its static.

    I hope someone can help me get the right values to use to bind one to the other.

    Please see image, it may help describe what I am after


    Mal

    Sunday, March 08, 2015 5:50 PM

All replies

  • can you post the code here?
    Monday, March 09, 2015 10:20 AM
  • This is the code I am using, where the value of val is an angle

                canvasMain.RenderTransformOrigin = new Point(0.5, 0.5);
                CompositeTransform trans = new CompositeTransform();
                trans.Rotation = val;
                canvasMain.RenderTransform = trans;


    Mal

    Monday, March 09, 2015 10:24 AM
  • Hi Mal,

    Do you mean you want this part?


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, March 19, 2015 4:52 AM
    Moderator
  • Nearly, I want this

    Mal


    So that the underlying rectangle bounds are like the red rectangle in this image
    • Edited by MalBall Thursday, March 19, 2015 2:08 PM
    Thursday, March 19, 2015 2:08 PM
  • Hi MalBall,

    I understand, you'd like to implement some cropping feature for your images. But unfortunately, I don't think we have directly API for you to implement this feature, but instead you may need calculate the points by yourself.

    You may need to find third party algorithm for help. Simply search on the Internet: http://stackoverflow.com/questions/5789239/calculate-largest-rectangle-in-a-rotated-rectangle

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, March 26, 2015 5:33 AM
    Moderator
  • James

    Thanks for the URL, I took some of this code and got it to work in a manner of speaking, i.e. the inner box does resize when I rotate the image underneath, however, it doesn't work correctly.

    The problem is that the image width and height remain constant because its only being rotated and not resized. Is there a way to get where the top of a rotation is within the confines of the screen that may help

    the Composite transform I use to rotate the image doesn't seem to have any values I can use


    Mal

    I found another example that I have nearly got working but its the corners of the image that are keeping up with the rectangle and not the other way round (see image 1). If I switch round and do GetBounds(imgMain, borderStraighten) the border rectangle just gets bigger and bigger.

    I am sure I am just doing something really stupid because it seems to be almost right

                    Rect r = GetBounds(borderStraighten, imgMain);
                    borderStraighten.Width = r.Width;
                    borderStraighten.Height = r.Height;
           public Rect GetBounds(FrameworkElement of, FrameworkElement from)
            {
                GeneralTransform transform = of.TransformToVisual(from);
                return transform.TransformBounds(new Rect(0, 0, from.ActualWidth, from.ActualHeight));
            }


    • Edited by MalBall Thursday, March 26, 2015 5:31 PM
    Thursday, March 26, 2015 3:29 PM
  • Hi MalBall,

    I understand, you'd like to implement some cropping feature for your images. But unfortunately, I don't think we have directly API for you to implement this feature, but instead you may need calculate the points by yourself.

    You may need to find third party algorithm for help. Simply search on the Internet: http://stackoverflow.com/questions/5789239/calculate-largest-rectangle-in-a-rotated-rectangle

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Ok sorted this particular issue with thanks to help from other sites on the internet. I have posted my method below, in case anyone else is interested in doing this.

    Now the issue is how do I cut the image within the bounding box, I have only managed to cut it out at the angle its rotated to, I want to get the straightened image from within the box. Tried using a canvas and GetCanvas.Left but that just returns 0.

            private Size CalculateCrop(int width, int height, double angle)
            {
                angle = ConvertToRadians(angle);
                var w0 = width;
                var h0 = height;
                if (width <= height) {
                    w0 = width;
                    h0 = height;
                }
                else {
                    w0 = height;
                    h0 = width;
                }
                // Angle normalization in range [-PI..PI)
                var ang = angle - Math.Floor((angle + Math.PI) / (2*Math.PI)) * 2*Math.PI; 
                ang = Math.Abs(ang);      
                if (ang > Math.PI / 2)
                    ang = Math.PI - ang;
                var sina = Math.Sin(ang);
                var cosa = Math.Cos(ang);
                var sinAcosA = sina * cosa;
                var w1 = w0 * cosa + h0 * sina;
                var h1 = w0 * sina + h0 * cosa;
                var c = h0 * sinAcosA / (2 * h0 * sinAcosA + w0);
                var x = w1 * c;
                var y = h1 * c;
                var w = 0;
                var h = 0;
                if (width <= height) {
                    w = (int)(w1 - 2 * x);
                    h = (int)(h1 - 2 * y);
                }
                else {
                    w = (int)(h1 - 2 * y);
                    h = (int)(w1 - 2 * x);
                }
                return  new Size(w, h);
            }
    
            public double ConvertToRadians(double angle)
            {
                return (Math.PI / 180) * angle;
            }


    Mal

    Friday, March 27, 2015 4:54 PM
  • Hi MalBall,

    Sorry for a late response, but as I understand if you can calculate the position and the size of the canvas, you can use some screenshot api for helping crop the image. For instance we use RenderTargetBitmap class

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, April 08, 2015 9:44 AM
    Moderator
  • Yes that's my issue I cant work out how to calculate where to left and top of the inner rectangle is. At the moment I use left = 0, top = 0, width = width of inner bounding box, height = height of inner bounding box as the feed for the Crop method in the Lumia Imaging SDK, however, left and top are obviously not correct.


    Mal

    Wednesday, April 08, 2015 10:02 AM