裁剪顯示在UIScrollview中的圖像以校正顯示在疊加層中的圖像

Question

我一直在環顧四周，找不到解決我問題的答案。 我有一個帶有嵌入式圖像視圖的滾動視圖。 您可以旋轉和縮放圖像。

視圖層次結構如下所示：

|-> UIViewController
|--> UIView
|---> UIScrollView
|----> UIImageView

UIView只是將控制器放在情節提要上時添加的默認視圖。

我還在頂視圖上繪制了一個疊加層，其外觀如下所示：

我需要做的是將圖像裁剪為覆蓋的大小。 疊加是實用地創建的，但我保留了用於方形中心的rect的引用。 用於生成疊加層的代碼是：

 private void DrawOverlay()
    {
        var overlayPath = UIBezierPath.FromRect(View.Bounds);

        // Calculate the size of the transparent area we need.
        var rectSize = View.Frame.Width * 80 / 100;
        nfloat clearStartX = View.Frame.GetMidX() - (rectSize / 2);
        nfloat clearWidth = View.Frame.Size.Width - (clearStartX * 2);
        nfloat clearStartY = View.Frame.GetMidY() - ((GetTopBarHeight() + rectSize) / 2);
        nfloat clearHeight = clearWidth;

        // Create the rectange for out transparent area;
        TransparentRect = new CGRect(clearStartX, clearStartY, clearWidth, clearHeight);

        var transparentPath = UIBezierPath.FromRect(TransparentRect);

        // Apply the transparent box to our overall view.
        overlayPath.AppendPath(transparentPath);
        overlayPath.UsesEvenOddFillRule = true;

        // Set the full colour.
        var fillLayer = new CAShapeLayer();
        fillLayer.Path = overlayPath.CGPath;
        fillLayer.FillRule = CAShapeLayer.FillRuleEvenOdd;
        fillLayer.FillColor = Colours.TransparentBackground.CGColor;

        View.Layer.AddSublayer(fillLayer);

        // Calculate the length of the white line we want.
        var lineWidth = rectSize * 20 / 100;

        // Create a bezier path based on the transparent rect we defined earlier, that and a combination of the line
        // width we can plot each point to draw the lines. Each MoveTo defines the start of a new corner.
        UIBezierPath path = new UIBezierPath();
        path.MoveTo(new CGPoint(clearStartX, clearStartY + lineWidth));
        path.AddLineTo(new CGPoint(clearStartX, clearStartY));
        path.AddLineTo(new CGPoint(clearStartX + lineWidth, clearStartY));

        path.MoveTo(new CGPoint((clearStartX + rectSize) - lineWidth, clearStartY));
        path.AddLineTo(new CGPoint(clearStartX + rectSize, clearStartY));
        path.AddLineTo(new CGPoint(clearStartX + rectSize, clearStartY + lineWidth));

        path.MoveTo(new CGPoint(clearStartX, (clearStartY + rectSize) - lineWidth));
        path.AddLineTo(new CGPoint(clearStartX, (clearStartY + rectSize)));
        path.AddLineTo(new CGPoint(clearStartX + lineWidth, (clearStartY + rectSize)));

        path.MoveTo(new CGPoint((clearStartX + rectSize) - lineWidth, (clearStartY + rectSize)));
        path.AddLineTo(new CGPoint((clearStartX + rectSize), (clearStartY + rectSize)));
        path.AddLineTo(new CGPoint((clearStartX + rectSize), (clearStartY + rectSize) - lineWidth));

        // Apply the path and set the width and colour.
        CAShapeLayer pathLayer = new CAShapeLayer();
        pathLayer.Path = path.CGPath;
        pathLayer.StrokeColor = UIColor.White.CGColor;
        pathLayer.LineWidth = 5.0f;
        pathLayer.FillColor = null;

        View.Layer.AddSublayer(pathLayer);
    }

我試圖像這樣裁剪圖像：

 var imageref = ImageView.Image.CGImage.WithImageInRect(TransparentRect);
 UIImage croppedImage = new UIImage(imageref);

這似乎也是大多數答案的指向方式。 但是，這對我不起作用。 首先，將變換應用於滾動視圖，而不是圖像視圖，因為手勢已綁定到滾動視圖，如下所示。

    public override void ViewDidLoad()
    { 
       base.ViewDidLoad();
       NavigationItem.Title = "Crop Image";

       var ButtonDone = new UIBarButtonItem("Done", 
       UIBarButtonItemStyle.Plain, (sender, e) =>
       {
          CropImage();
       });  

       this.NavigationItem.SetRightBarButtonItem(ButtonDone, true);

       DrawOverlay();

       ScrollView.MinimumZoomScale = 1.0f;
       ScrollView.MaximumZoomScale = 5.0f;
       ScrollView.Delegate = this;
       ScrollView.ContentSize = new CGSize(ImageView.Frame.Size.Width, ImageView.Frame.Size.Height);
       var rotateGesture = new UIRotationGestureRecognizer((g) =>
       {
          g.View.Transform = CGAffineTransform.Rotate(g.View.Transform, g.Rotation);
          g.Rotation = 0;
       });
       rotateGesture.Delegate = this;


       ScrollView.AddGestureRecognizer(rotateGesture);
    }

    [Export("viewForZoomingInScrollView:")]
    public UIView ViewForZoomingInScrollView(UIScrollView scrollView)
    {
       return ImageView;
    }

[Export("gestureRecognizer:shouldRecognizeSimultaneouslyWithGestureRecognizer:")]
    public bool ShouldRecognizeSimultaneously(UIGestureRecognizer gestureRecognizer, UIGestureRecognizer otherGestureRecognizer)
    {
        return true;
    }

那么如何將圖像裁剪為透明的覆蓋矩形並保持縮放和旋轉變換呢？

感謝您對這個問題的任何幫助。

Answer 1

因此，我設法使用此處和此處的示例解決此問題 。

其他一切工作都很好，這只是我們裁剪時處理兩個視圖之間的比例的一種情況。