2018年の漢字は「災」らしいですね。順当だと思います。
さて、今回はVue.jsで簡単なページを作って公開してみます。
ページの内容は「クレヨンしんちゃん」のサブタイトルみたいな画像を生成するものです。
使用技術
- Vue.js
- GitHub Pages
- CANVAS
なお、メイン部分は僕が書いたので説明できるのですがその後ちゃんとVue.jsに書き直す部分は共同開発者たちがやってくれたのでソースを見るかこいつとかに聞いてください。
自分の環境のバージョンとか
- npm 6.4.1 (適宜新しいのを入れていいと思います)
- node.js 8.9.0 (同)
- vue-cli 2.9.6 (同 なんか今見たら3出てるっぽいですね。)
プロジェクトを作る
ここまで書いてなんですがこことか見てもらったほうが早いです。ありがとうございました。
あとこのへんも参考になります。
プロジェクトができたらいい感じに変えていきましょう。適宜上のページを参照しながらやってもらえると嬉しいです。
あと今回vue-routerは使いません。SPAどころかSPなので。
とりあえずvueファイルをリネームする
/src/components/内にある.vueのファイルみたいな感じで適当な名前のファイルを作ります。
そのあと、src/App.vueファイルの中のHelloWorldになっている記述をリネームしたファイル名に書き換えます。
ここらで一回コンソールで
を実行して表示を確認してみましょう。（注: Vue3だとnpm run serveらしいです）
ちゃんと動いたらnpm run buildとコミットしてGitHubのリポジトリにpushしておきましょう。
GitHub側の設定は適当に「vue.js GitHub pages」とかでググると良いです。（丸投げ）
本題:文字をCANVASに動的に描画する
ここから本題。
methods: {
generate () {
// 描画
let ctx = document.getElementById('output_field').getContext('2d')
this.drawCaption(ctx, 'test', 'left', { 'x': 400, 'y': 1350 })
this.drawCaption(ctx, 'text', 'right', { 'x': 2480, 'y': 1350 })
this.src = ctx.toDataURL()
},
drawCaption (ctx, text, align, coordinate) {
ctx.textAlign = align
ctx.lineWidth = 5
ctx.fillStyle = '#FFF'
ctx.font = '90px cursive'
ctx.fillText(text, coordinate['x'], coordinate['y'])
ctx.strokeStyle = 'gray'
ctx.strokeText(text, coordinate['x'], coordinate['y'])
}
上記のコードで
<canvas id="output_field"></canvas>
に文字(test text)を出力されます。
その後、
<img class="output_image" :src="src" >
に画像として置き換えられます。
vue部分のdata(){}の中にsrcって属性（？）を追加しておきましょう。
これで多分基幹部分は完成するはず。(試してないので後日やってみます)
文字の生成に成功したら
あとはテキストの文字列を動的に切り替えたり、位置を替えたりフォントを替えたりもろもろでいい感じにするとあなただけのジェネレータが作れるよ。
よかったらぼくとかハッシュタグにご一報ください。
なんでこんな記事かいたのか
アドベントカレンダーで今日だったからです。22時に書いてます。お疲れ様でした。