2019年03月31日 に更新

Canvas を楽に管理できる JavaScript パッケージ「JimmyJS」を公開！

こんにちは。フリーランス・コンサルタント＆エンジニアの 九保すこひ です。

前回の記事で、BugGUIというバグ報告を効率化するウェブサービスを公開した経緯について書きました。

※ BugGUIは、すでに閉鎖しました。m_ _m

なので、今回はそのBugGUIで使われているパッケージ「JimmyJS」についても使い方などを紹介したいと思います。（GitHubにてMITライセンスで公開中！）

JimmyJS って？

デモを見てもらうのが早いと思うんですけど、要するにHTML5 の Canvas を楽に使えるMITライセンスのJavaScriptのパッケージです。特徴は一度描画した線や文字を再度編集しなおせるところです。

ちなみにこのJimmyという名前は、

絵を描くく JavaScriptパッケージ
↓
絵がうまい有名人は？
↓
そりゃあジミー大西さんしかいないでしょー！

という流れで決定になりました（笑）
最近バラエティ番組にもよく出演されているので個人的には嬉しい限りです。

JimmyJSをインストールするには？

さて、JimmyJSをインストールするには、以下のようにbowerを使うか、GitHubから直接ダウンロードして読み込んで下さい。

bower install jimmyjs

そして、設置したパスにあるjimmy.jsを読みこめば完了。

<script src="/YOUR-PATH/jimmy/jimmy.js">

JImmyJSを使うには？

JimmyJSで描画するには、まずsetType()メソッドを使ってどのタイプで描画するかを指定します。描画タイプは今のところ、以下の１１個です。

  • arrow　・・・　矢印
  • line　・・・　線
  • lineWithDot　・・・　●がくっついた線
  • strokeOval　・・・　線の楕円形
  • fillOval　・・・　塗りつぶされた楕円形
  • strokeCircle　・・・　線の円
  • fillCircle　・・・　塗りつぶされた円
  • strokeRect　・・・　線の四角形
  • fillRect　・・・　塗りつぶされた四角形
  • strokeText　・・・　線のテキスト
  • fillText　・・・　塗りつぶされたテキスト

※もし需要があれば描画できるタイプを増やすことも考えていきたいと思いますので、どんどんGitHubのissueにコメント下さい！

で、実際のコードはこんなカンジになります。

JIMMY.setType('arrow');    // 矢印を描く

描画する線の太さを指定する

線の太さを指定する場合はsetLineWidth()を使います。影響を受ける描画タイプは、

  • arrow
  • line
  • lineWithDot
  • strokeOval
  • strokeCircle
  • strokeRect
  • strokeText

です。

JIMMY.setLineWidth(5);

描画する色を指定する

描画する色を指定するにはsetColor()を使います。全ての描画タイプが影響を受けます。

JIMMY.setColor('#ff0000');

※ちなみにrgba(100, 100, 100, 0.5)という形式の色指定でもOKです。

フォントを指定する

フォントタイプ（ファミリー）を指定するにはsetFontFamily()、フォントサイズを指定するにはsetFontSize()が利用できます。

JIMMY.setFontFamily('sans-serif');  // フォント・ファミリーを変更
JIMMY.setFontSize(20);  // フォントサイズを変更

背景を指定する

背景色、背景の画像を指定するには、setBackgroundColor()とsetBackgroundImage()を使います。

背景色は、setColor()と同じく、

JIMMY.setBackgroundColor('#eef');

という形式で指定します。（rgba形式も可）

そして、背景の画像は

let imageSource = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAsVBMVEUAAAA0SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV40SV5dKuabAAAAOnRSTlMAAQIDBQYHCAsPEBESExccISUnMTY4OkFFRltod3uLj5KdpaawtbrFyMrM09na4OLk6e3v8fX3+fv9zCm2swAAAH1JREFUGBmdwdkWgWAAhdEvMguZ58wkQxLqvP+D+VcXXVv25geWFC6Dd3Q4SR0MK1WuhVFLlPMwVpJ8P7wdL5KaQKxXnUxfGgCRZuWwDM61cNYQ2GnqyoWRnI26wET7SlCChm8/UxtjrUUVw55rTKa3/SSPexx5bXJFg399AbqrEjVdfvwUAAAAAElFTkSuQmCC';
let x = 170;
let y = 60;
JIMMY.setBackgroundImage(imageSource, x, y);

という形で指定します。各引数は以下のとおりです。

  • imageSource　・・・　画像URLやBase64でエンコードされた文字列など。内部的にはimage.src = imageSource; としているので、汎用的に利用できるかと思います。
  • x、y　・・・　画像を表示する位置

元に戻す、やり直す、クリアする

描画を元に戻したり、戻したものをやり直したり、クリアするにはundo()、redo()、clear()を使います。

JIMMY.undo(); // 元に戻す
JIMMY.redo(); // やり直す（undoの逆）
JIMMY.clear();  // クリアする

コールバック関数を設定する（イベント）

JimmyJSがある状態になったときにコールバック関数を実行するにはsetCallback()を利用します。

  • mouseup　・・・　キャンバス上でmouseupされた時
  • mousedown　・・・　キャンバス上でmousedownされた時
  • mousemove　・・・　キャンバス上でmousemoveされた時
  • undo　・・・　undo()が実行された時
  • redo　・・・　redo()が実行された時
  • clear　・・・　clear()が実行された時
  • selected　・・・　描画された線や字が選択されたとき

使用上の注意 – １

JimmyJS ではCanvasを２枚使って描画を実現しています。そのため、キャンバスよりも上の要素サイズが変わってしまうと、キャンバスがずれてしまい、うまく描画ができなくなる場合があります。（たとえばアコーディオンのようなエフェクトを使ったりする場合ですね。）

その場合は、alignCanvas()で２枚のキャンバスの位置を揃えるようにする必要があります。

JIMMY.alignCanvas();  // ２枚のキャンバス位置を揃える

使用上の注意 – ２

描画のスピードのため、背景画像はキャンバスではなくキャンバスのCSSに設定されています。そのため、キャンバスを右クリックして保存しても、背景画像が含まれていない画像になってしまいます。

もしキャンバスを保存する場合や、画像データを取得する場合はtoDataURL()、download()を使ってください。これなら、背景画像を含んだ画像を取得することができます。

// toDataURL()
let fileType = 'image/png';
let quality = 100;
JIMMY.toDataURL(fileType, quality, function(dataUrl){

    console.log(dataUrl);

});

// download()
let fileType = 'image/png';
let quality = 100;
let finename = 'screenshot.png';
JIMMY.download(fileType, quality, finename);

ほぼメインどころの使い方は以上です。
もしご要望があるかたは、ぜひGitHubのリポジトリからissueを投稿してください。

ではでは〜。

このエントリーをはてなブックマークに追加       follow us in feedly  
開発のご依頼お待ちしております
開発のご依頼はこちらから: お問い合わせ
どうぞよろしくお願いいたします！ by 九保すこひ

合わせて読みたい