Namespace Joint.arrows
Additional ready-to-use arrows.
Creating your own arrows
New arrows can be easily added. Each arrow is a function of one parameter (size) returning an object which describes the arrow. The object has four properties:
- path: SVG path of arrow shape
- dx: x-axis offset
- dy: y-axis offset
- attrs: SVG path attributes
Let's say you want to create an arrow of a square shape. First of all, you need a SVG path describing the square. Note that the symmetry of the square is along the origin (0, 0). After you have created the path, you need to specify the dx, dy offsets. The offsets tell the Joint library where to start drawing the connection. For our square arrow, they equal to its size. As the last thing, you can set some default path attributes suitable for you arrows. A good practice is to set the fill attribute. Doing so allows you to grab your arrow by mouse wherever inside your arrow shape.
Joint.arrows.square = function(size){
var minusSize = (-size).toString();
size = size.toString();
return {
path: ["M", size, size,
"L", minusSize, size,
"L", minusSize, minusSize,
"L", size, minusSize, "z"],
dx: size,
dy: size,
attrs: {
stroke: "black",
fill: "white"
}
};
};
Joint({x: 20, y: 20}, {x: 300, y: 30}, {
startArrow: {
type: "square",
size: 10
}
});
Defined in: joint.arrows.js.
| Constructor Attributes | Constructor Name and Description |
|---|---|
| Field Attributes | Field Name and Description |
|---|---|
| <static> |
Joint.arrows.flower
Flower arrow.
|
| <static> |
Joint.arrows.hand
Hand arrow.
|
| <static> |
Joint.arrows.rect
Rectangle arrow.
|
Joint({x: 40, y: 40}, {x: 300, y: 70}, {
startArrow: {
type: "flower"
},
endArrow: {
type: "hand"
}
});