Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【ツール】簡易お絵描きアプリ【試作品】

 どうも!LSSです!!

 

JavaScriptによる筆圧感知のテストがてら、簡易ながらお絵描きアプリを作ってみました。

 

 

簡易お絵描きアプリ

 

 

使い方

マウスドラッグ、またはタッチ(ペンでも指でも)で枠内に絵を描けます。
タッチ操作の場合、筆圧感知に対応しています(お使いの端末が対応していた場合)。

 

枠下のメニューは左から「色変更」「全て消す」「ファイルとして保存」です。

「全て消す」は描いた絵が消えますが、一応確認ダイアログが出ます。

「ファイルとして保存」をクリックすると、日付・時刻をファイル名としたpngファイルとしてお使いの端末に保存されます。

 

※追記:動作確認報告。WindowsPC+Chrome…問題無し。AndroidスマホChrome…問題無し。iPhone7(iOS15.6.1)はSafariChromeでは問題無し。
ただし、スマホ+はてなアプリでは「ファイルとして保存」が何故か効かない、という状況です。

※さらに追記:iPhoneTwitterアプリから開いた場合、「ファイルとして保存」ボタン→「次の方法で開く」→「画像に保存」ではなく、下にスクロールして「”ファイル”に保存」→保存場所を選び、右上の「保存」をタップ、という手順を踏む必要があります。

 

 

コード

<style>
#cnvs{border:1px solid #aaaaaa;box-shadow:5px 5px 5px #777777;}
</style>
<p><canvas id="cnvs" width="300px" height="300px"></canvas></p>
<p><input id="cc" type="color" value="#000000" /> <input id="ers" type="button" value="全て消す" /> <input id="csave" type="button" value="ファイルとして保存" /></p>
<p>
<script>
sx=0;
sy=0;
cnvx=cnvs.getContext('2d');
tmer=cnvs.getBoundingClientRect();
//タッチ操作
cnvs.addEventListener('touchstart',
(e)=>{
sx=e.touches[0].pageX-tmer.left;
sy=e.touches[0].pageY-tmer.top;
}
,false);
cnvs.addEventListener('touchmove',
(e)=>{
tmofx=e.touches[0].pageX-tmer.left;
tmofy=e.touches[0].pageY-tmer.top;
tmf=e.touches[0].force;
cnvx.lineWidth=10*tmf;
cvline(sx,sy,tmofx,tmofy);
sx=tmofx;
sy=tmofy;
e.preventDefault();
}
,false);
//マウス操作
mmf=false;
window.addEventListener('mousedown',(e)=>{mmf=true;sx=e.offsetX;sy=e.offsetY;},false);
window.addEventListener('mouseup',()=>{mmf=false;},false);
cnvs.addEventListener('mousemove',
(e)=>{
if(mmf){
cnvx.lineWidth=8;
cvline(sx,sy,e.offsetX,e.offsetY);
sx=e.offsetX;
sy=e.offsetY;
}
}
,false);
//描画
function cvline(x1,y1,x2,y2){
cnvx.beginPath();
cnvx.moveTo(x1,y1);
cnvx.lineTo(x2,y2);
cnvx.closePath();
cnvx.stroke();
}
//色変更
cc.addEventListener('input',()=>{cnvx.strokeStyle=cc.value;},false);
//全て消す
ers.addEventListener('click',()=>{if(confirm('キャンバスをリセットします')){cnvx.clearRect(0,0,300,300);}},false);
//ファイルとして保存
csave.addEventListener('click',
()=>{
clkd=document.createElement("a");
clkd.href=cnvs.toDataURL("image/png");
clkd.download = ('0000'+(new Date()).getFullYear()).slice(-4)+('00'+((new Date()).getMonth()+1)).slice(-2)+('00'+(new Date()).getDate()).slice(-2)+'_'+('00'+(new Date()).getHours()).slice(-2)+('00'+(new Date()).getMinutes()).slice(-2)+('00'+(new Date()).getSeconds()).slice(-2)+'.png';
clkd.click();
}
,false);
</script>
</p>

 

 

イケてないところ

背景は白に見えますが透過背景です。

塗りつぶしや四角形を描く機能がないので、透過背景以外を希望する場合には使えないアプリになっちゃいますね^^;

また、画像サイズは300pxの正方形固定です。

 

 

だいぶ悩んだところ

…ところで、「全て消す」と「ファイルとして保存」が、はてなブログの下書きのプレビュー状態ではスマホでクリックできず、結構な時間悩まされました^^;

他の「画像作成ツール」では同等の機能でクリックできたのと、実際スマホでクリックイベントが発火しないケースというのは起こり得るので、色々対策を試みるもダメ。

 

…散々悩んだ後にふと、他ツールでスマホでクリックできたもののコードをコピペして下書きに入れてみたところ…そちらも下書きプレビューでは反応しませんでした!

 

という事はこれもそうなのかも?と思い、動作検証不十分なまま公開しちゃいます。

 

※追記:検証結果を「使い方」のところに追記しました。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^