Discussion Board

Results 1 to 11 of 11

Hybrid View

  1. #1
    Regular Contributor
    Join Date
    Jan 2014
    Posts
    156

    How to pan an image with two fingers?

    I use viewport to zoom/pan an image.

    Right now, I can pan the image with one finger but I want it with two fingers. How to do it?

    The main reason for doing this is to draw with one finger and pan with two fingers.

    Here is a part of my image control code..

    Code:
            private void Viewport_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
            {
                if (e.PinchManipulation != null)
                {
                    e.Handled = true;
    
                    if (!_pinching)
                    {
                        _pinching = true;
    
                        _relativeCenter = new Point(
                            e.PinchManipulation.Original.Center.X / Image.Width,
                            e.PinchManipulation.Original.Center.Y / Image.Height);
                    }
    
                    double w, h;
    
                    if (_width < _height)
                    {
                        h = _height * _scale * e.PinchManipulation.CumulativeScale;
                        h = Math.Max(Viewport.ActualHeight, h);
                        h = Math.Min(h, _height);
    
                        w = h * _width / _height;
                    }
                    else
                    {
                        w = _width * _scale * e.PinchManipulation.CumulativeScale;
                        w = Math.Max(Viewport.ActualWidth, w);
                        w = Math.Min(w, _width);
    
                        h = w * _height / _width;
                    }
    
                    Image.Width = w;
                    Image.Height = h;
    
                    Viewport.Bounds = new Rect(0, 0, w, h);
    
                    GeneralTransform transform = Image.TransformToVisual(Viewport);
                    Point p = transform.Transform(e.PinchManipulation.Original.Center);
    
                    double x = _relativeCenter.X * w - p.X;
                    double y = _relativeCenter.Y * h - p.Y;
    
                    if (w < _width && h < _height)
                    {
                        Viewport.SetViewportOrigin(new Point(x, y));
                    }
                }
                else if (_pinching)
                {
                    e.Handled = true;
    
                    CompletePinching();
                }
            }

  2. #2
    Regular Contributor
    Join Date
    Nov 2011
    Location
    la bouexiere, france
    Posts
    481

    Re: How to pan an image with two fingers?

    I thinks, You should reimplement jours control. Likr picturegesture.
    Windows 8, Windows phone 8 or Nokia Asha developer? Go to DVLUP

  3. #3
    Regular Contributor
    Join Date
    Jan 2014
    Posts
    156

    Re: How to pan an image with two fingers?

    How should I re-implement my control?
    What I'm trying to do is, Zoom-in, pan and draw annotations on the canvas for foreground and background segmentation

  4. #4
    Regular Contributor
    Join Date
    Nov 2011
    Location
    la bouexiere, france
    Posts
    481

    Re: How to pan an image with two fingers?

    I thinks you could test this :
    1- add a button
    2- on click change IsHitTestVisible property value on all UIELement used to draw.

    So, you should switch between draw and viewport gesture.
    Windows 8, Windows phone 8 or Nokia Asha developer? Go to DVLUP

  5. #5
    Regular Contributor
    Join Date
    Jan 2014
    Posts
    156

    Re: How to pan an image with two fingers?

    To prevent drawing, while user zoom and pan's the image I've implemented 2-finger gestures. So user can Zoom and pan the image using 2 fingers and draw on canvas using single finger.

    But I'm stuck up at these issues..

    1. while pinching the image, small lines are being added to the canvas

    2. Scaling the canvas corresponding to the image scale

    Here is a sample part of my project, download it and check out!
    Clipr: Best ever image clipping tool and first of it's kind in windows phone!!

    Download here
    http://www.windowsphone.com/s?appid=d533f018-238a-429c-affc-55a46c2dc69f

  6. #6
    Regular Contributor
    Join Date
    Nov 2011
    Location
    la bouexiere, france
    Posts
    481

    Re: How to pan an image with two fingers?

    Hi.
    I look quickly, and make few correction. I haven't check all the code :

    1- move ImageTransform to the GridTransform
    2- when pitch begin, i remove currentannotation
    3- remove event in OnNavigateFrom.

    You can find the code here : ZoomAndDraw.zip
    search yve in comment.

    Really interesting feature


    Yan
    Windows 8, Windows phone 8 or Nokia Asha developer? Go to DVLUP

Similar Threads

  1. Moving image over image or change image after 1 sec time period
    By chintandave_er in forum Mobile Java Media (Graphics & Sounds)
    Replies: 1
    Last Post: 2013-07-15, 11:23
  2. flying fingers in nokia 5300
    By teikkah in forum Mobile Java Games
    Replies: 2
    Last Post: 2007-09-13, 09:22

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×