Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

mouse tracking in canvas and document

  • Loading branch information...
commit c1246df7d13b1edc43594035b2c6212b4ef2d778 1 parent a96efed
Matthew Lein authored
Showing with 119 additions and 67 deletions.
  1. +114 −67 css-regionator.js
  2. +5 −0 index.html
View
181 css-regionator.js
@@ -9,11 +9,15 @@
var ctx = canvas.getContext('2d');
var supportsTouch = ('createTouch' in document);
- var cWidth = 900;
- var cHeight = 600;
+ var cWidth = 500;
+ var cHeight = 200;
canvas.width = cWidth;
canvas.height = cHeight;
+
+
+ var regions = [];
+
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
@@ -29,13 +33,14 @@
// --------------------------------------------------------------------- //
// Objects
// --------------------------------------------------------------------- //
+
var Point = function(x,y) {
this.x;
this.y;
this.width = 12;
this.height = 12;
- this.color = "#222222"
+ this.color = "#222222";
};
Point.prototype = {
@@ -78,14 +83,22 @@
// get the x and y pos, normalized by getOffset
getPos : function (event) {
- var mouseX = event.pageX - helpers.getOffSet(event.target).left,
- mouseY = event.pageY - helpers.getOffSet(event.target).top;
+
+ var mouseX = event.pageX - helpers.getOffSet(event.target).left;
+ var mouseY = event.pageY - helpers.getOffSet(event.target).top;
return {
x: mouseX,
y: mouseY
};
},
+
+ getPagePos : function(){
+ return {
+ x: event.pageX,
+ y: event.pageY
+ };
+ },
//from quirksmode.org. Modified slightly to return obj
getOffSet : function(obj) {
@@ -102,6 +115,43 @@
top: pointTop
};
}
+ },
+
+ checkForPoints : function(){
+
+ for (var i=0; i < regions.length; i++) {
+
+ for (var j=0; j < regions[i].points.length; j++) {
+ var point = regions[i].points[j];
+ var pointLeft = point.left;
+ var pointRight = point.right;
+ var pointTop = point.top;
+ var pointBottom = point.bottom;
+
+ //20 px padding for chubby fingers
+ if ( supportsTouch ) {
+ pointLeft -= 20;
+ pointRight += 20;
+ pointTop -= 20;
+ pointBottom += 20;
+ }
+
+ //console.log('point.x:',point.x, 'point.y:',point.y)
+ if (x >= pointLeft &&
+ x <= pointRight &&
+ y >= pointTop &&
+ y <= pointBottom
+ ) {
+ //over the current handle
+ //console.log('over')
+ //drag = true;
+ return point;
+ }
+
+ }
+ }
+
+ return false;
}
};
@@ -127,83 +177,75 @@
// get mouse pos
var pos = helpers.getPos(cursorEvent);
+ selectedPoint = helpers.checkForPoints(pos);
- //check to see if over any handles
- for (var i=0; i < handles.length; i++) {
- var point = handles[i];
- var pointLeft = point.left;
- var pointRight = point.right;
- var pointTop = point.top;
- var pointBottom = point.bottom;
-
- //20 px padding for chubby fingers
- if ( supportsTouch ) {
- pointLeft -= 20;
- pointRight += 20;
- pointTop -= 20;
- pointBottom += 20;
- }
-
- //console.log('point.x:',point.x, 'point.y:',point.y)
- if (x >= pointLeft &&
- x <= pointRight &&
- y >= pointTop &&
- y <= pointBottom
- ) {
- //over the current handle
- //console.log('over')
- //drag = true;
- selectedPoint = point;
+ if ( selectedPoint ) {
+ //over the current handle
+ //console.log('over')
+ //drag = true;
+ selectedPoint = point;
- document.addEventListener('mouseup', onRelease, false);
- document.addEventListener('touchend', touchEnd, false);
+ // set move cursor
+ document.body.style.cursor = canvas.style.cursor = 'move';
- document.addEventListener('mousemove', onMove, false);
- document.addEventListener('touchmove', touchMove, false);
-
-
- // set move cursor
- document.body.style.cursor = canvas.style.cursor = 'move';
-
- }
-
- }
- // if over point, move point
- if ( true ) {
-
} else {
- // otherwise, new point
- // new Point(pos.x, pos.y)
+ // new Point( pos.x,pos.y );
}
+ document.addEventListener('mouseup', handlers.onRelease, false);
+ //document.addEventListener('touchend', touchEnd, false);
+
+ canvas.removeEventListener('mousemove', handlers.onMove);
+ document.addEventListener('mousemove', handlers.onPointMove, false);
+ //document.addEventListener('touchmove', touchMove, false);
+
},
- onMove : function(event){
+ onMove : function(event) {
var cursorEvent = supportsTouch ? event.touches[0] : event;
- var x = cursorEvent.pageX - getOffSet(canvas).left;
- var y = cursorEvent.pageY - getOffSet(canvas).top;
-
- if (x > canvas.width) {
- x = canvas.width;
- }
- if (x < 0) {
- x = 0;
- }
- if (y > canvas.height) {
- y = canvas.height;
- }
- if (y < 0) {
- y = 0;
+ var pos = helpers.getPos(event);
+
+ console.log(pos.x, pos.y)
+
+ //updateDrawing();
+
+ },
+
+ onPointMove : function(event) {
+
+ var pos = helpers.getPagePos(event);
+ console.log(pos.x, pos.y);
+
+ if ( selectedPoint ) {
+
+ if (x > canvas.width) {
+ x = canvas.width;
+ }
+ if (x < 0) {
+ x = 0;
+ }
+ if (y > canvas.height) {
+ y = canvas.height;
+ }
+ if (y < 0) {
+ y = 0;
+ }
+
+ selectedPoint.x = pos.x;
+ selectedPoint.y = pos.y;
+
}
-
- selectedPoint.x = x;
- selectedPoint.y = y;
+ },
+
+ onRelease : function() {
+ selectedPoint = null;
- updateDrawing();
+ document.removeEventListener('mousemove', handlers.onPointMove);
+ canvas.addEventListener('mousemove', handlers.onMove, false);
}
@@ -227,6 +269,11 @@
animate();
*/
+
+ var region = new Region();
+
+ canvas.addEventListener( 'mousedown', handlers.onPress, false );
+ canvas.addEventListener( 'mousemove', handlers.onMove, false );
}
View
5 index.html
@@ -3,6 +3,11 @@
<head>
<meta charset="utf-8">
<title>Page Title</title>
+ <style>
+ canvas {
+ background-color: #f1f1f1;
+ }
+ </style>
</head>
<body>
Please sign in to comment.
Something went wrong with that request. Please try again.