UIView中矢量图形的平滑缩放

Posted 2023-03-13

【中文标题】UIView中矢量图形的平滑缩放

【英文标题】：Smooth scaling of vector graphics in UIView

【发布时间】：2013-04-20 03:40:33

【问题描述】：

所以我继承了 UIView 并添加了一些绘图代码。我正在上下缩放生成的视图。 我希望这个视图独立于分辨率，以便在任何尺寸下都清晰易读，并且我不需要管理多个图像等。

作为测试，我编写了一些看起来像这样的绘图代码。 它创建了适合 UIView 具有的任何框架大小的同心椭圆。 实际上外环比框架小一点，所以它没有被夹住。这很好。实际的图形会更复杂，并且包含必须以小尺寸可读的文本和类似性质的东西。

- (void)drawRect:(CGRect)rect

    UIColor* color = [UIColor colorWithRed: 0.833 green: 0.833 blue: 0.833 alpha: 1];

    float width = self.bounds.size.width;
    float height = self.bounds.size.height;
    float scalePercent = 0.8;

    for(int i = 0; i < 10; i++)

        width  = width * scalePercent;
        height = height * scalePercent;

        float x = (self.bounds.size.width - width) / 2;
        float y = (self.bounds.size.height - height) / 2;

        UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(x, y, width, height)];
        [color setStroke];
        ovalPath.lineWidth = 2;
        [ovalPath stroke];
    

现在是缩放比例：

- (void) makeBig

    [UIView animateWithDuration:0.5
                          delay:0
                        options:UIViewAnimationOptionBeginFromCurrentState
                     animations:(void (^)(void)) ^
                         self.transform = CGAffineTransformMakeScale(2, 2);
                     
                     completion:^(BOOL finished)
                     ];

当您运行此视图时，视图会放大，但它是像素化的。它是像素化的，因为视图的大小翻了一番，但它的分辨率没有改变。

所以，这是不这样做的方法。

- (void) makeBig

    [UIView animateWithDuration:0.5
                          delay:0
                        options:UIViewAnimationOptionBeginFromCurrentState
                     animations:(void (^)(void)) ^
                         self.transform = CGAffineTransformMakeScale(2, 2);
                     
                     completion:^(BOOL finished)
                         CGRect targetFrame = self.frame;
                         self.transform = CGAffineTransformIdentity;
                         self.frame = targetFrame;
                         [self setNeedsDisplay];
                     ];

这可行，但当分辨率恢复到屏幕分辨率时，修复在动画结束时可见。 我可以尝试预先放大视图并以最终尺寸预先绘制，然后缩小它，然后运行动画以再次放大它，但由于各种原因，我认为这听起来完全愚蠢。我想我可能是错的，这是自火灾以来最聪明的想法。不过我有点怀疑。

那么矢量内容的平滑缩放如何做得最好呢？

【参考方案1】：

基于视图的动画非常方便，但如果我没记错的话，它使用CABasicAnimation，它只使用一个关键帧。这将是更多的代码，但如果你使用CAKeyframeAnimation 代替，Core Animation 将为每个关键帧重绘动画层的内容（你可以指定它们何时发生），这样你就可以避免像素化的出现.

【讨论】：

我猜我错过了什么。我需要调查一下。谢谢你。

另外，我在事后发现了另一个问题，但我希望用一些实际的代码来报告。 ***.com/questions/2168419/…