谁能告诉我如何在javascript中从一个项目到另一个项目绘制任意角度的曲线？

Question

仅作为上下文，我使用 html5、css 和 jquery。

我希望能够在网页上的两个元素之间绘制带有箭头的曲线。我几乎已经明白了，但就是无法专注于数学来绘制箭头。可能只是对画布小部件的操作让我着迷。

这是我现在使用的 javascript。当然感觉很漫长，但除了那些讨厌的箭头之外，它似乎完成了工作。

“影响”变量是稍微改变线条，这样如果有多条线，它们将显示一条在另一条后面。

  var start = $('#firstobject');
  var last = $('#lastobject');
  var stpos = start.position();
  var lastpos = last.position();
  var influence = Math.random*20+5;
  var maxx = Math.max(stpos.left,lastpos.left);
  var minx = Math.min(stpos.left,lastpos.left);
  var maxy = Math.max(stpos.top,lastpos.top);
  var miny = Math.min(stpos.top,lastpos.top);
  var w = maxx - minx;
  var h = maxy - miny;
  var cname = "samplename";
  var cpad = 30;
  var cstr = "<canvas id='"+cname+"' class='huntgroupcanvas' style='z-index:2;position:absolute;left:"+(0+minx-cpad)+"px;top:"+(0+miny-cpad)+"px;' id='"+cname+"' width="+(2*cpad+w)+" height="+(2*cpad+h)+"></canvas>"
  start.before(cstr);
  var canvas = document.getElementById(cname);
  var ctx = canvas.getContext("2d");
  var dx = stpos.left - lastpos.left;
  var dy = stpos.top - lastpos.top;
  var dir = dy/dx;
  var sx,sy,ex,ey;
  if (dir<0) {
    ex=w+cpad;
    ey=cpad;
    sx=cpad;
    sy=h+cpad;
  } else {
    ex=w+cpad;
    ey=h+cpad;
    sx=cpad;
    sy=cpad;
  }

  ctx.lineWidth=1;
  ctx.strokeStyle = '#000';
  ctx.beginPath();
  ctx.moveTo(sx,sy);
  ctx.quadraticCurveTo(((w/2)-(h/2))+cpad-influence,((h/2)-(w/2))+cpad,ex,ey);
  ctx.stroke();
  if (st==i-1) {
    first=0;
    ctx.beginPath();
    if (dx<0) {
      ctx.arc(sx,sy,6,0,Math.PI*2,0);
    } else {
      ctx.arc(ex,ey,6,0,Math.PI*2,0);
    }
    ctx.stroke();
  }

 /* Here's where I've been trying to draw the arrowheads.
  * I know that I can get the slope of the line like so:
    var m = (y2-y1)/(x2-x1);
  * I know I can get the angle in radians as
    var angle=Math.atan(m);
  * I'm trying to use rotation to draw the arrowhead
 */
      ctx.save();
      ctx.beginPath();
      angle = Math.atan(dir);
      if (dx<0) {
        sx=ex;
        sy=ey;
        angle = Math.atan(-dir);
      }
      ctx.moveTo(sx,sy);
      ctx.translate(sx,sy);
      ctx.rotate(angle - 0.05);
      ctx.lineTo(20,0);
      ctx.rotate(angle + 0.05);
      ctx.lineTo(20,0);
      ctx.closePath();
      ctx.fill();
      ctx.restore();

Answer 1

有很多代码需要阅读，但在生成箭头角度时，您似乎弄乱了三角学。看一下 atan2 函数，它接受一个 2D 向量并将其转换为角度。所以你会想使用angle=Math.atan2(dy,dx)