フリーハンドで線を描く

Readme
JavaScript 176 lines
HTML 8 lines
CSS 12 lines

forked: 面をクリックしたら消す

以上、完全自己満足でしたー。
もっとスマートな方法あったら、誰か教えてくださーい。

chromeではうまく動くと思います。

フリーハンドで線を描く
jQuery v1.7.1

// forked from uhauha909's "面をクリックしたら消す" http://jsdo.it/uhauha909/40I7
// forked from uhauha909's "マウスでドラッグしたら直線を描く" http://jsdo.it/uhauha909/eooQ
// forked from uhauha909's "canvasを追加していく" http://jsdo.it/uhauha909/jNEx
// forked from uhauha909's "2つの座標と幅から面を描く" http://jsdo.it/uhauha909/xh5d
$(function(){

var points = []; //ドラッグ時のマウスの座標を集める
	var $canvas; //追加されたキャンバスを格納
	var canvasWidth;
	var canvasHeight;
	var mode; //マウス操作のモード

/**
	 * 2つの座標と幅から4つ(面)の座標を得る
	 * @param ptax
	 * @param ptay
	 * @param ptbx
	 * @param ptby
	 * @param width
	 */
	function getRectPoints(ptax, ptay, ptbx, ptby, width) {

var rad = Math.atan2(ptby - ptay, ptbx - ptax);
		var offX = (width / 2) * Math.sin(rad);
		var offY = (width / 2) * Math.cos(rad);

var array = [];

array.push({x:ptax + offX, y:ptay - offY});
		array.push({x:ptbx + offX, y:ptby - offY});
		array.push({x:ptbx - offX, y:ptby + offY});
		array.push({x:ptax - offX, y:ptay + offY});

return array;
	}

function addCanvas(){
		return $('<canvas width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo('#canvases');
	}

function mouseDown(e){

points = [{x:e.pageX - this.offsetLeft, y:e.pageY - this.offsetTop}];

if(mode == "erase"){
			$('canvas').each(function(){
				var ctx = $(this).get(0).getContext('2d');

if(ctx.isPointInPath(points[0].x, points[0].y) ){
					$(this).remove();
					return false;
				}
			});
		} else {
			$canvas = addCanvas();
			$(this).bind("mousemove", mouseMove);
		}
	}

function mouseMove(e){

var ctx = $canvas.get(0).getContext('2d');

points.push({x:e.pageX - this.offsetLeft, y:e.pageY - this.offsetTop});

if(mode == "line"){

var array = getRectPoints(
				points[0].x,
				points[0].y,
				points[points.length - 1].x,
				points[points.length - 1].y,
				parseFloat($('input[name="width"]').val())
			);

ctx.clearRect(0, 0, canvasWidth, canvasHeight);
	
			ctx.beginPath();
			ctx.moveTo(array[0].x, array[0].y);
			ctx.lineTo(array[1].x, array[1].y);
			ctx.lineTo(array[2].x, array[2].y);
			ctx.lineTo(array[3].x, array[3].y);
			ctx.closePath();
			ctx.fill();

} else if(mode == "pencil"){

ctx.lineWidth = parseFloat($('input[name="width"]').val());
			ctx.lineCap = "round";
			ctx.beginPath();
			ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
			ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
			ctx.stroke();

}

function mouseUp(e){

$(this).unbind("mousemove", mouseMove);

if(points.length == 1 && mode != "erase"){

$canvas.remove();

} else if(mode == "pencil" && points.length >= 2){
			//フリーハンド時、描いた線をなぞるように面を描く

var ctx = $canvas.get(0).getContext('2d');
			var pointsA = [];
			var pointsB = [];
			var i;

for(i=1; i < points.length; i++){

var array = (getRectPoints(
					points[i-1].x,
					points[i-1].y,
					points[i].x,
					points[i].y,
					parseFloat($('input[name="width"]').val())
				));

if (i==1){
					pointsA.push(array[0]);
					pointsB.push(array[3]);
				}

pointsA.push(array[1]);
				pointsB.push(array[2]);
			}

ctx.beginPath();
			ctx.moveTo(pointsA[0].x, pointsA[0].y);

for (i=1; i < pointsA.length; i++){
				ctx.lineTo(pointsA[i].x, pointsA[i].y);
			}

for (i=pointsB.length-1; i >= 0; i--){
				ctx.lineTo(pointsB[i].x, pointsB[i].y);
			}

ctx.closePath();
			ctx.fill();
		}

points = [];
	}

function setMode(str){
		mode = str;
		$('#mode').html('mode:' + str);
	}

$('#canvases').bind("mousedown",mouseDown);
	$('#canvases').bind("mouseup mouseleave", mouseUp);

canvasWidth = $('#canvases').width();
	canvasHeight = $('#canvases').height();

$('input[name="line"]').click(function(){
		setMode("line");
	});

$('input[name="pencil"]').click(function(){
		setMode("pencil");
	});

$('input[name="erase"]').click(function(){
		setMode("erase");
	});

$('input[name="line"]').click();
});

フリーハンドで線を描く

forked: 面をクリックしたら消す以上、完全自己満足でしたー。もっとスマートな方法あったら、誰か教えてくださーい。 chromeではうまく動くと思います。// forked from uhauha909's "面をクリックしたら消す" http://jsdo.it/uhauha909/40I7 // forked from uhauha909's "マウスでドラッグしたら直線を描く" http://jsdo.it/uhauha909/eooQ // forked from uhauha909's "canvasを追加していく" http://jsdo.it/uhauha909/jNEx // forked from uhauha909's "2つの座標と幅から面を描く" http://jsdo.it/uhauha909/xh5d $(function(){ var points = []; //ドラッグ時のマウスの座標を集める var $canvas; //追加されたキャンバスを格納 var canvasWidth; var canvasHeight; var mode; //マウス操作のモード /** * 2つの座標と幅から4つ(面)の座標を得る * @param ptax * @param ptay * @param ptbx * @param ptby * @param width */ function getRectPoints(ptax, ptay, ptbx, ptby, width) { var rad = Math.atan2(ptby - ptay, ptbx - ptax); var offX = (width / 2) * Math.sin(rad); var offY = (width / 2) * Math.cos(rad); var array = []; array.push({x:ptax + offX, y:ptay - offY}); array.push({x:ptbx + offX, y:ptby - offY}); array.push({x:ptbx - offX, y:ptby + offY}); array.push({x:ptax - offX, y:ptay + offY}); return array; } function addCanvas(){ return $('<canvas width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>').appendTo('#canvases'); } function mouseDown(e){ points = [{x:e.pageX - this.offsetLeft, y:e.pageY - this.offsetTop}]; if(mode == "erase"){ $('canvas').each(function(){ var ctx = $(this).get(0).getContext('2d'); if(ctx.isPointInPath(points[0].x, points[0].y) ){ $(this).remove(); return false; } }); } else { $canvas = addCanvas(); $(this).bind("mousemove", mouseMove); } } function mouseMove(e){ var ctx = $canvas.get(0).getContext('2d'); points.push({x:e.pageX - this.offsetLeft, y:e.pageY - this.offsetTop}); if(mode == "line"){ var array = getRectPoints( points[0].x, points[0].y, points[points.length - 1].x, points[points.length - 1].y, parseFloat($('input[name="width"]').val()) ); ctx.clearRect(0, 0, canvasWidth, canvasHeight); ctx.beginPath(); ctx.moveTo(array[0].x, array[0].y); ctx.lineTo(array[1].x, array[1].y); ctx.lineTo(array[2].x, array[2].y); ctx.lineTo(array[3].x, array[3].y); ctx.closePath(); ctx.fill(); } else if(mode == "pencil"){ ctx.lineWidth = parseFloat($('input[name="width"]').val()); ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y); ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y); ctx.stroke(); } } function mouseUp(e){ $(this).unbind("mousemove", mouseMove); if(points.length == 1 && mode != "erase"){ $canvas.remove(); } else if(mode == "pencil" && points.length >= 2){ //フリーハンド時、描いた線をなぞるように面を描く var ctx = $canvas.get(0).getContext('2d'); var pointsA = []; var pointsB = []; var i; for(i=1; i < points.length; i++){ var array = (getRectPoints( points[i-1].x, points[i-1].y, points[i].x, points[i].y, parseFloat($('input[name="width"]').val()) )); if (i==1){ pointsA.push(array[0]); pointsB.push(array[3]); } pointsA.push(array[1]); pointsB.push(array[2]); } ctx.beginPath(); ctx.moveTo(pointsA[0].x, pointsA[0].y); for (i=1; i < pointsA.length; i++){ ctx.lineTo(pointsA[i].x, pointsA[i].y); } for (i=pointsB.length-1; i >= 0; i--){ ctx.lineTo(pointsB[i].x, pointsB[i].y); } ctx.closePath(); ctx.fill(); } points = []; } function setMode(str){ mode = str; $('#mode').html('mode:' + str); } $('#canvases').bind("mousedown",mouseDown); $('#canvases').bind("mouseup mouseleave", mouseUp); canvasWidth = $('#canvases').width(); canvasHeight = $('#canvases').height(); $('input[name="line"]').click(function(){ setMode("line"); }); $('input[name="pencil"]').click(function(){ setMode("pencil"); }); $('input[name="erase"]').click(function(){ setMode("erase"); }); $('input[name="line"]').click(); }); <div id="canvases"></div> <div id="params"> <input name="line" type="button" value="line"> <input name="pencil" type="button" value="pencil"> <input name="erase" type="button" value="erase"> <span id="mode"></span> <label>width<input name="width" size="1" value="5"></label> </div>#canvases{ width: 400px; height: 400px; border: 1px solid #000000; position: relative; } canvas{ position: absolute; top: 0; left: 0; }