Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2019-06-10

お絵描き

| 12:33

 なでしこ3が、バージョンアップしていました☆

 こんな感じ~。

v3.0.61
・ブラウザ番にタッチイベントを追加(#388)
・『取り込む』でモジュールの読み込みを修正(#387)
・『オーディオ開く』『オーディオ再生』などの命令を追加(#386)
・REPLが動かなかった問題を修正(#384)

 早速、audio関係の命令を追加して頂けました!(≧▽≦)

 ありがたや~。

 でも、なかなか思うようにならないので、色々お試し中~。


 さて、マイナビ連載44目は、クレカのチェックディジットの計算でした。

https://news.mynavi.jp/article/nadeshiko-44/

 チェックディジットとゆうものについては、前にNDLの書籍検索をやっていた時に、ISBNのチェックディジットを学んだ。

https://nadesiko.g.hatena.ne.jp/snowdrops89/20180322/1521734784

 ・・・ので、これをv3に移植してみようかと思ったんだけど、出来なかったorz

 NDLAPIがクロスドメイン? に対応してないっぽい。AJAX送信が、出来ないんだよね。

 この問題はどうも、向こうが対応してくれない限り、こっちからはどうしようも出来ないっぽい?

 GoogleBooksAPIでなら出来そうだけど、日本語のリファレンスがないからにゃー(´・ω・`)

 ・・・て感じで、記事には出来なかった;;;


 して、マイナビ連載45目は「ブラウザで使える手書きメモCanvas APIで作ってみよう」でした。

https://news.mynavi.jp/article/nadeshiko-45/

 前にね、掲示板の質問で、手書きメモのプログラムがマウスを早く動かすと点になっちゃうんだけどどうしたら良いんでしょうとゆうのがあって、なにゆえ「」なんだろうと思ったけど、元が10行プログラムのだったので、の方がプログラムが短くできるんですよね。

 して、ので理由がもう一つ発覚だ。かわいいからw

 色を変えるとなんか急に可愛くなるwww


 しかしまぁ、ここはやっぱり、あえて描画で滑らかなが引けるようにしてみようと思ったワケです。

 ところが! 滑らかに引けません。なに~?!

元x=0。元y=0。x=0。y=0。20に太設定。
押下フラグ=オフ
C=描画中キャンバス。
# --- (*1) 
Cをマウス押した時には
  押下フラグ=オン。
  元x=マウスX。元y=マウスY。
ここまで。
# --- (*2)
Cをマウス移動した時には
  もし、押下フラグがオフならば戻る。
  x=マウスX。y=マウスY。
  [元x,元y]から[x,y]へ描画。
  元x=x。元y=y。
ここまで。
# --- (*3)
Cをマウス離した時には
  押下フラグ=オフここまで。
「描画を開始」と表示

 太いを斜めに引くと切れ切れになるよ!

 どうやら、の終端のスタイルがv1のとは違うんですね。

 v1のは終端が丸になっているので、が埋められ滑らかなになるんです。

 これは、太くて短いが描けないとゆうことでもあるので、どっちが良いとゆう話ではありませんが。

 javascriptではそうゆう様々なスタイルが変更も可能らしいんだけども、具合わるくなるからやめて、どうよこの素敵な無理矢理系!www

元x=0。元y=0。x=0。y=0。
押下フラグ=オフ
C=描画中キャンバス。
# --- (*1) 
Cをマウス押した時には
  押下フラグ=オン。
  元x=マウスX。元y=マウスY。
ここまで。
# --- (*2)
Cをマウス移動した時には
  もし、押下フラグがオフならば戻る。
  x=マウスX。y=マウスY。
  1に太設定。
  [x,y]へ9の描画。
  20に太設定。
  [元x,元y]から[x,y]へ描画。
  元x=x。元y=y。
ここまで。
# --- (*3)
Cをマウス離した時には
  押下フラグ=オフここまで。
「描画を開始」と表示

 ・・・あれ?

 忘れてたけど、の場合、スマホの時にはどうすればいいんだ?

 、タッチした時のイベントが追加されて、これまで15パズルもジャンケンマンもスマホで出来たから、マウスのイベントでスマホも出来るとばかり思っていたけど、なるほど「移動した時」は出来ないっぽい?

 タッチ開始時とタッチ時にすれば出来るのかなあ。

 おっと、できたできた(喜)

 良き良き♪

#-----------------------------------------------
# お絵描き
#-----------------------------------------------
画面w=640。画面h=480。押下フラグ=オフ。
元x=0。元y=0。x=0。y=0。ペン=10。色=「#000000」

#---HTMLの設置----------
HTML=「
  <div id="main">
    <canvas id='canvas_1' width={画面w} height={画面h}></canvas>
  </div><!--main-->
  <div id="gui">
  <input type="color" id="color">
  <select id="pen">
    <option value="20">極太</option>
    <option value="15">太</option>
    <option value="10" selected>中</option>
    <option value="5">細</option>
    <option value="2">極細</option>
  </select>
  </div><!--gui-->
」
「#nako3_div_1」にHTMLを、DOM_HTML設定。
「canvas#canvas_1」のDOM要素取得。
それへ描画開始

#---GUI設置----------
「#gui」にDOM親要素設定。
//ペンサイズ=["極太","太","中","細","極細"]
//ペンサイズのセレクトボックス作成し、太セレクトに代入。  #selectedとvalueの設定が出来ない・・・
「クリア」のボタン作成し、クリアボタン代入。

#---GUIイベント----------
クリアボタンをクリックした時には
  [0, 0, 640, 480]の描画クリア。
ここまで。

#---CSS設定----------
「#main」に{
  "幅": "{画面w}px"
  "高さ": "{画面h}px"
  "border": "2px solid #999999"
}をDOMスタイル一括設定。

「#gui」に{
  "幅": "{画面w}px"
  "高さ": "30px"
}をDOMスタイル一括設定。

「#color」に{
  "margin":"2px 10px"
}をDOMスタイル一括設定。

「#pen」に{
  "margin":"0px 10px"
  "padding":"2px 10px 0px 10px"
}をDOMスタイル一括設定。

クリアボタンに{
  "margin":"0px 10px"
  "padding":"3px 10px 0px 10px"
}をDOMスタイル一括設定。

#---マウスイベント----------
C=描画中キャンバス。
Cをマウス押した時には
  押下フラグ=オン。
  元x=マウスX。元y=マウスY。
  ペン設定。
ここまで。
Cをマウス移動した時には
  もし、押下フラグがオフならば戻る。
  x=マウスX。y=マウスY。
  絵描。
ここまで。
Cをマウス離した時には
  押下フラグ=オフここまで。

#---タッチイベント----------
Cをタッチ開始した時には(E)
  EのDOMイベント処理停止
  元x=タッチX。元y=タッチY。
  ペン設定。
ここまで。
Cをタッチした時には
  x=タッチX。y=タッチY。
  絵描。
ここまで。


●ペン設定
  色=「#color」の「value」をDOM属性取得。
  色に線色設定。色に塗色設定。
  ペン=「#pen」の「value」をDOM属性取得。
ここまで。

●絵描
  1に太設定。
  [x,y]へペン/2-1の描画。
  ペンに太設定。
  [元x,元y]から[x,y]へ描画。
  元x=x。元y=y。
ここまで。

 して、の色と太さも変えられるようにしてみました☆

 なんとHTML5には、色選択ダイアログを表示するためのGUIあるんですね~♪

http://snowdrops.starfree.jp/wnako3_test/18_paint.html

ゲスト



トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20190610