基于Xamarin.Forms的PDF显示及签名图片定位方案咨询

Hey there! Let's walk through the best way to implement resizable, positionable signatures in your Xamarin.Forms PDF viewer, and capture their coordinates/size reliably.

First, let's break down your two ideas, then dive into the optimal solution:

Your Existing Ideas: Pros & Cons #

• Idea 1: Two-layered view (PDF + signature overlay)
  This is actually a rock-solid approach—totally feasible, and it plays perfectly to Xamarin.Forms' strengths. The main concern you might have is handling coordinate mapping between the view and PDF, but that's solvable with a bit of straightforward math. We'll expand on this below.

• Idea 2: pdfjs + fabric.js across iOS/Android
  While this works well for web-based PDF handling, it's overcomplicating things for Xamarin.Forms. iOS has tricky WKWebView constraints (like local resource loading, JS-C# interop latency, and scaling inconsistencies) that will add unnecessary maintenance overhead. Since you're already using a native Xamarin PDF display solution, sticking with native controls is way better.

Optimal Solution: Native Two-Layered Layout with Gesture Recognition #

Here's a step-by-step implementation plan that's cross-platform, maintainable, and easy to integrate with your existing PDF viewer:

1. Layout Structure: Use AbsoluteLayout for Overlay #

Wrap your existing PDF viewer and a signature canvas in an AbsoluteLayout—this lets you stack the signature layer directly on top of the PDF, with both filling the entire view:

<AbsoluteLayout>
    <!-- Your existing PDF viewer control -->
    <local:PdfViewer 
        AbsoluteLayout.LayoutBounds="0,0,1,1" 
        AbsoluteLayout.LayoutFlags="All" />
    
    <!-- Signature overlay: a custom ContentView or SkiaSharp CanvasView -->
    <local:SignatureCanvas 
        AbsoluteLayout.LayoutBounds="0,0,1,1" 
        AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>

2. Handle Signature Interactions with Native Gestures #

Xamarin.Forms has built-in gesture recognizers for drag (PanGestureRecognizer) and pinch-to-zoom (PinchGestureRecognizer)—no third-party libraries required. Here's how to wire them up for your signature image:

Add Gestures to the Signature Image

var signatureImage = new Image { Source = "signature.png" };

// Pan (drag) gesture
var panGesture = new PanGestureRecognizer();
panGesture.PanUpdated += OnSignaturePanUpdated;
signatureImage.GestureRecognizers.Add(panGesture);

// Pinch (resize) gesture
var pinchGesture = new PinchGestureRecognizer();
pinchGesture.PinchUpdated += OnSignaturePinchUpdated;
signatureImage.GestureRecognizers.Add(pinchGesture);

// Add the image to your SignatureCanvas
SignatureCanvas.Content = signatureImage;

Implement Gesture Handlers

private double _initialScale;

private void OnSignaturePanUpdated(object sender, PanUpdatedEventArgs e)
{
    var sigImage = sender as Image;
    if (sigImage == null) return;

    switch (e.StatusType)
    {
        case GestureStatus.Running:
            // Update position as user drags
            sigImage.TranslationX += e.TotalX;
            sigImage.TranslationY += e.TotalY;
            break;
        case GestureStatus.Completed:
            // Capture final position (convert to PDF coordinates)
            CaptureSignatureData(sigImage);
            break;
    }
}

private void OnSignaturePinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
{
    var sigImage = sender as Image;
    if (sigImage == null) return;

    if (e.Status == GestureStatus.Started)
    {
        _initialScale = sigImage.Scale;
    }
    else if (e.Status == GestureStatus.Running)
    {
        // Apply zoom while maintaining aspect ratio
        sigImage.Scale = _initialScale * e.Scale;
    }
}

3. Map View Coordinates to PDF Document Coordinates #

The key here is converting the signature's on-screen position/size to match the PDF's coordinate system (PDF uses bottom-left as origin, while Xamarin.Forms uses top-left). You'll need to account for your PDF viewer's current zoom scale and scroll offset:

private void CaptureSignatureData(Image sigImage)
{
    var pdfViewer = FindByName<PdfViewer>("YourPdfViewer");
    var viewScale = pdfViewer.ScaleFactor;
    var scrollOffset = pdfViewer.ScrollOffset;

    // Get on-screen bounds (adjust for translation)
    var viewBounds = new Rectangle(
        sigImage.X + sigImage.TranslationX,
        sigImage.Y + sigImage.TranslationY,
        sigImage.Width * sigImage.Scale,
        sigImage.Height * sigImage.Scale
    );

    // Convert to PDF coordinates (bottom-left origin)
    var pdfX = (viewBounds.X - scrollOffset.X) / viewScale;
    var pdfY = (pdfViewer.ContentHeight - viewBounds.Y - viewBounds.Height - scrollOffset.Y) / viewScale;
    var pdfWidth = viewBounds.Width / viewScale;
    var pdfHeight = viewBounds.Height / viewScale;

    // Save these values (e.g., to a model or database)
    Console.WriteLine($"Signature PDF Coords: X={pdfX}, Y={pdfY}, W={pdfWidth}, H={pdfHeight}");
}

4. Bonus: Use SkiaSharp for Smoother Signature Handling #

If you want more control (like letting users draw signatures directly instead of using an image), swap the Image with a SKCanvasView from SkiaSharp. SkiaSharp provides cross-platform 2D graphics support, making it easy to draw, resize, and capture signature paths.

Why This Works Better #

• Native Performance: Uses Xamarin.Forms' built-in controls and gestures, so it's fast and consistent across iOS/Android.
• Easy Maintenance: No messy JS interop or WebView workarounds—all logic lives in C#.
• Flexible: You can extend it to support multiple signatures, undo/redo, or other annotation features easily.

内容的提问来源于stack exchange，提问作者Frol Shpak