マウストラックのコードを記録

3243 ワード

log_tracks window.addEventListener('load',function(){ var pad = document.getElementsByClassName('track-pad')[0]; var monitor = document.getElementsByClassName('track-monitor')[0]; var coordinate = document.getElementsByClassName('track-coordinate')[0]; var clist = document.getElementsByClassName('track-coordinate-list')[0]; var reset = document.getElementsByTagName('button')[0]; var context = monitor.getContext('2d'); var cset = []; var startx = 0, starty = 0; $('div').mousedown(mouseState).mouseup(mouseState); function fixSize(){monitor.width = window.innerWidth;}; function log(e){ if(cset.length == 0){ context.moveTo(e.x,e.y); }else{ context.strokeStyle = 'white'; context.lineTo(e.x,e.y); context.stroke(); } if(e.x-startx == e.x && e.y-starty == e.y){ startx = e.x; starty = e.y; } coordinate.innerHTML = '(' + (e.x-startx)+', '+(e.y-starty) + ')'; cset.push(coordinate.innerHTML); clist.innerHTML = cset.join(', '); } function mouseState(e) { if (e.type == "mouseup") { $('#logs').append('<br/>'+cset.join(', ')); clist.innerHTML = cset.join(''); cset = []; pad.removeEventListener("mousemove", log); } if (e.type == "mousedown") { startx = 0; starty = 0; pad.addEventListener('mousemove',log); } } reset.addEventListener('click',function(){ fixSize(); cset = []; clist.innerHTML = ''; coordinate.innerHTML=' '; }); fixSize(); });