カテゴリー別アーカイブ: Canvas

ArtCanvas.js 2.0 のリリース

描画に必要な機能の実装がおおよそ完了したので, これをバージョン 2.0としてリリースします.

  • レイヤー
  • ペン, 図形, テキストの描画
  • Undo / Redo / レイヤーのクリア
  • カラー
  • ライン (線幅, ラインキャップ, ラインジョイン)
  • 変形
  • エキスポート

少々挙動がおかしい機能もありますが, 以上のような機能が実装されています (バグは今後のバージョンアップで修正していきます).

HTML5 Canvas ライブラリ (ArtCanvas.js 2.0) のプロトタイプを公開しました

HTML5 CanvasのライブラリであるArtCanvas.js…

これは, 初めて作成したライブラリだったこともあり, 今のレベルから見ると完成度がよろしくなく, いつかきちんと根本的に設計からリファクタリングしようと思っていて…放置状態でした.

しかし, Issueを投稿してくださった方がいて, リファクタリングにとりかかるモチベーションが湧いてきました.

そのプロトタイプデモを公開しました. また, 今回のバージョンからプログラムの設計も, APIの部分も根本から変更しているので,(というよりは, 新規に作成したようなもの), 今後は2.x系としてリリースしていく予定です (もっとも, ソースコードにコメントをきちんと記述して, APIのREADMEを作成を早急にすべきですが…).

バージョン2.xからの大きなロジック・機能の変更は以下の2点に集約されます.

  1. パスの定義を保存するスタック配列をもつことで, 変形しても画質が劣化しないようにする. さらに, パスを描画後のスタイル変更も可能にする
  2. Photoshopのようなレイヤー機能をもつ

ただし, これによってちょっと実装が難しくなったものもあります. 操作履歴の戻る / 進む, いわゆる Undo / Redoですね.

今のところは, History APIを駆使すれば実装できるかな…なんて考えています.