CoreGraphicsコードをSwift 3.0に変換する

Xcode 8.0が登場しました。
旧プロジェクトをXcode 8.0で開くと、Swift 3.0(あるいはSwift 2.4)に変換するよう促すダイアログが出現しました。

CoreGraphicsコードをSwift 3.0への自動コンバートにかけたところ、変換されない部分が残りました。

変換後、このようなコードになったのですが最終的には

と変換したい。

文字列の処理がやりやすいのはなにかしらと考えて、急遽Rubyを学ぶことにしました。


文字列操作とファイル操作の基本的なやりかたを知ったので、以下の変換プログラム converter.rbを書きました。
CGPathMoveToPoint(pathRef, nil, 20, 0)

pathRef.move(to: CGPoint(x: 20, y: 0))

CGPathAddLineToPoint(pathRef, nil, 200, 0)

pathRef.addLine(to: CGPoint(x: 200, y: 0))

CGPathAddCurveToPoint(pathRef, nil, 205.523, 0, 210, 4.435, 210, 10)

pathRef.addCurve(to: CGPoint(x: 210, y: 10), control1: CGPoint(x: 205.523, y: 0), control2: CGPoint(x: 210, y: 4.435))

と変換するものです。

converter.rb

変換したいswiftファイルがあるフォルダに、converter.rbをおき、Terminalでそのフォルダへ移動した後、

と入力するとプログラムが実行されます。
実行すると、

とたずねられるので、そこで変換したいファイル名を入力すると変換が行われます。
(このさい、”_元ファイル名.bak”というバックアップファイルも作成します。)
ファイル名を入力せずにreturnキーを押すと、プログラムは終了します。

関連

Autodesk Graphic(旧iDraw)はCore Graphicsのコードを生成できる – nackpan Blog

Autodesk Graphic(旧iDraw)で線のアウトライン化

20160622outline
Autodesk Graphicでパスツールやラインツールで線を引いた後、アウトライン化する方法。

図形を選択して
変更 > 線の外側
ss 2016-06-22 7.40.51

を行う。

また、
ウィンドウ > プロパティ
を表示して、そこで「線の外側」を選択することでも行える。
ss 2016-06-22 7.41.22


当初、メニューに「アウトライン」を含むものを探していましたが見つからず、アウトライン化はできないのかと思ってしまいました。実は「線の外側化」と日本語化されていたのでした。

参考
Create a Set of Flat Weather Icons | Autodesk Graphic Tutorials
ss 2016-06-22 21.51.48
こちらのチュートリアルのStep 8でアウトライン化を使っている。

Autodesk Graphic(旧iDraw)| テキストをパスに沿わせる

Autodesk Graphicのチュートリアルのページ。
Autodesk Graphic Tutorials

そのなかに、ロゴを作成するチュートリアルがあります。
ss 2016-02-16 2.56.08
Design a Logo with Curved Text | Autodesk Graphic Tutorials
ここで用いられている技法のうち、テキストをパスに沿わせる方法をメモ。

テキストをパスに沿わせる

テキストとパスを選択

テキストとパスをどちらも選択する。(Shiftキーを押しながら選択することで複数選択)
ss 2016-02-16 3.04.40

テキストを配置

メニューから「変更」 > 「パス上にテキストを配置」を選択
ss 2016-02-16 3.04.56
パス上にテキストが配置されます。
ss 2016-02-16 3.05.16

テキストを移動

左下の点を動かすことでテキストを移動
ss 2016-02-16 3.06.15

字間調整

アピアランスパネルから、アピアランス:テキスト > A↔︎B で数値を調整
ss 2016-02-16 3.23.35
数値をAutoから4にしてみると間隔が開きました
ss 2016-02-16 3.29.56


以上、Autodesk Graphicでテキストをパスに沿わせて描く方法でした。

Autodesk Graphic(旧iDraw)はCore Graphicsのコードを生成できる

Autodesk Graphic(旧iDraw)は、図形からCore Graphicsのコードを書き出せることを先日知ったので、記します。

言語を選択

環境設定 > 読み込み / 書き出し
で、SwiftかObjective-Cかを選択
ss 2016-02-07 8.05.12

クリップボードへ書き出し

必要なレイヤーを選択して、Ctrl+クリック(もしくは編集メニュー)から、
別名でコピー > Core Graphics Codeを選択。
ss 2016-02-14 22.19.30
これでクリッブボードにコードがコピーされています。
ペースト(Ctrl + Vなど)すると、以下のようなコードが貼り付けられます。

省略してしまいましたが、インナーシャドー、グラデーション、輪郭線を用いた角丸四角形と三角形を描くのに130行程度のコードになっています。

生成されたコードからUIImageを作成

生成されたコードでは、CurrentContextを用いて、そこに描画しています。
サイズを指定してContextを作成し、それをCurrentContextとするのには
UIGraphicsBeginImageContextWithOptionsが使えます。

こんなかんじで、UIImageに持ってくることができます。

スケールについて

生成されたコードではコメントアウトされているCGContextScaleCTMを生かしてscaleFactorを変えれば、スケールの変更ができます。

一部書き方があっていないところあり

Autodesk GraphicのVer 3.0.1を使用しているのですが、一部、書き方がSwift 2.1に適合していない部分がありました。
グラデーションのOption指定部分を修正しました。

テキスト

テキスト部分を書き出してみるとCoreTextを使用したコードで書き出されました。
Path化されてしまうのではなく、テキスト情報が残っています。
ss 2016-02-14 22.54.08

一部でエラーが出たので修正しました


ということで、Autodesk GraphicはCore Graphics Codeを書き出せます。

関連

CoreGraphicsコードをSwift 3.0に変換する – nackpan Blog

iDrawがAutodesk Graphicになっていた

iDraw – Mac Illustration and Graphic Design
iDrawのページ。Autodesk Graphicに変更されたことが記されている。

Introducing Autodesk Graphic, a Full-Featured Vector Design and Illustration Application
Autodeskの広報ブログ。2015年10月8日の記事。Autodesk Graphicが登場。

Autodesk Graphic
Autodesk Graphicのページ。

ドローイングツールiDrawの名称が変わっていました。
iDrawの開発会社IndeeoはAutodeskに買収されて、iDrawはAutodesk Graphicに変更されました。

AutodeskといえばAutoCADなど。
個人的には、3DグラフィックスソフトのMaya, 3ds MAX、Softimageをつぎつぎ買収して、えらいことになったなーって思った会社。