Tool

The Tool object refers to a script that the user can interact with by using the mouse and keyboard and can be accessed through the global tool variable. All its properties are also available in the paper scope.

The global tool variable only exists in scripts that contain mouse handler functions (onMouseMove, onMouseDown, onMouseDrag, onMouseUp) or a keyboard handler function (onKeyDown, onKeyUp).

Example:

var path;

// Only execute onMouseDrag when the mouse
// has moved at least 10 points:
tool.minDistance = 10;

tool.onMouseDown = function(event) {
    // Create a new path every time the mouse is clicked
    path = new Path();
    path.add(event.point);
    path.strokeColor = 'black';
}

tool.onMouseDrag = function(event) {
    // Add a point to the path every time the mouse is dragged
    path.add(event.point);
}

Properties

minDistance
The minimum distance the mouse has to drag before firing the onMouseDrag event, since the last onMouseDrag event.
- Type:
- Number
maxDistance
The maximum distance the mouse has to drag before firing the onMouseDrag event, since the last onMouseDrag event.
- Type:
- Number
fixedDistance
- Type:
- Number

Mouse Event Handlers

onMouseDown

The function to be called when the mouse button is pushed down. The function receives a ToolEvent object which contains information about the tool event.

Type:
Function⟋null

Example:Creating circle shaped paths where the user presses the mouse button:

tool.onMouseDown = function(event) {
    // Create a new circle shaped path with a radius of 10
    // at the position of the mouse (event.point):
    var path = new Path.Circle({
        center: event.point,
        radius: 10,
        fillColor: 'black'
    });
}

onMouseDrag
The function to be called when the mouse position changes while the mouse is being dragged. The function receives a ToolEvent object which contains information about the tool event.
- Type:
- Function⟋null
Example:Draw a line by adding a segment to a path on every mouse drag event:
```
// Create an empty path:
var path = new Path({
    strokeColor: 'black'
});

tool.onMouseDrag = function(event) {
    // Add a segment to the path at the position of the mouse:
    path.add(event.point);
}
```

onMouseMove

The function to be called the mouse moves within the project view. The function receives a ToolEvent object which contains information about the tool event.

Type:
Function⟋null

Example:Moving a path to the position of the mouse:

// Create a circle shaped path with a radius of 10 at {x: 0, y: 0}:
var path = new Path.Circle({
    center: [0, 0],
    radius: 10,
    fillColor: 'black'
});

tool.onMouseMove = function(event) {
    // Whenever the user moves the mouse, move the path
    // to that position:
    path.position = event.point;
}

onMouseUp

The function to be called when the mouse button is released. The function receives a ToolEvent object which contains information about the tool event.

Type:
Function⟋null

Example:Creating circle shaped paths where the user releases the mouse:

tool.onMouseUp = function(event) {
    // Create a new circle shaped path with a radius of 10
    // at the position of the mouse (event.point):
    var path = new Path.Circle({
        center: event.point,
        radius: 10,
        fillColor: 'black'
    });
}

Keyboard Event Handlers

onKeyDown
The function to be called when the user presses a key on the keyboard. The function receives a KeyEvent object which contains information about the keyboard event.
If the function returns false, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.
- Type:
- Function⟋null
Example:Scaling a path whenever the user presses the space bar:
```
// Create a circle shaped path:
    var path = new Path.Circle({
        center: new Point(50, 50),
        radius: 30,
        fillColor: 'red'
    });

tool.onKeyDown = function(event) {
    if (event.key == 'space') {
        // Scale the path by 110%:
        path.scale(1.1);

        // Prevent the key event from bubbling
        return false;
    }
}
```
onKeyUp
The function to be called when the user releases a key on the keyboard. The function receives a KeyEvent object which contains information about the keyboard event.
If the function returns false, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.
- Type:
- Function⟋null
Example:
```
tool.onKeyUp = function(event) {
    if (event.key == 'space') {
        console.log('The spacebar was released!');
    }
}
```

Methods

activate()
Activates this tool, meaning paperScope.tool will point to it and it will be the one that receives tool events.
remove()
Removes this tool from the paperScope.tools list.

Event Handling

on(type, function)
Attach an event handler to the tool.
- Parameters:
- type: String — the event type: ‘mousedown’, ‘mouseup’, ‘mousedrag’, ‘mousemove’, ‘keydown’, ‘keyup’
- function: Function — the function to be called when the event occurs, receiving a ToolEvent object as its sole argument
- Returns:
- Tool — this tool itself, so calls can be chained
on(param)
Attach one or more event handlers to the tool.
- Parameters:
- param: Object — an object literal containing one or more of the following properties: mousedown, mouseup, mousedrag, mousemove, keydown, keyup
- Returns:
- Tool — this tool itself, so calls can be chained
off(type, function)
Detach an event handler from the tool.
- Parameters:
- type: String — the event type: ‘mousedown’, ‘mouseup’, ‘mousedrag’, ‘mousemove’, ‘keydown’, ‘keyup’
- function: Function — the function to be detached
- Returns:
- Tool — this tool itself, so calls can be chained
off(param)
Detach one or more event handlers from the tool.
- Parameters:
- param: Object — an object literal containing one or more of the following properties: mousedown, mouseup, mousedrag, mousemove, keydown, keyup
- Returns:
- Tool — this tool itself, so calls can be chained
emit(type, event)
Emit an event on the tool.
- Parameters:
- type: String — the event type: ‘mousedown’, ‘mouseup’, ‘mousedrag’, ‘mousemove’, ‘keydown’, ‘keyup’
- event: Object — an object literal containing properties describing the event
- Returns:
- Boolean — true if the event had listeners, false otherwise
responds(type)
Check if the tool has one or more event handlers of the specified type.
- Parameters:
- type: String — the event type: ‘mousedown’, ‘mouseup’, ‘mousedrag’, ‘mousemove’, ‘keydown’, ‘keyup’
- Returns:
- Boolean — true if the tool has one or more event handlers of the specified type, false otherwise

PreviousMouseEvent NextToolEvent

Was this helpful?