Confirmed users
371
edits
Firefox/Projects/Multitouch Polish/DOM Events/Examples: Difference between revisions
Firefox/Projects/Multitouch Polish/DOM Events/Examples (view source)
Revision as of 20:37, 19 August 2009
, 19 August 2009no edit summary
No edit summary |
No edit summary |
||
| Line 7: | Line 7: | ||
if (lastused >= 4) return; | if (lastused >= 4) return; | ||
if (assignedFingers[event.streamId]) { | if (assignedFingers[event.streamId]) { | ||
divId = assignedFingers[event.streamId]; | divId = assignedFingers[event.streamId]; | ||
} else { | } else { | ||
divId = "trackingdiv" + (++lastused); | divId = "trackingdiv" + (++lastused); | ||
assignedFingers[event.streamId] = divId; | assignedFingers[event.streamId] = divId; | ||
} | } | ||
document.getElementById(divId).style.left = event.clientX + 'px'; | document.getElementById(divId).style.left = event.clientX + 'px'; | ||
document.getElementById(divId).style.top = event.clientY + 'px'; | document.getElementById(divId).style.top = event.clientY + 'px'; | ||
} | } | ||
document.addEventListener("MozTouchMove", touchMove, false); | document.addEventListener("MozTouchMove", touchMove, false); | ||
| Line 70: | Line 70: | ||
function touchmove(e) { | function touchmove(e) { | ||
var | var img1 = document.getElementById("image1"); | ||
var | var img2 = document.getElementById("image2"); | ||
var diagonal, sidesize; | var diagonal, sidesize; | ||
if (fingerIds[0] == e.streamId) { // finger 1 | if (fingerIds[0] == e.streamId) { // finger 1 | ||
X1 = e.clientX; | |||
Y1 = e.clientY; | |||
} else if (fingerIds[1] == e.streamId) { // finger 2 | } else if (fingerIds[1] == e.streamId) { // finger 2 | ||
diagonal = dist(X1, e.clientX, Y1, e.clientY); | diagonal = dist(X1, e.clientX, Y1, e.clientY); | ||
sidesize = diagonal / Math.sqrt(2); | |||
img1.style.left = ((e.clientX < X1) ? e.clientX : X1) + "px" | |||
img1.style.top = ((e.clientY < Y1) ? e.clientY : Y1) + "px" | |||
img1.style.width = sidesize + "px" | |||
img1.style.height = sidesize + "px" | |||
} else if (fingerIds[2] == e.streamId) { // finger 3 | } else if (fingerIds[2] == e.streamId) { // finger 3 | ||
X2 = e.clientX; | X2 = e.clientX; | ||
Y2 = e.clientY; | |||
} else if (fingerIds[3] == e.streamId) { // finger 4 | } else if (fingerIds[3] == e.streamId) { // finger 4 | ||
diagonal = dist(X2, e.clientX, Y2, e.clientY); | diagonal = dist(X2, e.clientX, Y2, e.clientY); | ||
sidesize = diagonal / Math.sqrt(2); | |||
img2.style.left = ((e.clientX < X2) ? e.clientX : X2) + "px" | |||
img2.style.top = ((e.clientY < Y2) ? e.clientY : Y2) + "px" | |||
img2.style.width = sidesize + "px" | |||
img2.style.height = sidesize + "px" | |||
} | } | ||
}</pre> | }</pre> | ||