locked
Zoom in and out on photos???

    Question

  • The first, default of photos is as this photos.

    THe second, Do not zoom out and dragging when photos were setting by default(just zoom in)

    THe third, Zoom in and setting limit drag around of photos up while the photos be zooming in( do not drag the photos over border of screen or grid) as this photo

    The more explaining:
    The part of blue  at the bottom and the part of top is covering by startmenu, toolbar and menu ( compare beween the first photo and the second photo)

    As of the two photos(on my computrer) do not drag to right or left. It just drag to top,down(because the two of part is covering)

    How to make it???

    That is my questions.


    Saturday, April 04, 2015 10:30 AM

Answers

All replies

  • Can you please explain more clearly what you are trying to do? I'm not sure what your goal is here.

    What code have you tried? How does the desired behaviour differ from the actual behaviour?

    For an introduction to gestures and manipulations (including zooming) see:

    Gestures, manipulations, and interactions , Quickstart: Pointers , and Quickstart: Touch input .

    Tuesday, April 07, 2015 12:47 AM
    Owner
  • So, Zooming photos inside scollview?
    Tuesday, April 07, 2015 1:28 AM
  • I want to implement zoom In/Out for the Canvas control.

    1) When I zoom in, zoom focus should be the mouse location.

    2) When I zoom out, zoom focus should be the center of Canvas.

    Below is the current code that I am trying but results are not satisfactory.

    When I zoom out all shapes are moving towards the scaled/zoomed center location and not to the Canvas's actual center location.

    So please guide me how should I compute the offset X and Y so that shapes will move towards center of canvas.

    double zoomFactor = 1.1; double offsetX = 0; double offsetY = 0; protected override void OnMouseWheel(MouseWheelEventArgs e) { double absoluteMouseX; double absoluteMouseY; double centerX = this.ActualWidth / 2; //Canvas center X double centerY = this.ActualHeight / 2; // Canvas center Y Point relativeMouseToCanvas = e.GetPosition(this); if (e.Delta > 0) { absoluteMouseX = relativeMouseToCanvas.X * this.Zoom + offsetX; absoluteMouseY = relativeMouseToCanvas.Y * this.Zoom + offsetY; this.Zoom *= zoomFactor; offsetX = absoluteMouseX - relativeMouseToCanvas.X * this.Zoom; offsetY = absoluteMouseY - relativeMouseToCanvas.Y * this.Zoom; } if (e.Delta < 0) { absoluteMouseX = centerX * this.Zoom + offsetX; absoluteMouseY = centerY * this.Zoom + offsetY; this.Zoom /= zoomFactor; offsetX = absoluteMouseX - centerX * this.Zoom; offsetY = absoluteMouseY - centerY * this.Zoom; } // Refresh/Repaint shapes on canvas }

    Tuesday, April 07, 2015 1:43 AM
  • Zooming out, in your case, will translate the upper-left corner of the viewing rectangle.

    enter image description here

    It is quite clear on the scheme that :
    ∆x = the difference of width between R1 and R2.
    so ∆x = (canvas width) * zoom for R2 - (canvas width) * zoom for R1

    same goes for ∆y :
    ∆y = (canvas height) * zoom for R2 - (canvas height) * zoom for R1

    Tuesday, April 07, 2015 1:43 AM
  •  if (e.Delta > 0)
        {
                absoluteMouseX = relativeMouseToCanvas.X * this.Zoom + offsetX;
                absoluteMouseY = relativeMouseToCanvas.Y * this.Zoom + offsetY;
    
                this.Zoom *= zoomFactor;
    
                offsetX = absoluteMouseX - relativeMouseToCanvas.X * this.Zoom;
                offsetY = absoluteMouseY - relativeMouseToCanvas.Y * this.Zoom;
        }
    
        if (e.Delta < 0)
        {
                absoluteMouseX = centerX * this.Zoom + offsetX;
                absoluteMouseY = centerY * this.Zoom + offsetY;
    
                this.Zoom /= zoomFactor;
    
                offsetX = absoluteMouseX - centerX * this.Zoom;
                offsetY = absoluteMouseY - centerY * this.Zoom;
         }
    
    This is my question(limit dragging).
    Tuesday, April 07, 2015 1:45 AM