let Container = PIXI.Container, autoDetectRenderer = PIXI.autoDetectRenderer, Graphics = PIXI.Graphics; stage = new Container(), renderer = autoDetectRenderer(window.innerWidth, window.innerHeight);//Todo=> parameter document.body.appendChild(renderer.view); //Draw edge let line = new Graphics(); line.lineStyle(4, 0xFFFFFF, 1); line.moveTo(100, 100); line.quadraticCurveTo((100 + 300) / 2, 50, 300, 100); stage.addChild(line); //Draw node let circle = new Graphics(); circle.beginFill(0x66CCFF); circle.drawCircle(0, 0, 32); circle.endFill(); circle.x = 64; circle.y = 130; stage.addChild(circle); //Render the stage renderer.render(stage); //这里就是画出来的地方了 var draw = function (angle) { var pointsArray = [//三个点的位置 -0.15, -0.3, 0, 0, 0.15, -0.3 ]; var size = 100; var translation = {//测试起点100,100 控制点200,50,终点300,100 x: 100, y: 100 } var angle = angle; console.log(angle); var points = transformPoints(pointsArray, size, angle, translation); arrowShapeImpl(points); } var transform = function (x, y, size, angle, translation) { var xRotated = x * Math.cos(angle) - y * Math.sin(angle); var yRotated = x * Math.sin(angle) + y * Math.cos(angle); var xScaled = xRotated * size; var yScaled = yRotated * size; var xTranslated = xScaled + translation.x; var yTranslated = yScaled + translation.y; return { x: xTranslated, y: yTranslated }; }; var transformPoints = function (pts, size, angle, translation) { var retPts = []; //提出x和y for (var i = 0; i < pts.length; i += 2) { var x = pts[i]; var y = pts[i + 1]; retPts.push(transform(x, y, size, angle, translation)); } return retPts; }; //还是lineTo var arrowShapeImpl = function (points) { let line = new Graphics(); line.lineStyle(4, 0xFFFFFF, 1); line.moveTo(100, 100); for (var i = 0; i < points.length; i++) { var pt = points[i]; line.lineTo(pt.x, pt.y); } stage.addChild(line); renderer.render(stage); } //二阶贝塞尔曲线:http://blog.csdn.net/zhaopenghhhhhh/article/details/17753615 // from http://en.wikipedia.org/wiki/Bézier_curve#Quadratic_curves var qbezierAt = function (p0, p1, p2, t) { return (1 - t) * (1 - t) * p0 + 2 * (1 - t) * t * p1 + t * t * p2; }; var bX = qbezierAt(100, 200, 300, 0.1);//二阶贝塞尔曲线的X var bY = qbezierAt(100, 50, 100, 0.1);//二阶贝塞尔曲线的Y var dispX = 100 - bX; var dispY = 100 - bY;//路径坐标和起点坐标的差值 0.1 // atan( (y2-y1)/(x2-x1) ); // atan2( y2-y1, x2-x1 );如果 x2-x1等于0 依然可以计算 // atan2 方法返回一个 -pi 到 pi 之间的数值,表示点 (x, y) 对应的偏移角度。这是一个逆时针角度,以弧度为单位 // 返回的是是-pi到pi代表了两个点之间的偏移度从-360°到360° getAngleFromDisp = function (dispX, dispY) { // - Math.PI / 2;???? return Math.atan2(dispY, dispX) - Math.PI / 2; }; var angle = getAngleFromDisp(dispX, dispY); draw(angle);
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>