覆盖UIImage上的2D路径而无需缩放工件 [英] Overlaying 2D paths on UIImage without scaling artifacts

问题描述

我需要沿着图像的形状绘制一条路径，使其始终与图像在图像上的位置无关，而与图像的比例无关.可以将其视为Google地图的混合视图，其中街道名称和道路叠加在航拍图片的上方.

I need to draw a path along the shape of an image in a way that it is always matching its position on the image independent of the image scale. Think of this like the hybrid view of Google Maps where streets names and roads are superimposed on top of the aerial pictures.

此外，此路径将由用户的手指移动绘制，我需要能够检索图像像素坐标上的路径关键点.用户放大以更精确地设置路径位置.

Furthermore, this path will be drawn by the user's finger movements and I need to be able to retrieve the path keypoints on the image pixel coordinates. The user zooms-in in order to more precisely set the paths location.

我设法以某种方式使其工作:

I manage to somehow make it work using this approach:

-创建一个名为CanvasView的自定义UIView，该UIView可以处理触摸交互，并根据以下标志将缩放，旋转，平移值传递给UIImageView或PathsView(请参见下面的内容):

-Create a custom UIView called CanvasView that handles touches interaction and delivers scaling, rotation, translation values to either the UIImageView or PathsView (see bellow) depending on a flag: deliverToImageOrPaths.

-创建一个包含基本图像的UIImageView.设置为CanvasView的子级

-Create a UIImageView holding the base image. This is set as a children of CanvasView

-创建一个名为PathsView的自定义UIView，该UIView跟踪2D路径的几何形状并使用自定义的drawRect进行绘制.这被设置为UIImageView的子级.

-Create a custom UIView called PathsView that keeps track of the 2D paths geometry and draws itself with a custom drawRect. This is set as children of the UIImageView.

因此，层次结构:CanvasView-> UIImageView-> PathsView

So hierarchy: CanvasView -> UIImageView ->PathsView

通过这种方式，当deliveryToImageOrPaths为YES时，手指手势将同时转换UIImageView及其子PathsView.当deliveryToImageOrPaths为NO时，手势仅影响PathsView更改其几何形状.到目前为止一切顺利.

In this way when deliverToImageOrPaths is YES, finger gestures transforms both the UIImageView and its child PathsView. When deliverToImageOrPaths is NO the gestures affect only the PathsView altering its geometry. So far so good.

问题: 我遇到的问题是，在缩放基本UIImageView时(通过其.transform属性)，PathsView会使用别名工件进行缩放.在PathsView上仍在调用drawRect，但我想它是使用原始缓冲区的大小然后进行插值来执行绘制的.

QUESTION: The problem I have is that when scaling the base UIImageView (via its .transform property) the PathsView is scaled with aliasing artifacts. drawRect is still being called on the PathsView but I guess it's performing the drawing using the original buffer size and then interpolating.

如何解决此问题?有没有更好的方法来实现这些功能?

How can I solve this issue? Are there better ways to implement these features?

PS:我曾尝试将LevelsOfDetailBias 4和levelsOfDetail 4的PathsView图层类更改为CATiledLayer.它在某种程度上解决了混叠问题，但渲染速度慢得令人无法接受.

PS: I tried changing the PathsView layer class to CATiledLayer with levelsOfDetailBias 4 and levelsOfDetail 4. It solves the aliasing problem to some extent but it's unacceptable slow to render.

推荐答案

如果您的目标是iPhone OS 3.0+，则可以使用CAShapeLayer作为路径.您将CGPathRef分配给该图层，它将为您处理所有绘图和缩放.您只需设置图层的变换即可.

If you are targeting iPhone OS 3.0+ you could use a CAShapeLayer for your path. You assign a CGPathRef to the layer and it will handle all the drawing and scaling for you. You just set the layer's transform.

这篇关于覆盖UIImage上的2D路径而无需缩放工件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！