如何绘制箭头以通过 ngraph.pixi 与 PIXI.js 与 webgl 链接？答案

【问题标题】：How Paint the arrow to link by ngraph.pixi with PIXI.js with webgl?如何绘制箭头以通过 ngraph.pixi 与 PIXI.js 与 webgl 链接？
【发布时间】：2019-10-25 18:36:23
【问题描述】：

我画了直接图，所以我画了箭头到线，我是 pixi.js 和 javascript 的新手，我想学习它，你能帮我画一个箭头吗吗？

这是demo，我想在链接中添加箭头。

这是绘制链接的代码，在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);
}

这是完整的代码

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();
}

复制代码的链接是here

非常感谢

【问题讨论】：

标签： javascript pixi.js vivagraphjs

【解决方案1】：

据我所知，pixi.js 不支持开箱即用的箭头渲染。您必须手动绘制箭头。这个想法是使用原始向量运算来计算箭头的翅膀应该在哪里。

如果您使用归一化向量（长度等于 1 的向量）进行操作，则更容易实现。一旦你有了一个图形链接的向量，你就知道它的方向，然后你可以计算链接上的偏移量，箭头翅膀应该停止的地方。一旦你有了偏移，你所要做的就是取一个正交向量并从你的原始向量向左/向右步进——这些是你的箭翼应该停止的点。

如果你画个图会更容易理解，但是我目前没有好的钢笔和铅笔，所以这里是渲染箭头的代码：

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);
}

这会渲染出漂亮的箭头：

【讨论】：