Light High Efficiency Graph Component

Qunee Developer Guide

Node Image

Node Image

In the graphical interface, the node is generally expressed to an icon and text label, where the icon is the main part of node, and the text label is the auxiliary component. The main part not only supports the icon (static image) but also supports Canvas code, GIF animation, SVG and vector graph (Q.Path) etc.

Set node graph:

Q.Node#image - main part of node

Example Set GIF icon as the main part of node

var nodeWithGIF = graph.createNode("Node with GIF\nnot support IE", 120, 110);
nodeWithGIF.image = "./images/sheep.gif";

Operation effect:

Built-in icon

All built-in icons of Qunee are showed hereinafter. The Canvas code is used, with ‘Q-’ as prefix of name

var graph = new Q.Graph('canvas');

var images = Q.getAllImages();
var x = 0, y = 0;
    graph.createNode(image, x, y).image = image;
    x += 100;

Operation effect is as follows

Qunee recommends to use Canvas code as the icon, with two advantages: support vector; synchronized load.

Qunee built-in icons are applied with this method.

Let’s see how to make this kind of graph from following examples

Make Canvas code icon

Make Canvas code icon by SVG2Canvas

1. Make SVG icon

Firstly the art designer uses Adobe Illustrator (AI) or similar tools to make vector icons, and export files in SVG format

2. SVG converted to Canvas code

Use Chrome or Safari browser. Visit SVG2Canvas - Drag SVG file to left dotted line frame. After a while, you may see generated Canvas code at the right text box. The central bottom shows the effect that these codes are used as node icons

Generated code structure and usage

3. Usage in Qunee

Save generated code in the text box to js file, such as SVGIcons.js, and input from html file. For example:

<body style="margin: 0px">
<div style="position: absolute; width: 100%; top: 0px; bottom: 0px;" id="canvas"></div>
<script src=""></script>
<script src="SVGIcons.js"></script>
    var graph = new Q.Graph('canvas');

var x = 0, y = 0;
    for(var name in SVGIcons){
        var node = graph.createNode(name.substring(0, name.indexOf('.svg')), x, y);
        node.image = name;
//        node.setStyle(Q.Styles.RENDER_COLOR, Q.randomColor())
        x += 100;
        if(x > 600){
            x = 0;
            y += 100;

Operation effect

Use SVG Vector Image

To make icons by SVG will realize perfect vector effect, without distortion to zooming

Pay attention that in IE explorer, you can draw SVG images in Canvas,
but unable to acquire pixel information of SVG, and thus it is unable to
make image dyeing, also unable to seek node edge. So Qunee recommends to
use SVG file only after converting the SVG file to Canvas 


var graph = new Q.Graph("canvas");
var svg = graph.createNode("SVG Logo");
svg.image = 'SVG_logo.svg';

Operation effect

Draw custom-made icon

Support full custom-made icons. 2D function may be applied for drawing desired effect

Example, set the custom-made icon as the main part of node

var customDraw = {
    width: 100,
    height: 100,
    draw: function (g, scale) {
        g.rect(0, 0, 100, 100);
        g.fillStyle = Q.toColor(0xCC2898E0);
        g.lineWidth = 10;
        g.strokeStyle = '#DDD';
var node = graph.createNode("custom shape");
node.image = customDraw;

Operating interface:

Shape Icon

The path may be used as the main part of node. By multi-control points, draw the shape and scope of node Example

Custom-made path as the main part of node

var nodeShape = graph.createNode("Custom Shape", 240, 110);
var customShape = new Q.Path();
customShape.moveTo(20, -50);
customShape.lineTo(100, -50);
customShape.lineTo(100, 50);
customShape.quadTo(20, 50, 20, 20);
nodeShape.image = customShape;
nodeShape.setStyle(Q.Styles.SHAPE_STROKE, 4);
nodeShape.setStyle(Q.Styles.LAYOUT_BY_PATH, true);
nodeShape.size = {width: 100, height: -1};

Operating interface:

Image size

Set the image size. Support zooming as per certain ratio. For vector image, adjust the image size that will not lead to distortion of image. And for grid images, it can be clearly showed.

#size - size, used to set the size of node image. If only width is set, the height will be zoomed as per equal ratio


Select HD images for nodes. Then set smaller size. When interface zooming can be realized, the image will still be clear, such as selecting images at pixel width of 256. Set the node size to 64. When the interface is zoom in four times, the image is still clear


Set the node name, vector icon, and assign width to 100, and zoom in as per equal ratio:

var hello = graph.createNode("Hello\nNode");
hello.image = Q.Graphs.server;
hello.size = {width: 100};