调整 CGPath 大小

Posted 2023-03-11

【中文标题】调整 CGPath 大小

【英文标题】：Adjust CGPath size

【发布时间】：2016-08-12 08:36:17

【问题描述】：

简介

我有一个CGPath，我使用PocketSVG API 从SVG 文件创建。一切正常。

问题

问题是形状由于某种原因拉长了，请看这张图（蓝色只是为了让你更容易看到，请忽略它，应该是ClearColor）：

目标

我想实现什么？我想实现一个覆盖整个屏幕宽度的形状（我不在乎高度，它应该根据宽度自行修改），并且粘在屏幕底部，请看这张图片好吧（请忽略圆形按钮）：

守则

重要的部分;)

我有一个UIView 的子类，它从SVG 文件中绘制这个形状，它称为CategoriesBarView。然后，在我的MainViewController（UIViewController 的子类）上创建CategoriesBarView 的对象并以编程方式将其设置为子视图。

CategoriesBarView:

class CategoriesBarView: UIView 
    override func layoutSubviews() 
        let myPath = PocketSVG.pathFromSVGFileNamed("CategoriesBar").takeUnretainedValue()

        var transform = CGAffineTransformMakeScale(self.frame.size.width / 750.0, self.frame.size.height / 1334.0)
        let transformedPath = CGPathCreateCopyByTransformingPath(myPath, &transform)

        let myShapeLayer = CAShapeLayer()
        myShapeLayer.path = transformedPath

        let blur = UIBlurEffect(style: .Light)
        let effectView = UIVisualEffectView(effect: blur)
        effectView.frame.size = self.frame.size
        effectView.frame.origin = CGPointMake(0, 0)
        effectView.layer.mask = myShapeLayer

        self.addSubview(effectView)

    

MainViewController:

override func viewDidLoad() 
    super.viewDidLoad()

    let testHeight = UIScreen.mainScreen().bounds.size.height / 6 // 1/6 of the screen’s height, that is the height in the target picture approximately, doesn’t it?

    let categoriesBarView = CategoriesBarView(frame: CGRect(x: 0, y: UIScreen.mainScreen().bounds.size.height - testHeight , width: UIScreen.mainScreen().bounds.size.width, height: testHeight))
        categoriesBarView.backgroundColor = UIColor.blueColor() // AS I said, it should be ClearColor
    self.view.addSubview(categoriesBarView)

你们有谁知道这里的问题是什么以及为什么形状会这样拉伸？如果有人可以在这里帮助我，我将不胜感激。

非常感谢:)

【问题讨论】：

您是否尝试过根据屏幕分辨率缩放路径？

@DipenPanchasara 你是什么意思？我怎样才能做到这一点？我应该在我的代码中更改什么？谢谢！

假设您在 100x100 中绘制了一条路径，并且您希望它在 320x100 中看起来也一样，然后将路径的 x 点乘以 3.2，因为它的新区域是实际路径的 3.2 倍。简单缩放路径。

@DipenPanchasara 我不太明白，它与拉伸路径有什么关系，您能否添加一个代码示例以帮助我更好地理解？谢谢！

【参考方案1】：

考虑下面的代码，它绘制了一个 100x100 尺寸的正方形。我在这里所做的以 100x100 作为基本尺寸（因为它易于计算相应的比率或比例尺寸），如您所见，我已经定义了 scaleWidth 和 scaleHeight 变量，它们代表您当前的路径比例。目前比例为1.0，这意味着它绘制一个100x100的正方形，如果你分别将它更改为0.5和0.75，它将绘制一个50X75像素的矩形。分别参考1.0 和0.5 和0.75 清楚地描述比例宽度和高度之间差异的图像。

CGFloat scaleWidth = 0.50f;
CGFloat scaleHeight = 0.75f;

//// Square Drawing
UIBezierPath* bezierSquarePath = [UIBezierPath bezierPath];

// ***Starting point of path ***
[bezierSquarePath moveToPoint: CGPointMake(1, 1)];

// *** move to x and y position to draw lines, calculate respective x & y position using scaleWidth & scaleHeight ***
[bezierSquarePath addLineToPoint: CGPointMake(100*scaleWidth, 1)];
[bezierSquarePath addLineToPoint: CGPointMake(100*scaleWidth, 100*scaleHeight)];
[bezierSquarePath addLineToPoint: CGPointMake(1, 100*scaleHeight)];

// *** end your path ***
[bezierSquarePath closePath];
[UIColor.blackColor setStroke];
bezierSquarePath.lineWidth = 1;
[bezierSquarePath stroke];

图片 1：使用 scaleWidth = 1.0 和 scaleHeight = 1.0 表示 100x100 正方形

图像 2：使用 scaleWidth = 0.50 和 scaleHeight = 0.75 表示 50x75 正方形

注意：在给定的图像中，所有绘图都是在 UIView 的 - (void)drawRect:(CGRect)rect 方法中完成的，因为只有 UIView 能够绘图。我放置了一个UIView，它在图像中用 GrayColor 突出显示。

我相信它为您提供了一个关于扩展解决问题的路径的观点，因为您不能使用相同的代码，但您可以使用它生成一个。

有用的工具：如果您不是图形编码方面的专家，您可以推荐使用PaintCode software，它会生成带有 UI 的 Objective-C 代码。认为可能还有其他软件可供您选择。

编码愉快:)