mirror of
https://github.com/blprnt/ArtArchive.git
synced 2024-06-19 05:47:03 +00:00
62 lines
2.5 KiB
Markdown
62 lines
2.5 KiB
Markdown
|
sigma.renderers.customShapes
|
||
|
|
==================
|
||
|
|
|
||
|
|
Plugin developed by [Ron Peleg](https://github.com/rpeleg1970).
|
||
|
|
|
||
|
|
---
|
||
|
|
## General
|
||
|
|
This plugin registers custom node shape renderers, and allows adding scaled images on top of them. See the following [example code](../../examples/plugin-customShapes.html) for full usage.
|
||
|
|
|
||
|
|
To use, include all .js files under this folder.
|
||
|
|
|
||
|
|
The plugin implements the `node.borderColor` property to allow control of the (surprise) border color.
|
||
|
|
|
||
|
|
## Shapes
|
||
|
|
The plugin implements the following shapes. To set a shape renderer, you simply set `node.type='shape-name'` e.g. `node.type='star'`. The default renderer implemented by sigma.js is named `def` - see also [generic custom node renderer example](../../examples/custom-node-renderer.html)
|
||
|
|
* `circle`: similar to the `def` renderer, but also allows images
|
||
|
|
* `square`
|
||
|
|
* `diamond`
|
||
|
|
* `equilateral`: equilateral polygon. you can control additional properties in this polygon by setting more values as follows:
|
||
|
|
````javascript
|
||
|
|
node.equilateral = {
|
||
|
|
rotate: /* rotate right, value in deg */,
|
||
|
|
numPoints: /* default 5, integer */
|
||
|
|
}
|
||
|
|
````
|
||
|
|
* `star`: you can control additional properties in this star by setting more as follows:
|
||
|
|
````javascript
|
||
|
|
node.star = {
|
||
|
|
numPoints: /* default 5, integer */,
|
||
|
|
innerRatio: /* ratio of inner radius in star, compared to node.size */
|
||
|
|
}
|
||
|
|
````
|
||
|
|
* `cross`: plus shape. you can control additional properties in this polygon by setting more values as follows:
|
||
|
|
````javascript
|
||
|
|
node.cross = {
|
||
|
|
lineWeight: /* width of cross arms */,
|
||
|
|
}
|
||
|
|
````
|
||
|
|
* `pacman`: an example of a more exotic renderer
|
||
|
|
|
||
|
|
The list of available renderer types can be obtained by calling `ShapeLibrary.enumerate()`
|
||
|
|
|
||
|
|
## Images
|
||
|
|
You can add an image to any node, simply by adding `node.image` property, with the following content:
|
||
|
|
````javascript
|
||
|
|
node.image = {
|
||
|
|
url: /* mandatory image URL */,
|
||
|
|
clip: /* Ratio of image clipping disk compared to node size (def 1.0) - see example to how we adapt this to differenmt shapes */,
|
||
|
|
scale: /* Ratio of how to scale the image, compared to node size, default 1.0 */,
|
||
|
|
w: /* numeric width - important for correct scaling if w/h ratio is not 1.0 */,
|
||
|
|
h: /* numeric height - important for correct scaling if w/h ratio is not 1.0 */
|
||
|
|
}
|
||
|
|
````
|
||
|
|
Because the plug-in calls the sigma instance `refresh()` method on image loading, you MUST init as follows or you will not see rendered images:
|
||
|
|
````javascript
|
||
|
|
s = new sigma({
|
||
|
|
...
|
||
|
|
});
|
||
|
|
CustomShapes.init(s);
|
||
|
|
s.refresh();
|
||
|
|
````
|