Skip to content

Latest commit

 

History

History
121 lines (102 loc) · 9.56 KB

README_ja.md

File metadata and controls

121 lines (102 loc) · 9.56 KB

plainCanvas

　Adobe Illustrator (CC 2014-) 用の add-on です。以下のことが可能です。

  • paper.js 用に書かれた JavaScript ファイルを読み込んで実行する。
    （初期状態では、ドラッグで線を描くツールが使用できます。）
  • add-on パネル上に作成した画像を、アートボードに書き出す。
  • アートボード上のパスを、add-on パネル上に取り込む。

image of the panel

導入方法

　諸々のスクリプトを読み込んで実行するという性格上、デバッグ機能を利用することを想定しています。このため、導入には通常のadd-onと異なる手順が必要です。

  1. CEP 10 HTML Extension Cookbook の Debugging Unsigned Extensions にしたがって、debug mode flagを設定してください。(CSXS.10とありますが、数字はイラレのバージョンにより異なります。例えば Ai 2024(28.2)では CSXS.11 です。)
  2. CEP 10 HTML Extension Cookbook の Extension Folders にしたがって、com.shspage.csxs.plaincanvas フォルダを、extensions フォルダに置いてください。
  3. Illustrator を実行して、メニューの ウィンドウ -> エクステンション の中にある plainCanvas を選んでください。

パネル上のボタンについて

  • in : Illustratorで選択されているパスが、パネル上に取り込まれます。
  • out : パネル上のパスが、アートボードに書き出されます。
  • run : 実行機能があるスクリプトを実行します。
  • opt : オプション入力欄を表示／非表示します。入力できるオプションがない場合、no option と表示されます。
  • < : 直前の描画を取り消します。
  • > : 直前に取り消した描画をやり直します。
  • CL : パネル上の描画をクリアします。
  • DB : 既定のブラウザでデバッグツールを開きます。
  • RL : パネルをリロードします。( hostscript.jsx はリロードされません。)
  • load : スクリプトファイルを選択するダイアログを表示します。

スクリプトファイルの読み込み

  • 読み込みたいスクリプトファイルを、パネルへドラッグ＆ドロップしてください。
    load ボタンでスクリプトファイルを選択することもできます。
  • 読み込み完了後、パネル上の描画はクリアされます。

読み込んで実行できる JavaScript スクリプト

  • scripts フォルダにサンプルスクリプトがあります。
  • javascript として記述してください (paperscript ではなく)。詳しくは、http://paperjs.org の、チュートリアル "Using JavaScript Directly" をご覧下さい。
    　　例： new Path() -> new paper.Path() // または "with(paper){" ステートメントを使うなど
    　　例： point1 + point2 -> point1.add(point2)
    　　例： function onMouseDown(event) -> tool.onMouseDown = function(event)
  • 文字コードは utf-8 で作成してください。（js/main.js 内の SCRIPT_ENCODING で変更することもできます。変更した場合は、index.htmlのcharset も変更してください。）
  • パネルのオプション入力欄を利用する場合、または、 オプション入力欄を非表示にする場合、optionManager.js のメソッドが利用できます。使用方法については同ファイル内の説明やサンプルスクリプトをご覧下さい。
  • object の描画が完了した時点で以下を実行すると、undo/redoの対象にできます。("object" は描画したオブジェクトを示す変数に置き換えてください。）
undoManager.keep(object);

undo は、対象にしたオブジェクトを不可視にすることで行われるため、paper.project 上には存在したままです。ただし、undoManager.js の UNDO_LIMIT を超えた場合は古いものから削除されます。また、不可視オブジェクトは書き出されません。

  • 読み込んだスクリプトファイルは、index.html 内に新たに生成した script タグの内容として挿入されます。

色の扱い

  • canvas は CMYKカラーを扱えないため、CMYKカラーを取り込んだ場合はRGBに変換して表示します。このため、元の色と違って見える場合があります。元のCMYKの値はメモリに保持しており(*1)、書き出す際には元の色になります。
    (*1: js/main.js の ALWAYS_EXPORT_RGB が false の場合)
  • js/main.js の ALWAYS_EXPORT_RGB が true の場合、paper.Color.type == "gray" の色は RGBColor で書き出されます。
  • 取り込み／書き出しの処理は、グラデーション、特色 に対応していません。

アートボードへの書き出し

  • canvas 上の paper.Path インスタンスの、以下の属性が書き出されます。
    segments, strokeWidth, strokeColor, fillColor, opacity

パスの取り込み

  • アートボード上の選択範囲に含まれる PathItem の以下の属性が取り込まれます。
    pathPoints, strokeWidth, strokeColor, fillColor
  • グループと複合パスは解除された状態で取り込まれます。

画像の読み込み

  • パネルへのドラッグ＆ドロップ、または__load__ ボタンによって画像を読み込むことができます。対応画像形式は jpeg, png です。
  • 画像読み込み後にパネル右上に表示される[hide image]をクリックすると画像を非表示にできます。再度クリックすると表示します。
  • 読み込んだ画像は paper.project.activeLayer.data.raster に保持され、スクリプトで利用することができます。
  • 画像は、スクリプトファイルの読み込みや CL・RLボタンによる画面クリアの際に破棄されます。

変更履歴

v.1.2.2

  • 画像読み込みに対応。

v.1.2.1

  • スクリプト読み込みエラー アラートと実行エラー アラートを追加しました。

v.1.2.0

  • ライブラリ類を更新。

v.1.1.8

  • runボタンを追加。runボタン用のサンプルスクリプトを追加。
  • 修正：前回と同じ名前のスクリプトファイルを読み込んだ際に、変更が反映されます。

v.1.1.7

  • loadボタンでもスクリプトファイルを読み込めるようにしました。

v.1.1.6

  • manifest.xml で対応バージョンの上限を 99.9 に変更

v.1.1.4

  • manifest.xml で対応バージョンの上限を 24.9 に変更

v.1.1.3

  • グレーカラーのインポート/エクスポートでの問題を修正

v.1.1.2

  • loadボタンを廃止し、スクリプトファイルのドロップを常に受け付けるようにしました。
  • paper.js の基本オブジェクトをグローバルにしました。これに合わせてサンプルスクリプトも更新しました。
  • パネルの最大サイズを2000×2000に拡大しました。

v.1.1.1

  • 読み込み時以外、パネルへのドロップを受け付けないようにしました。

v.1.1.0

  • パネル上のドラッグでテキストが選択されないようにしました。
  • スクリプトファイルをドラッグ＆ドロップで読み込むようにしました。

TODO / 既知の問題

  • TODO: 外部スクリプトファイルの読み込み方法を再検討する。
  • アートボードから取り込んだ図形の白黒が反転する場合がある。
  • 書き出した際に、アートボードから取り込んだものとcanvas上で描画したものの前後関係が正しくない場合がある。
  • TODO: アートボードとのやりとりに importSVG, exportSVG を使う？

ライセンス、その他

  • ※ 改変して公開する場合は、必ず バンドルID を変更してください。（バンドルID … CSXS/manifest.xml および.debug 内の com.shspage.csxs.plaincanvas。）

  • MIT ライセンスの下で公開しています。詳細はLICENSE.txtをご覧下さい。 ただし、以下の使用ライブラリは、それぞれのライセンスに従います。

  • Paper.js v0.12.17 - The Swiss Army Knife of Vector Graphics Scripting.
    http://paperjs.org/
    Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey http://juerglehni.com/ & https://puckey.studio/ All rights reserved.

  • Creative Cloud Extension Builder for Brackets
    https://github.com/davidderaedt/CC-Extension-Builder-for-Brackets
    Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.