Mouse

oCanvas has good support for mouse events. All predefined display objects support mouse events that trigger only inside of the shape, not the bounding rectangle. User-defined objects trigger within the bounding rectangle if the property shapeType is set to rectangular (which is the default). If shapeType is set to radial the event will be triggered within the radius of the shape.

Event Types

mousedown: Gets triggered when a mouse button is pressed down.
mouseup: Gets triggered when a mouse button is released.
mousemove: Gets triggered continuously when the pointer moves over the object.
mouseenter: Gets triggered when the pointer first enters the object.
mouseleave: Gets triggered when the pointer leaves the object.
click: Gets triggered when the mouse button is released, and only if the pointer positions where the button was pressed down and released are both within the object.
dblclick (since version 2.0.0): Gets triggered when two click events happen shortly after each other.

Event Object

An event object is passed to the handler function as the first argument. This object contains most of the standard properties for a normal event object. Some things are changed though. The timeStamp property is not always correct in the normal object, so that is fixed and should be correct. Also, the properties x and y are added, which refers to the current position. The which property contains which mouse button was pressed (fixed version of the button property). This is a numeric code, as follows:

0: No button pressed
1: Primary button, usually the left button
2: Secondary button, usually the right button
3: Middle button, usually the mouse wheel

Mouse events are propagated up in the parent chain by default, except for mouseenter and mouseleave events which do not bubble. You can stop the bubbling by calling the method stopPropagation() on the event object.

If you really need the original event object, it is saved in the property originalEvent.

Mouse Module

To bind handlers to mouse events, you don't need to interact with the actual mouse module of oCanvas — you just use the bind() method of the core instance or a display object. The mouse module offers some extras though. These are described under Methods and Properties and exist on the mouse module of the core instance. See the example further down.

Methods

Properties

buttonState : String: The button state of the mouse, "up" or "down".
canvasFocused : Boolean: True if the last time the mouse button was pressed down happened on the canvas, false otherwise.
canvasHovered : Boolean: True if the mouse position is inside the canvas, false otherwise.
x : Number: Current x position of the mouse pointer, relative to the left side of the canvas. Updates only when mouse pointer is inside the canvas.
y : Number: Current y position of the mouse pointer, relative to the top side of the canvas. Updates only when mouse pointer is inside the canvas.

Examples

Example 1

We create a core instance and a text object that will show the mouse position inside the canvas. A loop is set up, which will run 30 times per second and update the text with the current position.

View Example

Code

var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#ccc"
});

var text = canvas.display.text({
	x: 177,
	y: 196,
	origin: { x: "center", y: "center" },
	align: "center",
	font: "bold 25px/1.5 sans-serif",
	text: "Mouse Position\nX: 0\nY: 0",
	fill: "#000"
});

canvas.addChild(text);

canvas.setLoop(function () {
	text.text = "Mouse Position\n" +
			"X: " + canvas.mouse.x + "\n" +
			"Y: " + canvas.mouse.y;
}).start();

Output