怎么秀raphael,画一个带箭头的直线,如:-------->

2025-05-17 17:24:15
推荐回答(1个)
回答(1):

  rapheal.js,是一个轻量级的脚本库,它兼容了VML和SVG,从而可以适应任何的浏览器。但正因为是其很好的兼容性,导致其无法很方便地实现画箭头的操作。因为在SVG里面,画箭头和VML完全不同。所以,你想想看,它要做到兼容,势必在这一点上就肯定无法实现了。其实,也可以自己来实现画箭头的操作,自己使用path方法来画出箭头。我就是这么做的,如果需要代码,可以留下你的邮件地址。

  我把代码贴在下面,你参考一下,若有更好的方法,也跟我多交流一下:
  ==================================================================
  // 画箭头,箭头初始方向为垂直向下,即偏移角度不设置,或设置为0度。
  // paper: raphael画布
  // x, y: 箭头点位置(x,y)
  // len: 箭头总长度
  // deltaAngle: 箭头从初始垂直向下位置开始的偏移角度(注意:是度数,不是弧度,正数表示顺时针,负数表示逆时针),默认为不偏移,及为0度
  // fAngle: 箭头开口的角度(注意:是度数,不是弧度)
  // sLen: 箭头短轴长度(注意:若和len相等,则箭头就是一个三角形,底部没有凹陷形成尾翼;若为0,则箭头的尾翼就是两根直线)
  var DrawArrow = function(paper, x, y, len, deltaAngle, fAngle, sLen) {
  deltaAngle = deltaAngle && typeof (deltaAngle) == "number" ? deltaAngle : 0;
  len = len && typeof (len) == "number" && len > 0 ? len : 12;
  fAngle = fAngle && typeof (fAngle) == "number" && fAngle > 0 ? fAngle : 50;
  sLen = sLen && typeof (sLen) == "number" && sLen > 0 ? sLen : 4;

  var ltLen = Math.tan(Raphael.rad(fAngle / 2)) * len;
  var ltX = x - ltLen;
  var ltY = y - len;

  var rtLen = ltLen;
  var rtX = x + rtLen;
  var rtY = ltY;

  var ctX = x;
  var ctY = ltY + sLen;

  var arrowPath = "M" + x + "," + y + "L" + ltX + "," + ltY + "L" + ctX + "," + ctY + "L" + rtX + "," + rtY + "L" + x + "," + y + "Z";
  var arrow = paper.path(arrowPath).attr({ stroke: "#e29d36", fill: "#e29d36" });
  arrow.rotate(deltaAngle, x, y);
  return arrow;
  };

  var paper = Raphael("notepad", 800, 600);
  var arrow = DrawArrow(paper, 100, 100, 10, 90);
  ==================================================================