HTML5のインラインSVGとjQueryでお絵描き
HTML5で利用可能なインラインSVGでは、
その場でSVGの内容をJavaScriptなどを使って書き換えることもできるので、
ブラウザのユーザーが、その場で意図的にSVGを変更することも可能です。
今回はそのインラインSVGの性質を利用して、
学習の目的で、簡単なお絵描きソフトを作ってみました。
↓こちらが作ってみたもの
方法
HTML
|
1 2 3 4 | <figure> <svg id="drawingCanvas" width="958" height="480"></svg> </figure> <p>COLOR: <input type="color" class="color" value="#666666"> <label><input type="radio" name="drawtype" value="line" checked> LINE</label> <label><input type="radio" name="drawtype" value="paint"> PAINT</label> <input type="button" class="clear" value="CLEAR"></p> |
SVGと色や描画方法などを設定するコントローラーを用意します。
SVGはwidthとheight、あと、JavaScriptでの操作がしやすいようにIDを設定します。
色はinputのHTML5から導入されたのtype=”color”を使ってみました。
描画方法として線画(LINE)とPAINT(塗りつぶし)をラジオボタンで選択できるようにしました。
あと、描き直せるように、CLEARボタンを設置しました。
JavaScript(jQuery)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | $(function(){ //初期設定 var svgElm = $("#drawingCanvas"), //SVG要素を取得 movetoX = 0, //開始点(横方向)の初期化 movetoY = 0, //開始点(縦方向)の初期化 linetoStr = "", //LineToコマンド値の初期化 strokeColor = "#666666", //描画色の初期化 drawType = ""; //塗りつぶしの初期化 /* ドラッグ開始 */ $("#drawingCanvas").mousedown(function(event){ strokeColor = $(".color").val(); //inputの色の設定を取得 //PAINT(value: paint)が選択されていたら、塗りつぶし色を設定 if($("input[name='drawtype']:checked").val() == "paint") drawType = strokeColor; else drawType = "none"; movetoX = parseInt(event.pageX - svgElm.position().left); //SVG上のマウス座標(横方向)の取得 movetoY = parseInt(event.pageY - svgElm.position().top); //SVG上のマウス座標(縦方向)の取得 var pathElm = document.createElementNS("http://www.w3.org/2000/svg", "path"); //SVGのpath要素を作成 svgElm.append(pathElm); //SVGに作成したpathを追加 //追加したpathの各属性を設定 svgElm.find("path:last").attr({ "d": "", //pathデータ "fill": drawType, //塗りつぶし "stroke": strokeColor, //線の色 "stroke-width": "3", //線の太さ "stroke-linecap": "round" //線の端を丸める }); var linetoX = [], //描画点の横座標の初期化 linetoY = [], //描画点の縦座標の初期化 cntMoveto = 0; //描画点のカウンターを初期化 linetoStr = 'M ' + movetoX + ' ' + movetoY + ' '; //d要素でpathの開始点を設定 /* ドラッグ中 */ $("#drawingCanvas").on("mousemove", function(event){ event.preventDefault(); linetoX[cntMoveto] = parseInt(event.pageX - svgElm.position().left); //SVG上のマウス座標(横方向)の取得 linetoY[cntMoveto] = parseInt(event.pageY - svgElm.position().top); //SVG上のマウス座標(縦方向)の取得 linetoStr = linetoStr + " L " + linetoX[cntMoveto] + " " + linetoY[cntMoveto]; //動いた後の新たなマウス座標を描画点として追加 svgElm.find("path:last").attr("d", linetoStr); //pathデータ(d属性)の値を更新 cntMoveto++; //カウンターをセット }); /* ドラッグ終了 */ }).mouseup(function(event){ $("#drawingCanvas").off("mousemove"); //pathの描画を終了 }); //CLEARボタンをクリックしたら、SVGを空にする $(".clear").click(function(){ svgElm.html(""); }); }); |
少し長いですが、基本的には次のような仕組みになっています。
- SVG上でドラッグが開始されたら、まずコントローラーから色と描画方法を取得
- ドラッグが開始された位置を取得し、SVGにpathを追加
- ドラッグ中に各座標を取得し、SVGのパス情報(d属性の値)を随時更新
- ドラッグが終わったら、パス情報の更新を終了
- CLEARボタンが押されたら、SVG内を空にすることでpathを消去
ポイントとして、SVG内の要素は
|
1 | $("svg").append("<path>"); |
のような形式では追加できないので(要素として追加できても、描画されない)、
次のような形式で追加する必要があります。(参考:jQueryでSVGを扱う – kamegu’s memo)
|
1 2 | var pathElm = document.createElementNS("http://www.w3.org/2000/svg", "path"); //SVGのpath要素を作成 $("svg").append(pathElm); //SVGに作成したpathを追加 |
追加した後の属性は.attr()によって変更が可能です。
↓こちらのサイトを参考に作らせていただきました
SVGの基本的な描画方法が詳しく説明されています
SVGの基本的な要素: line/polyline/polygon要素
SVGの線関係やスタイルについて詳しく説明されています
jQueryでSVGを扱う方法について説明されています
線の端の処理など、Stroke系の属性について詳しく説明されています。
Author Profile
SHARE
