How Paint the arrow to link by ngraph.pixi with PIXI.js with webgl?

Question

I so paint the direct graph, so I do paint the arrow to the line, I'm new with the pixi.js and the javascript and I want to learn it, can you help me how I can paint an arrow to it?

This is a demo and I want to add the arrow to the link.

This is the code for paint the link, inside this class

module.exports = function (link, ctx) {
  ctx.lineStyle(link.width, 0x333333, 1);
  ctx.moveTo(link.from.x, link.from.y);
  ctx.lineTo(link.to.x, link.to.y);
}

This is the complete code

module.exports.main = function () {
  var graph = require('ngraph.generators').balancedBinTree(5);
  var createPixiGraphics = require('../');

  var setting = {
    rendererOptions: {
      backgroundColor: 0xFFFFFF,
      antialias: true,
    }
  }

  var pixiGraphics = createPixiGraphics(graph, setting);
  pixiGraphics.createLinkUI(require('./lib/createLinkUI'));
  pixiGraphics.renderLink(require('./lib/renderLink'));
  pixiGraphics.createNodeUI(require('./lib/createNodeUI'));
  pixiGraphics.renderNode(require('./lib/renderNode'));
  var layout = pixiGraphics.layout;

  // just make sure first node does not move:
  layout.pinNode(graph.getNode(1), true);

  // begin animation loop:
  pixiGraphics.run();
}

The link for reproducing the code is here

Thanks a lot

score 5 · Accepted Answer · answered Oct 26 '19 at 19:07

As far as I know pixi.js doesn't support rendering of the arrows out of the box. You'd have to manually draw the arrows. The idea is to use primitive vector operations to calculate where arrow wings should be.

It is easier to implement if you operate with normalized vectors (vectors whose length is equal to 1). Once you have a vector for a graph link, you know its direction, you can then count offset on the link, where arrow wings should stop. Once you have offset, all you have to do is take an orthogonal vector and step to the left/right from your original vector - these are the points where your arrow wings should stop.

It would be much easier to understand if you draw a picture, but I don't have good pen and pencil at the moment, so here is the code that renders the arrow:

function defaultLinkRenderer(link) {
  graphics.lineStyle(1, 0xcccccc, 1);
  graphics.moveTo(link.from.x, link.from.y);
  graphics.lineTo(link.to.x, link.to.y);

  // first, let's compute normalized vector for our link:
  let dx = link.to.x - link.from.x;
  let dy = link.to.y - link.from.y;
  let l = Math.sqrt(dx * dx + dy * dy);

  if (l === 0) return; // if length is 0 - can't render arrows

  // This is our normal vector. It describes direction of the graph
  // link, and has length == 1:
  let nx = dx/l; let ny = dy/l;

  // Now let's draw the arrow:
  let arrowLength = 6;       // Length of the arrow
  let arrowWingsLength = 2;  // How far arrow wings are from the link?

  // This is where arrow should end. We do `(l - NODE_WIDTH)` to
  // make sure it ends before the node UI element.
  let ex = link.from.x + nx * (l - NODE_WIDTH);
  let ey = link.from.y + ny * (l - NODE_WIDTH);

  // Offset on the graph link, where arrow wings should be
  let sx = link.from.x + nx * (l - NODE_WIDTH - arrowLength);
  let sy = link.from.y + ny * (l - NODE_WIDTH - arrowLength);

  // orthogonal vector to the link vector is easy to compute:
  let topX = -ny;
  let topY = nx;

  // Let's draw the arrow:
  graphics.moveTo(ex, ey);
  graphics.lineTo(sx + topX * arrowWingsLength, sy + topY * arrowWingsLength);
  graphics.moveTo(ex, ey);
  graphics.lineTo(sx - topX * arrowWingsLength, sy - topY * arrowWingsLength);
}

And that renders nice looking arrows:

How Paint the arrow to link by ngraph.pixi with PIXI.js with webgl?

1 Answers1