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

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

第3回: ペンの太さと透明度の変更
青枠内がキャンバスで、マウスをドラッグすると線が描けます。

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




3回目は、ペンの太さと、A値(透明度)を自由に変更できるスライダーを付けます!
本の付録に付いてきた「jquery-ui-1.7.2.custom.min.js」と「jquery-ui-1.7.2.custom.css」を使います。
スライダー部分のジャバスクリプト(そもそもジャバスクリプトなのかどうかもよく解りませんが;)も本のサンプルを流用。

ただ、そのままだと、太さ変更スライダー部分まで横になってしまうので、しぃペインターと同じ縦に改造しました。
ここだけで方法を調べるのに一週間以上かかりました。日本語の解説サイトが全然無い!!(;Д;)
上下のスライダー(太い/細い)が、しぃペと逆だけど、それはもうどうしようもなかったので妥協。
スライダー部分に選択中の色も反映させたいけど、英語だらけのjquery-uiを改造する必要がありそうなので保留。

そして現在最大の問題点は、太めの線で、A値(透明度)を下げると、筆跡が露骨に●になってしまう事です。
ザザっと早めにペンを動かすと、より露骨です。
まぁとりあえず、しぃペの機能再現を優先として、描き味とかこだわった部分は後回しにしときます。

需要が無さそうなので、動作デモ単体頁とサンプルダウンロードは、更新速度を上げる為に今回から省略します。
m(_ _)m

HTML部分

赤文字の部分を今回追加しました。
太さとA値を変更するスライダーが入る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; }


/* ■(turuberbox内)太さとA値のスライダー(右ツールバーturuberbox内)■ */
.peninituru{ padding-top:30px; width:67px; height:67px; margin:0 auto 0 auto; }
/* ■(turuberbox内)A値スライダー */
.slider_a{ width:60px; }
/* ■(turuberbox内)太さスライダー */
.slider_pen{ width:60px; height:32px; }


</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 class="peninituru"><!-- ■スライダー -->
<!-- ■A値 -->
<input type="text" value="A値:100" id="slider2atai" readonly="readonly" class="readonlyinput"><br>
<div id="slider2" class="slider_a"></div>
<!-- ■太さ -->
<input type="text" value="太さ:1" id="slider1atai" readonly="readonly" class="readonlyinput"><br>
<div id="slider1" class="slider_pen"></div>
</Div><!-- ■スライダー -->



</Div><!-- ■■■右ツールバー■ -->


</BODY></HTML>
		

ジャバスクリプト部分

はじめに本の付録に付いてきた「jquery-ui-1.7.2.custom.min.js」と「jquery-ui-1.7.2.custom.css」を読み込みます。

「ブラシサイズを変更するスライダー」と「透明度を変更するスライダー」のプログラムを追加します。
「window.addEventListener("load", function(){}, true);の中
に追加しないと動かないので注意が必要です(理由は解りません)



<!-- ■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>


<!-- ■スライダー用CSS -->
<link rel="stylesheet" href="js/jquery-ui-1.7.2.custom.css" type="text/css" media="all">
<!-- ■スライダー用JS -->
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>



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

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

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


//■デフォルトのペン太さ
var MY_BURASISIZE = 1;
//■デフォルトのα値 0.0(完全な透明)〜1.0(不透明)
var MY_ALPHASIZE = 1;


//■マウスボタンクリックフラグ(押=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);




// ■ブラシサイズを変更するスライダー
$("#slider1").slider
	({//▼B1
//■スライダーを横向き(最小が左、最大が右)にするか、縦向き(最小が下、最大が上)にするかを指定します。 指定可能な値は、"horizontal", "vertical"です。
orientation: "vertical",
//■"min"または"max"を指定します。 "min"を指定すると最小値からのスライドになり、"max"を指定すると最大値からのスライドになります。
range: "min",
min: 1,		// ブラシの最小サイズ
max: 50,	// ブラシの最大サイズ
value: 1,	// 最初のブラシサイズ
//■太さスライダーの上に今の太さを表示する ■ブラシサイズを設定
slide : function(evt, ui){ $( "#slider1atai" ).val( "太さ:" + ui.value ); MY_BURASISIZE = ui.value; }
	});//▲B1

// ■透明度を変更するスライダー
$('#slider2').slider
		({//▼α1
min: 1, 	 // ■最小(スライダーを左端まで動かした時のA値)
max: 100,	 // ■最大
value : 100,  // 初期値(不透明)
slide : function(evt, ui)
	{//▼α2
//■A値スライダーの上に今のA値を表示する
$( "#slider2atai" ).val( "A値:" + ui.value );
//■A値を変化させる
alpha = ui.value;
$('#alpha').val(alpha);
if(alpha == 100) { MY_ALPHASIZE = 1; }
else if(alpha <= 9) {MY_ALPHASIZE = '0.0' + alpha; }
else if(alpha >= 10) { MY_ALPHASIZE = '0.' + alpha; }
	}//▲α2
		});//▲α1




// ■キャンバス(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 = MY_BURASISIZE;
//■透明度(0.0(完全な透明)〜1(不透明))
MY_CONTEXT1.globalAlpha = MY_ALPHASIZE;


//■筆跡の描き終わりに丸みをつける
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>

2015年06月25日



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