LoginSignup
2
1

More than 3 years have passed since last update.

続々・なでしこ3のプラグインを作ってみたよ! ~扇形が描きたい!~

Posted at

発端

 かなり唐突ですが、扇形が描きたいのです。
 ってか、扇形に塗りたい。
 円を区切って、円グラフみたいに塗りたいという希望です。
 ちなみになでしこ3では、Chart.jsを利用して素敵なグラフを描く事が出来ます☆

なでしこ3マニュアル > plugin_browser/グラフ描画_CHARTJS

 それでカンタンに円グラフも描けちゃうんですけどね。円グラフみたいに塗りたいだけで、本当に円グラフを描きたいワケじゃ無いんでっ。

 v1にも扇形を描くという命令はありませんが、「塗る」がありますから、円を線で区切れば、好きなように塗り塗り出来ます。
 v3の場合、円描画する時にその円の中を任意の色に塗りつぶす事は出来る。円を線描画で区切る事も出来る。でも、「塗る」が無いので、区切った部分だけを別の色で塗りつぶすことが出来ないんですよねー。
 フォトショのような塗りつぶしは出来ず、イラストレーター的な?(イメージ。よくわからない;)

 で……
 楕円描画の円弧と多角形描画で三角を描いてくっつけるとゆう無理矢理系!(塗りたいだけなので、線色を塗り色に合わせれば、一応そう見える)
 それで、凌いでいました。

 しかし、3日目4日目でプラグイン作りをお試ししまして、ワタクシかなり賢くなったのです☆
 あと、やりたいことのコピペ出来そうなJavascriptを拾ってくる能力が向上しています(なにそれ;)
 とにかく、最初から扇が描ければ、何も2つの図形をくっつけなくても扇形に色塗りする事も出来るに違いありません。
 やってみます!

じゃばすくりぷとムズイ

※Javascriptのことが分かってる方は、読み飛ばすか、こいつバカだな……と思いつつ温かく見守って下さい;;あとなんか間違っていたら教えて下さい><

拾ってきたコード

pen.beginPath();
pen.moveTo(x, y);
pen.arc(x, y, r, start, end);
pen.closePath();
pen.stroke();

https://theendoftakechan.blogspot.com/2019/09/canvas-javascript.html

「ようするに弧を描く構文で 1 行、弧(円)の中心座標にペンを移動させる、ひと手間が必要なのです。」 とゆうことだけど、こちとら弧(円)を描く構文自体を知らんからね(汗)

 でも、分かりました。
 arcのスタートとエンドは、楕円描画で言うところの開始角と終了角で、なでしこの円描画では、これに0と360度を自動的に与えることで、なでしこらしい記述が出来るようになってるんですね☆
 moveToはカメ移動的な(?)
 そして、パスを開始してから閉じるまでの一連は、1つのかたまりとして、色を塗り塗り出来るのだろう。

 しかし……
 結論から言って、コピペではダメなようでした(哀)
 ペンってなんだよ?!

こんてきすと?

 どうやらこの前段階で、キャンバスのコンテキスト?なるものを取得せねばならないらしい。そのコンテキストにpenて名前をつけていたってことでした。

描画開始!

 どうやら、なでしこ3の「描画開始」命令が、まさにそれ! のようでした。
 なでしこのplugin_browser自体を眺めたら何か分かることがあるかなぁ? と、何かと捜索してplugin_browser_canvas.jsを見てみたら、アルファベットに目を回す暇も無く、一番上に発見出来たので助かりました♪
 sys.__ctxって名前になってるようです。
 「pen」を「sys.__ctx」に置換。

塗れない(´д`)

 塗り色を設定しても色が付かない! と思ったら、塗りたきゃ塗るためのコードも書きやがれとゆうことでした(^▽^;

sys.__ctx.fill();

 塗り色設定をして円描画や四角描画をすれば、その色の円や四角が描けるのでそうゆうもんだと思っていたのですが、ああ、なんてなでしこは簡単便利なんだろう。ありがたやありがたや……

プラグインにします

※実際の順番は、先にプラグインにしてから、できたのできないのと上述のようにJavascriptをなんだかんだしていた感じです。

プラグインの作り方

助詞

 なでしこの関数で言えば、(xyへ|xyに開始角から終了角までrの)という感じにしたい。 「josi:」の中に、配列で必要な引数分だけ助詞を並べるだけですよね。
 こんな感じ?

josi: [['へ', 'に'], ['から'], ['まで'], ['の']],

関数

 「fn: function ()」の方の引数も、上の助詞と対応する順番で指定すれば良いんだよね。
 そしてしかも、ここで前回難しすぎてスルーした「プラグイン側からシステム変数へのアクセス」が出てくるんじゃないですか?

プラグイン側からシステム変数へのアクセス

関数を定義したとき、プラグイン関数側からシステムにアクセスしなければならない場合がある。
必ず必要とされる引数の末尾に実行したシステムのthisを保持するオブジェクトが渡される。 このオブジェクトを参照することで、システム変数にアクセスできる。

 ううっ、むじゅい(;∀;)
 でも、必要の引数の後にさらにもう一つ引数を指定すると、それでシステムが参照出来るということラシイね。
 つまり、「sys.__ctx」のsysは必ずしもsysじゃなくても、この末尾に自分で指定した引数で参照できるって事かね? まあ、sysでいいけど。
 とりあえず、引数の最後にsysをくっつけておけば良かろう。

 で、こんな感じ?

    fn: function (xy,start,end,r, sys) {
      sys.__ctx.beginPath();
      sys.__ctx.moveTo(xy[0], xy[1]);
      sys.__ctx.arc(xy[0], xy[1], r, start, end, false);
      sys.__ctx.fill();
      sys.__ctx.closePath();
      sys.__ctx.stroke();
    },

プラグイン全部はこちら

動作確認

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>プラグインテスト</title>
</head>

<body>
<!-- なでしこ3のエンジンを取り込み -->
<script type="text/javascript" src="https://nadesi.com/v3/cdn.php?v=3.1.5&f=release/wnako3.js&run"></script>
<!-- プラグインを取り込み -->
<script type="text/javascript" src="Plugin_draw.js"></script>

<!-- なでしこのプログラム -->
<script type="なでしこ">
DOM親要素に<canvas id="cv" width=360 height=360></canvas>」をHTML設定。
「#cvへ描画開始
黒色に線色設定白色に塗り色設定
[180,180]に100の円描画

赤色に塗り色設定
[180,180]に0から(60をラジアン変換)まで100の扇描画

</script>
</body></html>

動作確認

 できました!
 開始角と終了角の角度ですが、0は右端でそこから時計回りとなっています。

ほんとうにおわります

 またもや、出来たの出来ないのと騒ぐだけの記事でした;(実際には、もっともっとまごまごしています;)
 でも、これで引数のある命令も作れたし、プラグイン側からシステム変数へのアクセスというのもさわりくらいは出来て、プラグインの作り方に書かれていた基本的な内容は、一通り押さえれたと思います☆
 といっても、やっつけ感が半端なく、あまり理解はしていないので、これ以上なにか説明出来るようなことも無く、なでしこ3のプラグインを作ってみたよシリーズは、これにて最終章~。
 みなさんも是非、色々なプラグインを作って、発表してみて下さいね☆

なでしこ3マニュアル > ユーザープラグイン

2
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1