1 finger to draw, 2 fingers to pan, zoom, and drag? RRS feed

  • Question

  • Making a canvas where I can draw is simple. But I can't think of any way to do 1 finger for drawing and 2 fingers for panning, zooming, and dragging.

    Could someone please help me with this? 

    Many thanks.

    Wednesday, January 22, 2014 3:58 AM


All replies

  • The gestures you describe aren't part of the standard Touch interactionsand so aren't directly implemented for you by the gesture or manipulations systems. Differing gestures by number of fingers is not recommended. Instead of differing by the number of fingers I'd recommend using a stylus for drawing and supply a modal setting to switch between drawing and manipulating by touch.

    That said, you can probably use a GestureRecognizer for this. It will handle two finger rotate and zoom. You can track the number of fingers down in the pointer messages before passing them to the GestureRecognizer to decide if you want to treat Dragging and translation events as drawing or panning.

    Quickstart: Touch inputQuickstart: Pointers
    Input: XAML user input events sample
    Input: Simplified ink  sample

    Wednesday, January 22, 2014 5:40 AM
  • Thank you for pointing me to the right direction.  It almost killed me, but I finally achieved what I wanted to with regard to drawing, panning, zooming, and rotating.

    Can you also please point me to how to create resizable objects like lines and polygons in the canvas?  I did a google search and couldn't find anything.

    Thursday, January 23, 2014 9:12 PM
  • Take a look at the Windows.UI.Xaml.Shapes namespace for Ellipses, Lines, Paths, and Rectangles


    Thursday, January 23, 2014 10:22 PM
  • I'm sorry, but how will your link help with the resizable-by-user part?
    Thursday, January 23, 2014 11:19 PM
  • You get to write the code for that.

    See the Quickstart links I provided earlier in the thread.


    Thursday, January 23, 2014 11:26 PM
  • I've gotten almost everything I wanted to do. There is 1 more minor thing. Except I can't for the life of me figure out how to do.

    In order to scale and rotate a shape, I need to set where the center is.  For a shape like ellipse or rectangle, this is easy.  Just do the following.

    	ct.CenterX = shape.Width / 2;
            ct.CenterY = shape.Height / 2;
    Doesn't work for a polygon (triangle, parallelogram, etc.).  If I don't set the center, then everytime I try to rotate the polygon it will rotate or scale with the origin of the canvas as the center. Please help.
    Wednesday, January 29, 2014 6:56 PM
  • Can you please clarify what you are asking for? In what way does this not work? Are you looking for help with the math to find the center of a polygon?
    Wednesday, January 29, 2014 10:54 PM
  • In order for me to use the 2 lines of code to define where the center of the rotation is for the shape, I need to define the width and height of the shape first.

    When I try to define the width and height of an eclipse or rectangle, everything is fine.  But when I try to set the width and height of a polygon, say a triangle, then the triangle fails to show in the canvas when I draw. But if I don't define the width and height of the triangle, then when I try to rotate it with 2 fingers it will rotate around the origin of the canvas (upper left hand corner) instead of the origin or center of the triangle.

    Hang on.  Let me make a sample really quick for you.

    Thursday, January 30, 2014 1:01 AM
  • Edited - Nevermind, I figured it out.  Thank you very much for all your help so far. 

    • Edited by RandyPete Thursday, January 30, 2014 2:56 AM
    Thursday, January 30, 2014 2:39 AM
  • What is the syntax for drawing a path? suppose I want to draw a semicircle, the xaml is this.

    <Path Stroke="Black" StrokeThickness="1"  
                                        Data="M 1,0 
                                                A 1,1 0 0 0 1,9
                                                C 1,10 1,0 1,0" Stretch="Fill" UseLayoutRounding="False" Width="26" />

    What would be the c# code for this?

    Thursday, January 30, 2014 7:40 PM
  • See Move and draw commands syntax to understand what the Data path means. That document explains how each command (e.g. "M", "A", "C") maps to a specific class. For example, "A" is an arc and can be represented with an ArcSegment in your PathGeometry. "C" is a cubic Bezier and can be represented with a BezierSegment, etc.

    Based on this you can unwind the Data string something like (untested):

                // A Size RotationAngle isLargeArc SweepDirection EndPoint
                var arc = new ArcSegment();
                arc.Size = new Size(1,1);
                arc.RotationAngle = 0;
                arc.IsLargeArc = false;
                arc.SweepDirection = SweepDirection.Counterclockwise;
                arc.Point = new Point(1,9);
                // C controlPoint1 controlPoint2 endPoint
                var cubicBezier = new BezierSegment();
                cubicBezier.Point1 = new Point(1, 10);
                cubicBezier.Point2 = new Point(1, 0);
                cubicBezier.Point3 = new Point(1, 0);
                var figure = new PathFigure();
                figure.StartPoint = new Point(1, 0); // M 1,0
                figure.Segments.Add(arc); // A 1,1 0 0 0 1,9
                figure.Segments.Add(cubicBezier); // C 1,10 1,0 1,0
                var pathGeometry = new PathGeometry();
                Windows.UI.Xaml.Shapes.Path p = new Windows.UI.Xaml.Shapes.Path();
                p.Data = pathGeometry;
                p.Stretch = Stretch.Fill;
                p.Stroke = Resources["PathBrush"] as Brush;
                p.StrokeThickness = 1;
                p.UseLayoutRounding = false;
                p.Width = 26;


    Saturday, February 1, 2014 7:01 AM
  • Hey RandyPete,

    I'm unable to get "1 finger for drawing and 2 fingers for panning, zooming, and dragging".

    Can you help me please. Else answer me here 

    Clipr : Best ever clipping tool in Windows Phone!
    Download here

    • Edited by venu238 Wednesday, June 11, 2014 8:36 AM
    Wednesday, June 11, 2014 8:35 AM