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

因此，我设法使用发现的here和here这个示例来解决这个问题。

一切正常，这只是我们裁剪时处理两个视图之间的比例的一种情况。

裁剪显示在UIScrollview中的图像以校正显示在叠加层中的图像

1 个答案: