在UIImage上打孔吗？ [英] Smootly mooving a hole in UIImage?

问题描述

我有一个 UIImageView 放置一个图像。此视图的图层被 CAShapeLayer 遮罩，以便在图像中创建圆形孔。为了创建孔，我使用 UIBezierPath 和 .usesEvenOddFillRule = true 。

I have a UIImageView displaing an image. This view's layer is masked with CAShapeLayer in order to create circular "hole" in the image. To create the hole I use UIBezierPath with .usesEvenOddFillRule = true.

在静态时可以正常工作。但是我需要那个孔来用用户的手指移动。为此，我每次用户移动手指时都使用奇偶规则创建新的 UIBezierPath 。在具有较小图像的较小手机上看起来还可以，但在iPhone 6 Plus上则显得断断续续。

It works fine when static. But I need that hole to move with user finger. To do that I create new UIBezierPath with even-odd rule each time user moves their finger. On smaller phones with smaller images it looks OK but on iPhone 6 Plus it is choppy.

任何有关如何使其平滑的想法都很受欢迎。我不能只移动蒙版 CAShapeLayer 的框架-它会移动打孔机器人并隐藏图像的某些边缘。因此，唯一的方法是每次用户移动手指时都会更改其 .path ，这很慢。

Any ideas on how to make it smooth are very wellcome. I cannot just move the frame of masking CAShapeLayer - it would move the hole bot also hide some edges of the image. So the only way is to change its .path each time user moves finger and that is slow.

编辑： matt的答案在某些情况下可以使用，但对于我而言，不是：我不会显示整个图像，而是仅显示 UIBezierPath 定义的一部分。该部分通常是椭圆形的（但可以是矩形或圆角矩形），并且在其中切有孔。当用用户的手指修剪洞时，图像的显示部分/形状不会改变-它是静态的。

matt's answer would work in some scenarios but not in my case: I am not displaying the whole image only a part of it defined by UIBezierPath. This part is most often oval (but can be rectangular or rounded rectangle) and it has "hole" cut in it. While the hole is mowing with users finger the displayed part/shape of the image does not change - it is static.

到目前为止，无效的解决方案是：

The ineficient solution that was in place so far wa:

1. 使用图像的显示部分边界创建 UIBezierPath


2. 在其上设置均匀填充规则


3. 在其中添加 UIBezierPath 孔


4. 将其设置为 CAShapeLayer 的路径，并使用不透明的填充颜色


5. 使用该 CAShapeLayer 作为 UIImageView

1. Create UIBezierPath with boundary of displayed part of the image
2. Set 'even off fill rule' on it
3. Add UIBezierPath of the hole to it
4. Set it as path of CAShapeLayer with some opaque fill color
5. Use that CAShapeLayer as mask of the UIImageView

每次用户移动手指时，都会重复此过程。我不能简单地移动整个遮罩层，因为那也会改变所显示图像的一部分。我将其保持不变并仅移动其中的孔。

This procedure was repeated each time a user moved their finger. I cannot simply move the whole mask layer as that would also change the part of the image being displayed. I what it to stay static and move only the hole in it.

推荐答案

它将移动Hole bot还隐藏了图像的某些边缘

it would move the hole bot also hide some edges of the image

嗯，我不同意。精确地移动面具是做到这一点的方法。我不明白您为什么认为这有问题。也许问题仅在于您没有使遮罩层 big 足够大。它的大小不必与要遮罩的图层相同。在这种情况下，它需要约为被遮罩层大小的9倍（水平为3，垂直为3），以便无论用户沿任何方向滑动遮盖层，它都将继续覆盖被遮罩的层。

Well, I don't agree. Moving the mask is exactly the way to do this. I don't see why you think there's a problem with that. Perhaps the issue is merely that you have not made the mask layer big enough. It does not have to be the same size as the layer it is masking. In this case, it needs to be about 9 times the size of the masked layer (3 horizontal and 3 vertical), so that it will continue to cover the masked the layer no matter how far in any direction the user slides it.

这篇关于在UIImage上打孔吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！