マウストラックのコードを記録
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();
});