矢量图像如何在 Xcode (即 pdf 文件)中工作？

矢量支持在 Xcode 6中是如何工作的？

当我尝试调整图像大小时，它看起来参差不齐，这是为什么呢？

66855 次浏览
小开
最佳答案

如何在 Xcode 中使用矢量(7和6.3 +) :

  1. 将图像保存为适当的@1x 大小的 . pdf文件(例如 24x24的工具栏按钮)。
  2. 在 图片 xcassets文件中，创建一个新的 图像集。
  3. 在 属性督察中，将 规模因素设置为 单向量。
  4. 将 pdf 文件拖放到 全部，环球影业部分。

  5. 您现在可以通过图像的名称来引用它，就像引用任何 。 png文件一样。

    UIImage(named: "myImage")

How to use vectors in older versions of Xcode (6.0 - 6.2):

  • Follow the steps above, except for step 3, set Types to Vectors.

How vectors work in Xcode

Vector support is confusing in Xcode, because when most people think of vectors, they think of images that can scale up and down and still look good. However, Xcode 6 and 7 don't have full vector support for iOS, so things work a little differently.

The vector system is really simple. It takes your .pdf image, and creates @1x.png, @2x.png, and @3x.png assets at build time. (You can use a tool to examine the contents of Assets.car to verify this.)

For example, assume you are given foo.pdf which is a 44x44 vector asset. At build time it will generate the following files:

  • foo@1x.png at 44x44
  • foo@2x.png at 88x88
  • foo@3x.png at 132x132

This works the same for any sized image. For example, if you have bar.pdf which is 100x100, you will get:

  • bar@1x.png at 100x100
  • bar@2x.png at 200x200
  • bar@3x.png at 300x300

Implications:

  • You cannot choose a new size for the image; it will only look good if you keep it at the 44x44 size. The reason is that full vector support is not implemented. The only thing these vectors do is save you the time of saving your image assets. If you have a tool (e.g. a Photoshop script) that already makes this a one-step process, the only thing you will gain by using pdf vectors is future-proof support (e.g. if in iOS 9 Apple begins to require @4x assets, these will just work), and you will have fewer files to maintain.
  • You should ask for all your assets at the @1x size, saved as PDF files. Among other things, this will allow UIImageViews to have the correct intrinsic content size.

Why it (probably) works this way:

  • This makes it backwards compatible with previous iOS versions.
  • Resizing vectors may be a computational intensive task at runtime; by implementing it this way, there are no performance hits.
小开

这是对@Senseful 的出色回答的补充。

如何制作. pdf 格式的矢量图像

我将告诉你如何在 Inkscape 做到这一点，因为它是免费和开源的，但其他程序应该是类似的。

返回文章页面墨水:

  1. 创建一个新项目。
  2. 转到 File > Document Properties，将自定义页面大小设置为您的@1x 大小(44x44,100x100等) ，单位为 px。
  3. 做你的艺术品。
  4. 转至档案 > 另存为... > 可列印文件格式(* 。Pdf) > 储存 > 确定。(或者，您可以选择“打印 > 打印到文件 > 输出格式: PDF > 打印，但是没有那么多选项。)

备注:

  • 正如在已接受的答案中提到的，您不能调整映像的大小，因为 Xcode 仍然在构建时生成栅格化映像。如果您需要调整您的图像大小，您应该创建一个新的。不同大小的 pdf 文件。

  • 如果已经有一个错误页面大小的.svg 图像，请执行以下操作:

    1. 更改页面大小(Inkscape > File > Document Properties)
    2. 选择工作空间中的所有对象(Ctrl + A)并调整它们的大小以适应新的页面大小。(按住 Ctrl 以保持方面大小。)

  • 转换为。将 svg 文件转换为。Pdf 你也可以找到在线工具为你做这项工作。这个答案呼叫 这里有一个例子。这样做的好处是允许您设置。Pdf 大小容易。

进一步阅读

小开

您可以在项目中使用普通的 PDF 文件作为 Vector 图像，并使用此扩展呈现任何大小的图像。这种方式更好，因为 iOS 不会生成。PNG 格式的图片从您的 PDF 文件，加上您可以呈现您的图像与任何大小您想要的:

    extension UIImage {


static func fromPDF(filename: String, size: CGSize) -> UIImage? {
guard let path = Bundle.main.path(forResource: filename, ofType: "pdf") else { return nil }
let url = URL(fileURLWithPath: path)
guard let document = CGPDFDocument(url as CFURL) else { return nil }
guard let page = document.page(at: 1) else { return nil }


let imageRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
if #available(iOS 10.0, *) {
let renderer = UIGraphicsImageRenderer(size: size)
let img = renderer.image { ctx in
UIColor.white.withAlphaComponent(0).set()
ctx.fill(imageRect)
ctx.cgContext.translateBy(x: 0, y: size.height)
ctx.cgContext.scaleBy(x: 1.0, y: -1.0)
ctx.cgContext.concatenate(page.getDrawingTransform(.artBox, rect: imageRect, rotate: 0, preserveAspectRatio: true))
ctx.cgContext.drawPDFPage(page);
}


return img
} else {
// Fallback on earlier versions
UIGraphicsBeginImageContextWithOptions(size, false, 2.0)
if let context = UIGraphicsGetCurrentContext() {
context.interpolationQuality = .high
context.setAllowsAntialiasing(true)
context.setShouldAntialias(true)
context.setFillColor(red: 1, green: 1, blue: 1, alpha: 0)
context.fill(imageRect)
context.saveGState()
context.translateBy(x: 0.0, y: size.height)
context.scaleBy(x: 1.0, y: -1.0)
context.concatenate(page.getDrawingTransform(.cropBox, rect: imageRect, rotate: 0, preserveAspectRatio: true))
context.drawPDFPage(page)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
return nil
}
}


}
小开

在 Xcode 8中，您仍然可以添加一个 pdf 文件，创建一个新的 Image Set，并在 Attributesspector 中设置 ScalesetoSingScale 选项。 enter image description here

小开

对于那些还没有更新的用户，Xcode 9(iOS 11)发生了变化。

可可触摸最新消息(WWDC 2017第201期)(@32:55) Https://developer.apple.com/videos/play/wwdc2017/201/

简而言之，AssetCatalog 现在包含了属性检查器中名为“保存矢量数据”的新复选框。当检查时，PDF 数据将包含在已编译的二进制文件中，当然会增加其大小。但是它为 iOS 提供了一个机会，可以在两个方向上扩展矢量数据，并提供漂亮的图像。(有自己的困难)。 对于11岁以下的 iOS 系统，使用了答案向上描述的老式缩放机制。

小开

Xcode 矢量图像

光栅图像 比例因子@1 x,@2 x,@3 x

作为开发人员，您需要负责将.png 设置为相应的因子

官方文件-图像大小和分辨率

矢量图像 PDF 与 SVG

矢量 PDF (可携式文件格式) 并非所有的 pdf 文件都是矢量文件。

  • Xcode 6-single scale; 构建时间; PDF-> PNG (@1x,@2x,@3x) ;
  • Xcode 9和 iOS 11-Preserve Vector Data; 运行时; 动态规模

SVG (可缩放向量图形)

  • Xcode 12和 iOS < 13-SVG-> PNG (@1x,@2x,@3x)
  • Xcode 12和 iOS 13-Preserve Vector Data; 运行时; 动态规模

迪夫

  • 大多数情况下，SVG 比 PDF 小
  • SVG 在文本编辑器中是可读和可编辑的

实验

如果您创建一个项目并使用以下命令构建它(不仅针对特定的设备 -Any iOS device)。Pdf 及。Svg 文件中，您将看到它们以相同的方式工作

  • 生成 png 文件(Assets.car file< sup > [ About ] )
  • 当您选择 Preserve Vector Data和 Individual scales(非 Single scale)的结果将是动态规模

Preserve Vector Data断断续续

生成的文件


提交答案