iOS - Drawing over background with panning - problem with bounds

lukeonlukeon PLMember
edited July 2016 in General

I'm working on drawing feature with drawing over background image. I'm extending this example: http://www.infinite-x.net/2014/06/05/creating-a-drawing-app-using-xamarin-forms/

and got to point where I need to pan over background image and together with my drawing for iOS (android works ok).

I need a "two layers" (background + drawing) to use eraser only for drawing layer. Also after saving image and opening it again I need be able to erase only drawing.

Structure is:

XamlPage > Grid (xamarin forms) > ContentView (xamarin forms) > Frame (xamarin forms) > Renderer (DrawingiOSParentView : UIScrollView)

and this is renderer constructor:

public DrawingiOSParentView(RectangleF frame) : base(frame)
            {
                ClipsToBounds = false;
                _originalFrame = frame;

                _backgroundImageView = new UIImageView(new CGRect(0, 0, DrawingConsts.ResizeWidth, DrawingConsts.ResizeHeight));
                this.AddSubview(_backgroundImageView);

                _drawingSubView = new DrawingiOSSubView(new RectangleF(0, 0, DrawingConsts.ResizeWidth, DrawingConsts.ResizeHeight)); 
                _drawingSubView.BackgroundColor = UIColor.Clear;
                this.AddSubview(_drawingSubView);

                var pangr = new UIPanGestureRecognizer();
                pangr.AddTarget(() => { _drawingSubView.HandleSubViewPan(pangr); });
                pangr.AddTarget(() => { HandlePan(pangr); });
                (this as UIView).AddGestureRecognizer(pangr);

    // load background image
// load drawing image
            })

The problem now I have is that when I switch to Pan mode then and move image then it goes over painting frame (which is separate frame in Grid (xamarin forms)).

Like on this screen ( I need that image and drawing would be scrolling only in red frame):

Code for handling Pan on background (similar is for handling drawing pan in subview):

protected void HandlePan(UIPanGestureRecognizer recognizer)
        {
            Debug.WriteLine("DRAWVIEW state " + recognizer.State);
            if (IsPanMode)
            {
                if (recognizer.State == UIGestureRecognizerState.Began)
                {
                    _originalFrame = this.Frame;
                }
                if (recognizer.State != (UIGestureRecognizerState.Cancelled | UIGestureRecognizerState.Failed | UIGestureRecognizerState.Possible))
                {
                    // move the shape by adding the offset to the object's frame
                    CoreGraphics.CGPoint offset = recognizer.TranslationInView(this);
                    CoreGraphics.CGRect newFrame = _originalFrame;
                    newFrame.Offset(offset.X, offset.Y);
                    this.Frame = newFrame;
                }
            }
        }

Any ideas? I know that this is related to bounds, but tried many things and didn't helped.

Sign In or Register to comment.