canvas实现虚线带箭头效果

最新推荐文章于 2024-07-25 17:00:32 发布

本宝宝很开心

最新推荐文章于 2024-07-25 17:00:32 发布

阅读量1k

点赞数 2

分类专栏： react 文章标签： canvas react

本文链接：https://blog.csdn.net/weixin_44136421/article/details/118712289

版权

react 专栏收录该内容

28 篇文章 3 订阅

订阅专栏

在这里插入图片描述

<canvas id="canvas"/>

// startX, startY：起点坐标
// finalX, finalY：终点坐标 
// theta：三角斜边与直线夹角
// headlen：三角斜边长度
// width：箭头线宽度
// color：箭头颜色

const   getArrow=( startX, startY, finalX, finalY,theta=30,headlen=10,width=1,color="#000")=>{
  var idName = document.getElementById("canvas");
  var ctx = idName.getContext("2d");

  // 计算各角度和对应坐标
  var angle = Math.atan2(startY - finalY, startX - finalX) * 180 / Math.PI,
      angle1 = (angle + theta) * Math.PI / 180,
      angle2 = (angle - theta) * Math.PI / 180,
      topX = headlen * Math.cos(angle1),
      topY = headlen * Math.sin(angle1),
      botX = headlen * Math.cos(angle2),
      botY = headlen * Math.sin(angle2);
  ctx.save();
  var arrowX ,arrowY ;
  //绘制箭头
  ctx.beginPath();
  arrowX = finalX + topX;
  arrowY = finalY + topY;

  ctx.moveTo(arrowX, arrowY);
  ctx.lineTo(finalX, finalY);
  arrowX = finalX + botX;
  arrowY = finalY + botY;
  ctx.lineTo(arrowX, arrowY);
  ctx.strokeStyle = color;
  ctx.lineWidth = width;

  ctx.stroke();
  ctx.closePath();
  arrowX = startX - topX;
  arrowY = startY - topY;
  //绘制虚线
  ctx.beginPath();

  ctx.setLineDash([28, 8]);//实线 去掉此句

  ctx.moveTo(arrowX, arrowY);
  ctx.moveTo(startX, startY);
  ctx.lineTo(finalX, finalY);
  ctx.stroke();
  ctx.restore();
  }