お絵かき掲示板Art.netLABOメニュー

HTML5canvasでお絵描きツール「しぃペインターもどき」を作りたい!

第2回: パレットとカラーピッカーの追加
青枠内がキャンバスで、マウスをドラッグすると線が描けます。

このキャンバスは、HTML 5 Canvas に対応したブラウザで使用できます。
Toolbar


第2回は「パレットとカラーピッカーを追加」
右側のツールバーが付いただけで、かなり しぃペインターっぽくなってきました(^▽^)ノ
今のところ、カラーピッカー部分の形が似てないのが残念ですが、そこは後々の課題です。
リアルタイム反映ではないものの;カラーピッカーで作った色もちゃんと選択中のパレットに保存されます。

動作サンプル単独ページ

(HTML5canvasにパレットサンプル2.lzh) 5kb

プラグイン類は海外サイトで何書いているか解らないし再配布条件不明なので入っていません。
それぞれの頁等からダウンロードする必要があります。
jQuery本体 (外国語頁)farbtastic.js (外国語頁)rgbcolor.js (外国語頁)
どこがダウンロードか解らない場合は片っ端からリンクをクリックしたらそのうち手に入ります(私はそれで運良く入手しました)

HTML部分

赤文字の部分を今回追加しました。
キャンバスの入ったDIVと、右側のパレット類が入ったDIVを、CSSのアブソリュートで左右に配置します。
後からレイヤー機能を追加した際に、アブソリュートが必要になってくるので、ここで使っておきます。


<!DOCTYPE html>
<HTML>
<HEAD>

<style type="text/css">
/* ■ブラウザ固有の余白を消す(消さないとキャンバスが左上にピッタリ付かないので線がブレてしまう)■ */
*{ margin:0px; padding:0px;}
/* ■ページの背景色を白にする。キャンバスはマット色=黒の透明 + 鉛筆の色も黒なので、ページ色が黒系だと何も見えなくなる為。■ */
BODY { color:#000000; background-color:#ffffff; }
/* ■キャンバスの区切りが解りやすいように枠線を付けました。■ */
CANVAS { border-style:solid; border-color:#000000; border-width:1px; }

/* ■アブソリュートでページ内DIVのそれぞれの配置を指定■ */

/* ■キャンバスがあるDIV(ウィンドウ全体の左上が基準位置)■ */
DIV.canvaswaku { position:absolute; left:0px; top:0px; }

/* ■右ツールバー(パレットが入るDIV)■ */
.turuberbox{
position:absolute;
/* キャンバス幅600+余白5 */
 left:605px;
 top:0px;
width:70px; height:400px;
 color:#f8f5ef; background-color:#8a6d6d; font-size:80%;
 border-style:solid; border-color:#4b4b4b; border-width:1px;
}
/* ■(turuberbox内)パレット全体DIV■ */
.pale_colors{ 
 margin:0 auto 0 auto; width:64px; height:152px;
 border-style:solid; border-color:#dddddd; border-width:1px;
 }
/* ■(turuberbox/pale_colors内)パレット色単体LI(非選択)■ */
.pale_tan{
width:26px; height:18px; cursor:pointer; border-style:solid; border-color:#4b4b4b; border-width:1px;
vertical-align:middle; margin:1px; border-radius:2px; box-shadow:inset0 0 2px rgba(0,0,0,0.5);
}
/* ■(turuberbox内)カラーピッカー■ */
.colorpk { width:67px; height:67px; margin:0 auto 0 auto; }
/* ■選択中のパレット(JS側から使う書き換え用のCSS)■ */
.active_pareto{
width:26px; height:18px; cursor:pointer; border-style:solid; border-color:#ffffff; border-width:2px;
vertical-align:middle; margin:1px; border-radius:2px; box-shadow:inset0 0 2px rgba(0,0,0,0.5);
}
/* ■パレットの・を消す■ */
DL,UL,OL{ list-style-type:none;}
/* ■入力×のinputタグ■(turuberbox内)カラーピッカーの色見本が出るinputタグ■ */
.readonlyinput{ width:50px; color:#f8f5ef; background-color:#8a6d6d; font-size:70%; border-style:none; }

</style>

</HEAD>
<BODY>

<div class="canvaswaku">
<CANVAS id="ID_MYCANVAS1" width="600" height="400" class="aowaku">
<!-- ■canvas非対応ブラウザで表示されるメッセージ --> このキャンバスは、HTML 5 Canvas に対応したブラウザで使用できます。
</CANVAS>
</div>


<Div class="turuberbox"><!-- ■右ツールバー■ -->
<span class="mini">Toolbar<br></span>
	<div id="colorPalet" class="pale_colors"><!-- ■colorPalet -->
<DIV STYLE=" float:left; width:32px;"><!-- ○パレット左右フロート -->
<ul>
<LI style=" background-color:#000000;" class="pale_tan" id="ID_irop1"></LI>
<LI style=" background-color:#b47575;" class="pale_tan" id="ID_irop2"></LI>
<LI style=" background-color:#fa9696;" class="pale_tan" id="ID_irop3"></LI>
<LI style=" background-color:#ffb6ff;" class="pale_tan" id="ID_irop4"></LI>
<LI style=" background-color:#25c7c9;" class="pale_tan" id="ID_irop5"></LI>
<LI style=" background-color:#e7962d;" class="pale_tan" id="ID_irop6"></LI>
<LI style=" background-color:#fcece2;" class="pale_tan" id="ID_irop7"></LI>
</ul>
</DIV><DIV style=" margin-left:32px;"><!-- ○パレット左右フロート -->
<ul>
<LI style=" background-color:#ffffff;" class="pale_tan" id="ID_irop8"></LI>
<LI style=" background-color:#888888;" class="pale_tan" id="ID_irop9"></LI>
<LI style=" background-color:#c096c0;" class="pale_tan" id="ID_irop10"></LI>
<LI style=" background-color:#8080ff;" class="pale_tan" id="ID_irop11"></LI>
<LI style=" background-color:#e7e58d;" class="pale_tan" id="ID_irop12"></LI>
<LI style=" background-color:#99cb7b;" class="pale_tan" id="ID_irop13"></LI>
<LI style=" background-color:#f9ddcf;" class="pale_tan" id="ID_irop14"></LI>
</ul>
</DIV><br style="clear:both;"><!-- ○パレット左右フロート -->
	</DIV><!-- ■colorPalet -->
<div id="colorpick" class="colorpk"><!-- ■カラーピッカー -->
<input type="text" id="color" name="color" value="#000000" readonly="readonly" class="readonlyinput"><br><!-- ←選択中の色見本 -->
<div id="colorpicker" onclick="sub_cpiroset()"></div><!-- ←カラーピッカー本体が入るDIV -->
</div><!-- ■カラーピッカー -->
</Div><!-- ■■■右ツールバー■ -->


</BODY></HTML>
		

ジャバスクリプト部分

はじめに今回追加したカラーピッカーで使うプラグイン類をロードします。
カラーピッカーで使うjQuery本体 (外国語頁)
カラーピッカーのfarbtastic.js (外国語頁)
カラーコード変更用ライブラリのrgbcolor.js (外国語頁)
jQuery本体を先にロードしないとカラーピッカーが表示されないので注意が必要です。

ペン色が変動するので、はじめにペン色が入る変数(MY_PENCOLOR)をvarで作っておきます。
選択中パレット(LIタグ)のid名が入る変数(MY_SELECT_PARETOID)も作っておきます。
カラーピッカーで作った色を選択中パレットに反映させるのに使います。

カラーピッカーで作った色をパレットに反映させる処理
カラーピッカーを動かす度にonclick="sub_cpiroset()"で追加の関数を呼び出します。
farbtastic.js側の処理が終わった後(ピッカー上のマウスドラッグ終了時)に、sub_cpirosetが実行されます。
その際にfarbtastic.js側で選択色が入るinputタグ(id="color")からCSSの背景色を取得して、 それをパレットクリック時に保持しておいた選択中パレットのid名からLIタグにCSS背景色を反映させます。

カラーピッカーは、しぃペのツールバーと同じサイズに収まるように大きさを改造しています。
mask.pngとwheel.png画像を縮小して、それに合わせてfarbtastic.jsとfarbtastic.cssも書き換えます。



<!-- ■jQuery本体 -->
<script type="text/javascript" src="js/jQuery.js"></script>
<!-- ■カラーピッカー(http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/)■ -->
<script type="text/javascript" src="js_colorpicker/farbtastic.js"></script>
<link rel="stylesheet" href="js_colorpicker/farbtastic.css" type="text/css">
<!-- ■カラーコード変換用ライブラリ(http://mementoo.info/archives/1792)■ -->
<script type="text/javascript" src="js/rgbcolor.js"></script>

<script type="text/javascript">
<!-- 

// ■グローバル変数■グローバル変数■グローバル変数■グローバル変数■

//■選択中パレットID■初期値
var MY_SELECT_PARETOID = "ID_irop1";
//■デフォルトのペン色 (rgba(0,0,0,1)でも○)
var MY_PENCOLOR = "#000000";

//■マウスボタンクリックフラグ(押=true/離=false)
var MY_DRAWFLAG = false;
//■描画終点座標
var MY_X=0;
var MY_Y=0;
//■描画始点座標
var MY_OLDX=0;
var MY_OLDY=0;


// ■HTMLのロードが完了したら自動実行するイベント
window.addEventListener("load", function()
			{//▼HTMLロード完了後に実行▼▼▼HTMLロード完了後に実行▼▼▼HTMLロード完了後に実行▼▼▼

// ■<CANVAS id=ID_MYCANVAS>要素のノードオブジェクトを作る
var MY_CANVAS1 = document.getElementById("ID_MYCANVAS1");

//■カラーピッカーを表示
var MY_PICKER = $.farbtastic('#colorpicker');
MY_PICKER.linkTo($("#color"));

// ■パレットから選んだ色をペンに設定する
$('li').click(function()
	{//▼色変更▼色変更▼色変更▼色変更▼色変更▼色変更
//■プラグインrgbcolor.jsで、パレットから取った色「MY_CLIC_COLOR」rgb(30,120,210)形式を、(#FFFFFF形式)に変換する
var MY_CLIC_COLOR = new RGBColor($(this).css('background-color'));
MY_PICKER.setColor(MY_CLIC_COLOR.toHex());
//■LIに選択中のCSS calss(active_pareto)を追加する■
$('li').removeClass('active_pareto');
$(this).addClass('active_pareto');
// ■パレットから選んだ色をペンにセットする
// ■引数?の”#color”は選択した色のカラーコードの代入先(連想配列?)
MY_PENCOLOR = MY_PICKER.color;
//■選択中パレットID変数を更新■要素thisからid属性名を調べる■クリックしたLIタグのIDを取得(何か特殊な変数thisにはクリックしたLIタグがまるごと入ってる)
MY_SELECT_PARETOID = this.getAttribute("ID");
	});//▲色変更▲色変更▲色変更▲色変更▲色変更▲色変更

// ■キャンバス(MY_CANVAS1)の上でマウスを移動するたびにサブルーチンのsub_oekaki(描画処理)が実行される
MY_CANVAS1.addEventListener("mousemove", sub_oekaki, true);


// ■キャンバス(MY_CANVAS1)の上でマウスボタンを押した瞬間に実行
MY_CANVAS1.addEventListener("mousedown", function(e)
		{//▼マウスクリック▼マウスクリック
//■true=マウスクリックフラグを立てる=これでsub_oekaki内の処理が実行される■マウスボタンクリックフラグ(押=true/離=false)
MY_DRAWFLAG = true;
//■描画始点座標に今のマウスカーソル位置()をセット
MY_OLDX = e.clientX;
MY_OLDY = e.clientY;

//■カラーピッカーで選択した色をペンにセットする
MY_PENCOLOR = MY_PICKER.color;

	}, true);//▲マウスクリック▲マウスクリック


// ■キャンバス(MY_CANVAS1)の上でマウスボタンを押して離した瞬間に実行(マウスボタン押したフラグtrueを離した状態falseに戻す。)
MY_CANVAS1.addEventListener("mouseup", function() { MY_DRAWFLAG = false; }, true);


			}, true); //▲HTMLロード完了後に実行▲▲▲HTMLロード完了後に実行▲▲▲HTMLロード完了後に実行▲▲▲▲





// ■描画処理(キャンバスの上でマウスが動く度に実行されるイベント)
function sub_oekaki(e)
	{//▼描画処理▼▼▼描画処理▼▼▼描画処理▼▼▼描画処理▼▼▼描画処理▼

//■ボタンが押されてなかったら(true以外なら)終了■マウスボタンクリックフラグ(押=true/離=false)true (真)と false (偽)
if ( MY_DRAWFLAG != true ) return;

//■マウス位置の終点(eはマウスイベントのデータが自動で入っている変数。内容はconsole.log(e);で見れる。)
MY_X = e.clientX;
MY_Y = e.clientY;

//■描画用オブジェクト(MY_CONTEXT1)を作る■getCotextメソッドで得た2DコンテキストのオブジェクトをMY_CONTEXTに格納
MY_CANVAS1 = document.getElementById("ID_MYCANVAS1");
MY_CONTEXT1 = MY_CANVAS1.getContext("2d");


//■描画色
MY_CONTEXT1.strokeStyle = MY_PENCOLOR;

//■ペン太さ
MY_CONTEXT1.lineWidth = 1;
//■透明度(0.0(完全な透明)〜1(不透明))
MY_CONTEXT1.globalAlpha = 1;
//■筆跡の描き終わりに丸みをつける
MY_CONTEXT1.lineJoin= "round";
//■筆跡の描き終わりの丸み2(butt, round, square
MY_CONTEXT1.lineCap = "round";

//■線を描くと宣言
MY_CONTEXT1.beginPath();

//■描き始める場所を指定
MY_CONTEXT1.moveTo(MY_OLDX, MY_OLDY);
//■引きたい線の終点を指定 lineTo=直線/
MY_CONTEXT1.lineTo(MY_X, MY_Y);

//■出来た図形を線で描画する
MY_CONTEXT1.stroke();

//■描いた線を閉じる
MY_CONTEXT1.closePath();

//■マウス位置の始点を書き換える。
MY_OLDX = MY_X;
MY_OLDY = MY_Y;

	}//▲描画処理▲▲▲描画処理▲▲▲描画処理▲▲▲描画処理▲▲▲描画処理▲


//■ピッカー色を選択中パレットに保存■カラーピッカーを動かしてボタンを離した時に実行
function sub_cpiroset()
		{//▼ピッカー色パレット保存▼ピッカー色パレット保存▼ピッカー色パレット保存
//■ピッカーを動かした時に色見本が出る<input id="color">から背景色を取得
//■(-が入るcssプロパティ(background-color等)は、そのままではエラーになるので-を消して次の文字だけ大文字にする)
var MY_TMP_SANPURU_RGBIRO = document.getElementById('color').style.backgroundColor;
//■プラグインrgbcolor.jsで、「MY_TMP_SANPURU_RGBIRO」rgb(30,120,210)形式を、(#FFFFFF形式)に変換する
var MY_TMP_IRO_OBUJEKUTO = new RGBColor(MY_TMP_SANPURU_RGBIRO);
MY_TMP_SANPURU_16IRO = MY_TMP_IRO_OBUJEKUTO.toHex();
//■ピッカーで選択した色に選択中パレットのCSS背景色を書き換える
document.getElementById(MY_SELECT_PARETOID).style.backgroundColor = MY_TMP_SANPURU_16IRO;
		}//▲ピッカー色パレット保存▲ピッカー色パレット保存▲ピッカー色パレット保存



 -->
</script>

あとがき

感謝 WingMemo様のHTML5でお絵かきツールを作ってみたを大変参考にさせて頂きました。m(_ _)m
ありがとうございました。

2015年06月24日



お絵かき掲示板Art.netLABOメニュー