web-dev-qa-db-ja.com

Xcode 6では、VECTOR画像アセットを使用できます...それらの使用方法は?

何かに気付いたとき、Xcode 6と画像アセットをいじっていました非常に興味深い:ベクトル画像を指定できるようになりました(Images.xcassetsを選択した後、ユーティリティペインで確認できます)。

.SVG画像(機能しない)で小さなアプリ(大きなUIImageViewを含む)を試し、次に.EPS(機能しませんでした)を試し、ついに.PDFを試しました。さて、画像を見ましたが、ピクセル化されており、ベクトル化されていないように見えました。

したがって、Appleはベクトルのアイコン/画像の準備をしているようです。アプリアイコンの無数のバージョンや「@ 2x」画像はもうありません。しかし、誰でもその機能のロックを解除できますか?

72
Jean Le Moignan

ベクトルアセットに関するいくつかの実験後の私の考えを以下に示します。

1。コンパイル時のサポート

いくつかの試行の後、私はそれが単なるコンパイル時のサポートであると信じています。 Xcodeは、コンパイル時にすべての1x、2x、および3xイメージを生成します。つまり、古いiOSバージョンで動作します。同時に、最終ビルドではまだPNG形式であり、ベクトルファイルからより大きなロスレスイメージを取得できないことを意味します。

2。なぜPDFがSVGやその他の形式ではなく

SVGおよびその他の形式の場合、ベクトル画像には実際のサイズ情報がありませんが、PDFにはサイズ情報があります。 Xcode 6が行うことは、PDFのサイズ情報を実際の表示サイズとして使用し、ベクトル画像から2x 3xファイルを生成することです。

Size info in PDF

3。 PDFのファイルサイズは関係ありません

最初は、PDFがPNGよりもはるかに大きくなるという懸念があります。 http://smallpdf.com/ で圧縮してみましたが、かなりうまくいきました。ただし、以前に言ったように元のPDFファイルがビルドに含まれていない場合、PDFのファイルサイズは重要ではありません。

他に何か見つけたら、この投稿の編集を続けます。

編集14-09-25

@mredigは、iOSの場合はコンパイル時にビットマップを生成しますが、OSXの場合はスケーラブルな形式のベクター画像を含むと述べました。

経由: http://martiancraft.com/blog/2014/09/vector-images-xcode6/

58
Allen Hsu

Xcode 6のアセットカタログでベクター画像を試す方法は次のとおりです。

  1. 新しい画像セットを作成します。

  2. 画像セットで空の画像スロットを選択し、属性インスペクターのポップアップをベクターに切り替えます。これで、単一のユニバーサルイメージスロットができました。

  3. ベクトルPDFをそのスロットにドラッグします。

このスクリーンショットに示すように、画像が使用される場所はどこでも、ラスタライズなしでコンテキスト(固定サイズの画像ビューなど)にサイズ変更されます。

enter image description here

EDITこの答えにもかかわらず、より大きなPDF描画wasラスタライズ。しかし今、 https://stackoverflow.com/a/45623000/341994 を参照してください:Xcode 9では、ベクトルPDFはラスタライズせずに適切にスケーリングされます。

EDITXcode 11では、この式は機能します:アセットカタログで、[スケール]ポップアップメニューを[個別のスケール]に設定し、ベクトルを配置する必要がありますベースのイメージを1xスロットに挿入します。 [ベクターデータを保持する]をオンにします。できた.

25
matt

このオンラインツールを使用して、画像をsvgからpdfに変換できます。

http://www.fileformat.info/convert/image/svg2pdf.htm

1-画像のアップロード

2-選択幅:24ピクセル、高さ:24ピクセル

3- Xcodeプロジェクトにコピー

4- Images.xcassetsに移動

5-右クリックして新しい画像セットを作成

6-右側のパネルから選択(属性インスペクター)

7-型をベクトルに変更

8- PDFイメージをそこにドラッグアンドドロップします

9-プロジェクトで使用する

22

1つのヒント-PDF @ 2x解像度とファイル名を作成し、@ 2x([email protected])でこれを行うと、iPad 2とmini専用の完璧なシャープとコントラストの画像が得られます。 enter image description here

7
Roman Bambura

たとえば、アイコン、さらにはアプリのロゴタイプでカスタムフォントを作成し、それをそのまま使用してアプリに取り込みます。その後、デバイスのフォントサイズと画面解像度を簡単に調整できます。

質問への回答を探している場合:「iOSアプリでベクターグラフィックスを使用し、常に美しい完璧さで拡大縮小するにはどうすればよいですか?」 、次に https://github.com/mindbrix/UIImage-PDF からUIImage+PDFを強くお勧めします

私はこれが絶対に見事に動作することを発見しました。 3つの異なる解像度のPNG形式のすべての画像を使用する代わりに、各画像用の小さなPDFファイルがあります。これらを次のように表示できます。

// Objective C:
self.icon.image = [UIImage imageWithPDFNamed:@"icon.pdf" fitSize:self.icon.frame.size];

// Swift:
icon.setImage(UIImage(PDFNamed: "icon.pdf", fitSize: icon.frame.size))

fitSize:に加えて、atWidth:atHeight、およびatSize:もあります。

ベクトル化できるすべての画像にUIImage+PDFを使用していますが、写真画像にはPNGのみを使用しています。

また、PDFファイルを http://smallpdf.com/compress-pdf のように実行して、ファイルの最小サイズを確保しています。

エリック

3

アプリのアイコンを作成している場合、PDFは機能しません。 Speculid というプロジェクトを作成したばかりのプロジェクトをご覧ください。 SVGファイルを含むソース画像からPNG、PDFなどを構築できます。フィードバックをいただければ幸いです。

1
leogdion