HTML and CSS Reference
In-Depth Information
if (utils.containsPoint(bounds, mouse.x, mouse.y)) {
element.addEventListener('mouseup', onMouseUp, false);
element.addEventListener('mousemove', onMouseMove, false);
}
}, false);
function onMouseUp () {
element.removeEventListener('mousemove', onMouseMove, false);
element.removeEventListener('mouseup', onMouseUp, false);
setHandleBounds();
}
function onMouseMove () {
var pos_y = mouse.y - self.y;
self.handleY = Math.min(self.height - self.handleHeight, Math.max(pos_y, 0));
self.updateValue();
}
function setHandleBounds () {
bounds.x = self.x;
bounds.y = self.y + self.handleY;
bounds.width = self.width;
bounds.height = self.handleHeight;
}
};
For this slider (which you can see in Figure 13-2), you can pass in the
minimum
,
maximum
, and
value
arguments when you instantiate it. In the following example, we set the
minimum
to -90, the
maximum
to
90, and the
value
to 0. For the slider to “see” the mouse, we need to register the canvas element with it
using
slider.captureMouse(canvas)
. This is similar to the way we use the
utils.captureMouse(canvas)
function in previous examples. It adds a couple of mouse event listeners
to the canvas element and checks to see whether the position of the mouse cursor falls within the bounds
of the slider. In this example, you can see the slider in action by using it to rotate a segment (
02-single-
segment.html
):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Single Segment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="segment.js"></script>
<script src="slider.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
segment = new Segment(100, 20),
