Forked from: uhauha909's 面をクリックしたら消す View Diff (0) フリーハンドで線を描く uhauha909 Follow 2012-02-20 04:37:03 License: MIT License Fork2 Fav0 View2893 Play Stop Reload Fullscreen Smart Phone Fork tree 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(); }); <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; } 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? forked: 面をクリックしたら消す 以上、完全自己満足でしたー。 もっとスマートな方法あったら、誰か教えてくださーい。 chromeではうまく動くと思います。 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author uhauha909 JavaScript、jQuery初心者です。 HTMLよくわかってません。 CSSさっぱりわかりません。 ActionScript3が好きです、ごめんなさい。 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/5zoU/js"></script> Discussion Questions on this code? Forked sort by latest page views favorite forked forked: フリーハンドで線を描く rikuba 00 582 310/13/12 forked: フリーハンドで線を描く syamaoka 00 641 237/11/12