如何用canvas画一个漂亮的箭头用于永中文档批注场景

codingMonkeyKing

已于 2022-06-23 14:40:11 修改

阅读量1.5k

点赞数 8

分类专栏： canvas 文章标签： javascript html5 前端

于 2022-06-17 16:14:56 首次发布

本文链接：https://blog.csdn.net/codingMonkeyKing/article/details/51459487

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如何用canvas画一个漂亮的箭头，此需求源于公司产品的强迫症，网上一大堆的箭头嫌丑，因此按照产品的要求，画出一个相对漂亮的箭头，当然正是因为产品精益求精的精神，才能做出更好产品。直接上图：

需求分析：

1、箭头可变大变小，且有最大值

2、箭头可以设置填充色，边框色

3、箭头起点，终点具有随机性

其实画箭的原理就是画射线，难点在于获取射线的各个点：

实现方案：

用canvas画射线从O点开始再到O点结束，中途经过 O=>C=>B=>A=>D=>F=>O

当然如果对canvas不熟悉的同学，请看canvas菜鸟教程，以下代码直接提供画箭头方法；话不多说，直接上代码：

/**
 * 
 * @param {*canvas context 对象} ctx 
 * @param {*起点横坐标} fromX 
 * @param {*起点纵坐标} fromY 
 * @param {*终点横坐标} toX 
 * @param {*终点纵坐标} toY 
 * 以下注释以终点在坐标第一象限内，且方向为右上方
 */
  drawLineArrow(ctx,fromX,fromY, toX, toY) {
    var headlen = 0.2 * 1.41 * Math.sqrt((fromX - toX) * (fromX - toX) + (fromY - toY) * (fromY - toY));//箭头头部长度
    headlen = headlen > 40 ? 40 : headlen;//40是箭头头部最大值
    var theta = 30;//自定义箭头线与直线的夹角
    var arrowX, arrowY;//箭头线终点坐标
    // 计算各角度和对应的箭头终点坐标
    var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI;
    var angle1 = (angle + theta) * Math.PI / 180;
    var angle2 = (angle - theta) * Math.PI / 180;
    var topX = headlen * Math.cos(angle1);
    var topY = headlen * Math.sin(angle1);
    var botX = headlen * Math.cos(angle2);
    var botY = headlen * Math.sin(angle2);
    var toLeft = fromX > toX;
    var toUp = fromY > toY;

    //箭头最上点
    arrowX = toX + topX;
    arrowY = toY + topY;
    //箭头下拐点
    var arrowX1 = toX + botX;
    var arrowY1 = toY + botY;
    //箭头上拐点
    var arrowX2 = toUp ? arrowX + 0.25 * Math.abs(arrowX1 - arrowX) : arrowX - 0.25 * Math.abs(arrowX1 - arrowX);
    var arrowY2 = toLeft ? arrowY - 0.25 * Math.abs(arrowY1 - arrowY) : arrowY + 0.25 * Math.abs(arrowY1 - arrowY);
    //箭头最下点 
    var arrowX3 = toUp ? arrowX + 0.75 * Math.abs(arrowX1 - arrowX) : arrowX - 0.75 * Math.abs(arrowX1 - arrowX);
    var arrowY3 = toLeft ? arrowY - 0.75 * Math.abs(arrowY1 - arrowY) : arrowY + 0.75 * Math.abs(arrowY1 - arrowY);

    ctx.beginPath();
    //起点-起点，闭合
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(arrowX2, arrowY2);
    ctx.lineTo(arrowX, arrowY);
    ctx.lineTo(toX, toY);

    ctx.lineTo(arrowX1, arrowY1);
    ctx.lineTo(arrowX3, arrowY3);
    ctx.lineTo(fromX, fromY);
    ctx.closePath();
    ctx.strokeStyle = "#FB8978";
    ctx.fillStyle = "rgba(255,197,179,0.3)";
    ctx.fill();
    ctx.stroke();

  }