選択範囲の表示をやってみた。

このトピックについてめんどくさい点は、Photoshop等に倣うなら、範囲表示の境界線がキャンバスの倍率によらず常に1ピクセルであるということだ。このための下準備がめんどくさい。蟻が行進するのは意外とめんどくさくない。

もう一つめんどくさいのは、選択範囲を決定する前段階の仮線の表示だ。何がめんどくさいかと言うと、やはりPhotoshopに倣うならばこの仮線はキャンバスの画像を反転した色で表示する必要があるのだ。

この反転表示と蟻の行進を組み合わせて表示するのが多少めんどくさい。ちなみにPhotoshopではなくgimpに倣えば、この手の仮線はxorではなく縁取りされた実線になるのだけど、これはどのピクセルを選択しているのかわかりづらいのでよくないと思う。

ともあれ、選択範囲の表示についての基礎の部分はできた。まだ実装してないけど選択範囲の集合論的な演算（範囲の追加、削除、インターセクションなど）も無理なく組み入れられると思う。

ということで次に考えるべきめんどくさいことは、この選択範囲をどうするかという点と、選択範囲に対する描画という点だ。前者はクリップボードとのやり取りという話に繋がるのでなかなか大掛かりにめんどくさい。また後者はつまり描画のクリッピングなのだが、おそらくcanvasの機能で一発ということにはならないのでこれまためんどくさい。

この記事めんどくさい言い過ぎだ。

範囲選択機能を作る際、めんどくさいことは大まかに分けて2つあり:

• 選択範囲の内部表現
• 選択範囲の表示

まず内部表現から考えると選択範囲とは頂点の配列のことだ。それを結んで多角形とし、その内部に描画を限ることで範囲選択がなされる。

多角形によるクリッピングというのはキャンバスのネイティブの機能を用いて実現してもよいのだが、その場合アンチエイリアスが効いてしまう（アンチエイリアス自体はキャンバスの仕様に必要な要件ではなかったはずなのだが、どういうわけか全てのブラウザがそういうふうに動作する）ので自前でアンチエイリアスをかけない多角形塗りつぶし機能というのが必要だ。

というわけで書いた。

アンチエリアスをかけない描画メソッドというのはすでに線分と円についても作ってあるが、どれもなかなか面白く、グラフィックスの教科書をおさらいしてる気分になる。

＊　＊　＊

ポリゴンの内部をキャンバスの機能で塗りつぶし、輪郭だけアンチエイリアスなしの線分描画関数で上書きすれば10倍くらい速くなることに気付いてしまった。ぐぬぬ…。

従来はすべてのレイヤーの大きさはキャンバスの大きさであり、また背景レイヤーの完全に直上にある構造だったがこれをやめ、レイヤーごとに大きさとオフセットを独立して持てるようにした。それに合わせて、いわゆるレイヤー移動ツールを実装した。

と文章で書くとこれだけなのだが描画のあらゆるところでオフセットを意識するように書き直すのは死ぬほど大変だった…。その割に見た目は何も変わっていないと言う。

次は矩形選択ツールを作る。

キャンバスに描かれるペンのサイズを事前に図示するために、カーソルの形状を CSS の cursor プロパティにより変更している。

が、Chrome ではこのプロパティにより設定できるカスタムカーソルの最大サイズに制限がかけられることになると言う。

https://www.chromestatus.com/feature/5825971391299584
https://bugs.chromium.org/p/chromium/issues/detail?id=880863

カーソルの形状の変更はおそらくネイティブなウィンドウシステムの機能に依存しているだろうから、最小公倍数的な仕様に揃えるということなのかな？　と思ったらどうもカーソルの形状を変えることで誤クリックを誘導するような邪悪な広告対策のようだ。なんて世知辛い世の中だ。

というわけで桃缶でもそういう対応を入れることになったのであった。

ふたばの一部の画像掲示板には手書き機能が備えられている。が、赤福プラスはふたばのページを自前のページ構成で上書きしてしまうので、その備え付けの手書き機能をそのままでは利用できない。そこでだいたい同等の手書き機能を赤福プラス自身が内包している。

しかしこの手書き機能が別に使いやすくもなんともなかったりする。とはいえ手書き機能は長年 dat にも img にも関係なかったのでつまり別に困ってなかったのだが、今回 img でも手書き機能が有効化されたので、そういうわけにも行かなくなったのである。そこで改めて手書き機能を眺めてみると、いろいろと機能が欲しくなってきた。具体的にはレイヤー機能が欲しい。

とそういうことで作ってみた。とりあえず開発しやすさを鑑み、赤福プラスとは独立したブックマークレットとして仕立てた。そのほうが多くの「」やとっしーも試せるし。

桃の缶詰
https://appsweets.net/momo/

ネーミングは例によって別に意味はない。さて公開後のいろいろな不満を浚ってみると、だいたい以下の2点に集約されるようである:

• 機能が多すぎるからクソ: つまり、手書きのミニマリズムに反しているのではないか？　という指摘だ。しかしこれはその機能を使わなければいいだけなので、批判としては弱い。
• ペンの補間がクソ: こちらは聞くに値する。手書きの拡張スクリプトとしては肌色キャンバスというものがすでにある。これも描線の補間をするのだがよくできていて描き心地が良い。それ比べると桃缶はクソだな！　という評価なのである。