箭头线

vue+uni-app+canvas 画带箭头可拖动的线段

<template><div><canvas ref="canvas" class="canvas" width="600px" height="400px" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas></div>
</template><script>
export default {data() {return {drawing: false,context: null,startX: 0,startY: 0,endX: 0,endY: 0};},mounted() {this.initializeCanvas();},methods: {initializeCanvas() {this.context = this.$refs.canvas.getContext('2d');this.context.strokeStyle = 'red';this.context.lineWidth = 2;this.context.strokeRect(300, 150, 10, 100);},startDrawing(event) {this.drawing = true;let rect = this.$refs.canvas.getBoundingClientRect()this.startX = event.clientX - rect.left;this.startY = event.clientY - rect.top;},draw(event) {if (!this.drawing) return;let rect = this.$refs.canvas.getBoundingClientRect()this.endX = event.clientX - rect.left;this.endY = event.clientY - rect.top;this.clearCanvas();this.drawLineArrow(this.context, this.startX, this.startY, this.endX, this.endY);},stopDrawing() {this.drawing = false;this.clearCanvas();this.startX = 0this.startY = 0this.endX = 0this.endY = 0},clearCanvas() {this.context.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);},drawArrowLine(startX, startY, endX, endY) {this.context.beginPath();this.context.moveTo(startX, startY);this.context.lineTo(endX, endY);// 计算箭头的角度const angle = Math.atan2(endY - startY, endX - startX);// 绘制箭头部分const arrowSize = 10;this.context.lineTo(endX - arrowSize * Math.cos(angle - Math.PI / 6), endY - arrowSize * Math.sin(angle - Math.PI / 6));this.context.moveTo(endX, endY);this.context.lineTo(endX - arrowSize * Math.cos(angle + Math.PI / 6), endY - arrowSize * Math.sin(angle + Math.PI / 6));this.context.stroke();},/*** * @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();}}
};
</script><style scoped>
/* 可以添加一些样式 */
.canvas {/* width: 800px;height: 500px; */background: #ccc;
}
</style>