Question

简介

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

问题

问题是形状由于某种原因而拉伸，请看一下这张照片（蓝色只是让你更容易看到，请忽略它，它应该是ClearColor）：< / p>

目标

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

守则

重要的部分;）

我有一个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)
}

你们中有谁知道这里的问题是什么，以及为什么形状如此伸展？如果有人能帮到我，我真的很感激。

非常感谢：）

Answer 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 square Represents 100x100 square using scaleWidth = 1.0 and scaleHeight = 1.0

图像2：使用scaleWidth = 0.50和scaleHeight = 0.75表示50x75 square Represents 100x100 square using scaleWidth = 0.50 and scaleHeight = 0.75

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

我相信它会为您提供有关扩展解决问题的路径的视角，因为您无法使用相同的代码，但您可以使用它生成一个。

有用的工具：如果您不是图形编码专家，可以建议使用PaintCode software生成带有UI的Objective-C代码。以为可能有其他软件可以选择。

快乐编码：）

调整CGPath大小

1 个答案: