July 17, 2000 - Animation with setCapture() | WebReference

July 17, 2000 - Animation with setCapture()

Yehuda Shiran July 17, 2000
Animation with setCapture()
Tips: July 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

The setCapture() and releaseCapture() methods are great for animation purposes. These methods enable you to remote control an object. You don't have to place the mouse on the object in order to detect the mouse movement or to move the object. In this tip we show a simple script that demonstrates this idea. You can see a demo of this script here. The black ball is restricted to move around a fixed circle. The ball keeps track of the mouse and moves to the closest point to it (obeying the circle constraint). You can switch the mouse capturing on and off by clicking anywhere on the page.

We found out that the setCapture()'s parameter does not work as expected. The following three statements have the same effect:

Here is the listings of the script: 
<HTML>
<HEAD>
<TITLE>Track Ball</TITLE>
<STYLE>
<!--
#oTrackBall {
  position:absolute; 
  left:170; 
  top:200;
}
-->
</STYLE>
<SCRIPT>
<!--
var iRadius = 30;
var iXcenter = 250;
var iYcenter = 170;
var capture = true;
function fnSwitchCapture(obj) {
  if (capture) {
    capture = false;
	obj.releaseCapture();
  }
  else {
    capture = true;
	obj.setCapture();
  }
}
   
function doImgMouseMove()
{
  var iXdistance = event.x - iXcenter;
  var iYdistance = event.y - iYcenter;
  var distance = Math.sqrt(iXdistance * iXdistance + iYdistance * iYdistance);
  oTrackBall.style.left = iXcenter + iRadius * iXdistance / distance;
  oTrackBall.style.top = iYcenter + iRadius * iYdistance / distance;
}
-->
</SCRIPT>
</HEAD>
<BODY onload="oTrackBall.setCapture()" onclick="fnSwitchCapture(oTrackBall)"> <BR>
<CENTER><H2>Simple Animation with setCapture() and releaseCapture()</H2></CENTER>
<IMG ID="oTrackBall" onmousemove="doImgMouseMove()" SRC="black.gif" alt="black sphere">
</BODY>
</HTML>