我这样绘制直接图形,所以我绘制了箭头,我是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
非常感谢
据我所知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);
}
并且呈现出漂亮的箭头: