月別: 2017年5月

開発環境をReact+Typescript+Webpackに換えました。
これまではUI部分はRiot.jsで、図形の描画はCanvasの描画APIを使っていましたが、図形の表示をSVGをDOM内に直接埋め込む方式に切り替えました。おそらくRiotでも同じことができるとは思いますが、Reactの仮想DOMでSVGを扱う例が多数あり、それらの影響を受けました。

点/辺/面を入力して移動するなどの編集操作をSVG直接表示の実装でできることがわかりました。またundo/redoも実装しました。これをベースにベクターイラストエディタを作るには、
1.最低限通常のドローソフトの編集機能がこの設計で作れることを確認
2.パスをスプライン曲線で編集するなど、polylerの独自の機能を実装
が今後必要です。２が難しくて、研究的な要素が多いため実装がなかなか進まないことが今までの開発過程からわかっています。そこで、まず、１の普通のドローソフトに近いものを一旦作ってみようと思います。

ブラウザ上で動く簡単なベクター形状エディタを作ろうとしています。
ある程度作る–>一から作り直す、というのを繰り返しています。
開発環境はTypescriptとRiot.js,Webpackです。
描画はCanvasを使っています。
バグが多く安定して動作するものがまだできていません。
複雑なイラストを描いていると途中でクラッシュしてしまい、うまく描けません・・・

polylerという名前のドローソフトを作っています。

主な特徴は
・ブラウザ上で動作
・ベクターグラフィックス
・イラスト制作・お絵かきに特化
・スプライン曲線と直線によるパスで形状を表現
・パスのぼかし・マスクを使って多様な塗りを表現
・SVG出力
です。

将来的には
・複数のユーザでリアルタイムに共同で編集できる機能
・描いたベクターイラストを投稿するサイト(pixivのような？)
・アニメーション制作ツール
などに発展させていきたいと思っています。

hiroです。このページでは、私が開発しているソフトウェアについて書いていく予定です。
現在、ドローソフトを作っています。
自分のやっていることをブログでこまめにまとめて開発の方向性を保てればいいなと思っています。