连线题实现的几种方式

最新推荐文章于 2025-03-19 15:53:46 发布
最新推荐文章于 2025-03-19 15:53:46 发布
阅读量650 收藏 3
点赞数 8
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42179237/article/details/142069571
版权

在这里插入图片描述

基础布局：

左侧：左侧红框
右侧：右侧红框
画布：绿色框

<div class='root'>
    <div class='left'></div> // 左侧
    <div class='right'></div> // 右侧
    <svg class='canvas-box'></svg> // 画布（根据不同方案的选择不同的dom元素）
</div>

划线核心逻辑

确定开始坐标位置
确定结束坐标位置
连线
获取元素坐标

getPoint方法（通过自定义position位置，设置连线起始点和结束点的位置）
const getPoint = (args) => {
        const { startDom, rootDom = containerRef.value, position = 'right' } = args || {};
        const { left: x1, top: y1 } = getElementPositionRelativeToDocument(rootDom);
        const { left: x2, top: y2, width, height } = getElementPositionRelativeToDocument(startDom);
        let startX = x2 - x1;
        let startY = y2 - y1;
        if (position === 'bottom') {
            startX = startX + width / 2;
            startY = startY + height + lineSpacingRef.value;
        }
        if (['rt', 'tr'].includes(position)) {
            startX = startX + width + lineSpacingRef.value;
            startY = startY + lineSpacingRef.value;
        }
        if (position === 'right') {
            startX = startX + width + lineSpacingRef.value;
            startY = startY + height / 2;
        }
        if (['rb', 'br'].includes(position)) {
            startX = startX + width + lineSpacingRef.value;
            startY = startY + height + lineSpacingRef.value;
        }
        if (['lt', 'tl'].includes(position)) {
            startX = startX - lineSpacingRef.value;
            startY = startY + lineSpacingRef.value;
        }
        if (position === 'left') {
            startX = startX - lineSpacingRef.value;
            startY = startY + height / 2;
        }
        if (['lb', 'bl'].includes(position)) {
            startX = startX - lineSpacingRef.value;
            startY = startY + height + lineSpacingRef.value;
        }
        if (position === 'top') {
            startX = startX + width / 2;
            startY = startY - lineSpacingRef.value;
        }
        return { startX, startY };
};
getElementPositionRelativeToDocument方法
/**
 * 获取目标输入参数元素所在位置
 * @param element
 */
const getElementPositionRelativeToDocument = (element) => {
    if (!element) return { left: 0, top: 0 };
    const rect = element.getBoundingClientRect();
    
    // 获取视口滚动位置
    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    // 计算元素相对于文档的位置
    const leftPosition = rect.left + scrollLeft;
    const topPosition = rect.top + scrollTop;
   
    
    return { left: leftPosition, top: topPosition, width: rect.width, height: rect.height };
}

标题方案一、svg

设置svg的开始和结束位置坐标进行划线

<svg ref="svgRef" class="svg-box">
    <g
        v-for="(link, index) in links"
        :key="index"
        @mouseenter="isHovered = index"
        @mouseleave="isHovered = null"
        @click.prevent="handleDelSvgPath(link, index)"
    >
        <defs>
            <marker :key="isHovered" :id="`arrow${index}`" v-bind="getMarkerInfo(index).marker" orient="auto-start-reverse">
                <path :d="getMarkerInfo(index).d" :style="{ fill: 'none', stroke: arrowFillMap[link.type], strokeWidth: 1 }"></path>
            </marker>
        </defs>
        <line
            class="svg-line"
            v-bind="getSvgInfo(link)"
            :stroke="arrowFillMap[link.type]"
            stroke-width="1"
            :marker-end="`url(#arrow${index})`"
            :stroke-dasharray="link.type === reverseCode ? '3, 3' : '0, 0'"
        ></line>
        <!-- 用于增加热区的透明路径 -->
        <line v-bind="getSvgInfo(link)" stroke="transparent" stroke-width="10" fill="none"></line>
    </g>
</svg>
const getSvgInfo = (link) => {
    const svgBox = svgRef.value;
    const fromIndex = inputParamList.value?.findIndex(item => item.value === link.from);
    const toIndex = outputParamList.value?.findIndex(item => item.value === link.to);

   // 连线开始元素-startBlockRef.value[fromIndex]  连线结束元素-endBlockRef.value[toIndex]

    const { startX: x2, startY: y2 } = getPoint({ startDom: endBlockRef.value[toIndex], position: 'left' });
    const { startX: x1, startY: y1 } = getPoint({ startDom: startBlockRef.value[fromIndex], position: 'right' });
    if (!svgBox || fromIndex === -1 || toIndex === -1) return { x1: 0, x2: 0, y1: 0, y2: 0 };
    return { x1, x2, y1, y2 };
};

const getMarkerInfo = (index) => {
        if (isHovered.value === index) return {
            marker: {
                markerWidth: 4,
                markerHeight: 4,
                refX: 2,
                refY: 2
            },
            d: "M0,0 L2,2 L0,4"
        }
        return {
            marker: {
                markerWidth: 8,
                markerHeight: 8,
                refX: 4,
                refY: 4
            },
            d: "M0,0 L4,4 L0,8"
        }
    };
确认开始节点
const handleConnectType = (value, row, index) => {
        const id = row.value;
        connectType.value = value;
        popupVisibleMap.value[id] = false;
        currentSelectedId.value = id;
        svgCanvasListener();
        const { startX, startY } = getPoint({ startDom: startBlockRef.value[index], position: row.position });
        drawLine(startX, startY);
};
开始划线
let line = null;
const drawLine = (startX, startY) => {
        line = createLine(startX, startY, startX, startY);
        svgRef.value.appendChild(line);
};
划线createLine
const createLine = (x1, y1, x2, y2) => {
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', x1);
        line.setAttribute('y1', y1);
        line.setAttribute('x2', x2);
        line.setAttribute('y2', y2);
        line.setAttribute('stroke', arrowFillMap[connectType.value]);
        line.setAttribute('stroke-width', '1');
        if(connectType.value === reverseCode) line.setAttribute('stroke-dasharray', '3, 3'); // 设置虚线
        if (showArrow) line.setAttribute('marker-end', 'url(#arrow)');
};
鼠标移动，跟随鼠标移动划线
const mousemove = (e) => {
        if (!line) return;
        const { left: targetPageX, top: targetPageY } = getElementPositionRelativeToDocument(svgRef.value);
        const toX = e.pageX - targetPageX - lineSpacingRef.value;
        const toY = e.pageY - targetPageY - lineSpacingRef.value;
        line.setAttribute('x2', toX);
        line.setAttribute('y2', toY);
};
确认结束元素
const handleEndPoint = (row) => {
  // 数据处理
   upData(); // 更新数据
  if (line) svgRef.value.removeChild(line);
  line = null;
}

标题方案二、canvas

设置canvas的开始和结束位置坐标进行划线

<canvas
    ref="svgCanvasRef"
    class="svg-canvas-container"
    :width="root.offsetWidth"
    :height="root.offsetHeight"
></canvas>
canvas划线
/**
     * canvas画布划线
     * @param canvasDom
     * @param fromX
     * @param fromY
     * @param toX
     * @param toY
     */
    const drawCanvasLine = (ctx, fromX, fromY, toX, toY) => {
        if (!svgCanvasRef.value) return;
       
        const { arrowEnd1X, arrowEnd1Y, arrowEnd2X, arrowEnd2Y } = setArrowPath(fromX, fromY, toX, toY);
        
        ctx.lineWidth = 1;
        ctx.strokeStyle = arrowFillMap[connectType.value];
        
        ctx.beginPath();
        if (connectType.value === reverseCode) ctx.setLineDash([3, 3])
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();
        
        if (!showArrow) return;
        // 箭头
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(arrowEnd1X, arrowEnd1Y);
        ctx.moveTo(toX, toY);
        ctx.lineTo(arrowEnd2X, arrowEnd2Y);
        ctx.stroke();
    }
/**
 * 设置箭头
 * @param startX
 * @param startY
 * @param endX
 * @param endY
 */
const setArrowPath = (startX, startY, endX, endY) => {
    // 箭头头部的大小和角度
    const arrowLength = 5; // 箭头长度
    const arrowAngle = 4; // 箭头角度
    
    // 计算箭头头部的两个点
    const angle = Math.atan2(endY - startY, endX - startX);
    const arrowEnd1X = endX - arrowLength * Math.cos(angle - Math.PI / arrowAngle);
    const arrowEnd1Y = endY - arrowLength * Math.sin(angle - Math.PI / arrowAngle);
    const arrowEnd2X = endX - arrowLength * Math.cos(angle + Math.PI / arrowAngle);
    const arrowEnd2Y = endY - arrowLength * Math.sin(angle + Math.PI / arrowAngle);
    return { arrowEnd1X, arrowEnd1Y, arrowEnd2X, arrowEnd2Y };
};
鼠标移动，跟随鼠标移动划线
const mousemove = (e) => {
    const { left: targetPageX, top: targetPageY } = getElementPositionRelativeToDocument(svgRef.value);
    const toX = e.pageX - targetPageX - lineSpacingRef.value;
    const toY = e.pageY - targetPageY - lineSpacingRef.value;
    const canvas = svgRef.value.getContext('2d');
    const width = svgRef.value.width;
    const height = svgRef.value.height;
    const ctx = canvas.clearRect(0, 0, width, height) || svgRef.value.getContext('2d');
    drawCanvasLine(ctx, startX1, startY1, toX, toY)
    links.value.forEach(item => {
        const {x1, y1, x2, y2} = getSvgInfo(item);
        drawCanvasLine(ctx, x1, y1, x2, y2);
    })        
};
确认数据，数据更新
const updateData = (links) => {
    $emit('update:modelValue', getAnswerData(), links);
    $emit('onAnswerChange', getAnswerData())
    const canvas = svgRef.value.getContext('2d');
    const width = svgRef.value.width;
    const height = svgRef.value.height;
    const ctx = canvas.clearRect(0, 0, width, height) || svgRef.value.getContext('2d')
    links.forEach(item => {
        const {x1, y1, x2, y2} = getSvgInfo(item);
        drawCanvasLine(ctx, x1, y1, x2, y2);
    })
};

标题方案三、svg(最终连线)+canvas（鼠标移动连线画布）

设置svg和canvas的开始和结束位置坐标进行划线

<svg v-if="draw" ref="svgRef" class="svg-box">
    <g
        v-for="(link, index) in links"
        :key="index"
        @mouseenter="isHovered = index"
        @mouseleave="isHovered = null"
        @click.prevent="handleDelSvgPath(link, index)"
    >
        <defs>
            <marker :key="isHovered" :id="`arrow${index}`" v-bind="getMarkerInfo(index).marker" orient="auto-start-reverse">
                <path :d="getMarkerInfo(index).d" :style="{ fill: 'none', stroke: arrowFillMap[link.type], strokeWidth: 1 }"></path>
            </marker>
        </defs>
        <line
            class="svg-line"
            v-bind="getSvgInfo(link)"
            :stroke="arrowFillMap[link.type]"
            stroke-width="1"
            :marker-end="`url(#arrow${index})`"
            :stroke-dasharray="link.type === reverseCode ? '3, 3' : '0, 0'"
        ></line>
        <!-- 用于增加热区的透明路径 -->
        <line v-bind="getSvgInfo(link)" stroke="transparent" stroke-width="10" fill="none"></line>
    </g>
</svg>
<canvas
    v-if="showSvgCanvas"
    ref="svgCanvasRef"
    :key="canvasKey"
    class="svg-canvas-container"
    :width="containerRef.offsetWidth"
    :height="containerRef.offsetHeight"
></canvas>
getSvgInfo、getMarkerInfo、获取开始位置、结束为止与方案一均一致
鼠标移动，跟随鼠标移动划线
const mousemove = (e) => {
        if (!svgCanvasRef.value) return;
        const { left: targetPageX, top: targetPageY } = getElementPositionRelativeToDocument(svgCanvasRef.value);
        const { startX, startY } = startConnectLineDomPoint.value;
        const toX = e.pageX - targetPageX;
        const toY = (e.pageY - targetPageY);
        drawCanvasLine(startX, startY, toX, toY);
    };
/**
     * canvas画布划线
     * @param canvasDom
     * @param fromX
     * @param fromY
     * @param toX
     * @param toY
     */
    const drawCanvasLine = (fromX, fromY, toX, toY) => {
        if (!svgCanvasRef.value) return;
        const canvas = svgCanvasRef.value.getContext('2d');
        const width = svgCanvasRef.value.width;
        const height = svgCanvasRef.value.height;
        const ctx = canvas.clearRect(0, 0, width, height) || svgCanvasRef.value.getContext('2d');
        const { arrowEnd1X, arrowEnd1Y, arrowEnd2X, arrowEnd2Y } = setArrowPath(fromX, fromY, toX, toY);
        
        ctx.lineWidth = 1;
        ctx.strokeStyle = arrowFillMap[connectType.value];
        
        ctx.beginPath();
        if (connectType.value === reverseCode) ctx.setLineDash([3, 3])
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();
        
        if (!showArrow) return;
        // 箭头
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(arrowEnd1X, arrowEnd1Y);
        ctx.moveTo(toX, toY);
        ctx.lineTo(arrowEnd2X, arrowEnd2Y);
        ctx.stroke();
    }
/**
 * 设置箭头
 * @param startX
 * @param startY
 * @param endX
 * @param endY
 */
const setArrowPath = (startX, startY, endX, endY) => {
    // 箭头头部的大小和角度
    const arrowLength = 5; // 箭头长度
    const arrowAngle = 4; // 箭头角度
    
    // 计算箭头头部的两个点
    const angle = Math.atan2(endY - startY, endX - startX);
    const arrowEnd1X = endX - arrowLength * Math.cos(angle - Math.PI / arrowAngle);
    const arrowEnd1Y = endY - arrowLength * Math.sin(angle - Math.PI / arrowAngle);
    const arrowEnd2X = endX - arrowLength * Math.cos(angle + Math.PI / arrowAngle);
    const arrowEnd2Y = endY - arrowLength * Math.sin(angle + Math.PI / arrowAngle);
    return { arrowEnd1X, arrowEnd1Y, arrowEnd2X, arrowEnd2Y };
};

标题方案四、css

通过设置两点之间的连线长度以及设置div元素的旋转角度进行划线

<div v-if="draw" ref="svgRef" class="svg-box">
    <div v-for="(link, index) in links" class="line" :style="{
        width: `${calculateDistance(getSvgInfo(link))}px`,
        transform: `translateX(0) translateY(${getSvgInfo(link).y1}px) rotate(${calculateAngleDegrees(getSvgInfo(link))}deg)`
    }">
</div>
.svg-box {
    flex: 1;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    .line {
        width: 300px; /* 线条的长度 */
        height: 0; /* 线条的宽度 */
        border-top: 1px solid red;
        &:after {
            content: '>';
            position: absolute;
            top: -12px;
            right: 6px;
            width: 0;
            height: 0;
            color: red;
        }
    }
}
getSvgInfo、getMarkerInfo、获取开始位置、结束为止与方案一均一致
calculateAngleDegrees方法（根据终点坐标计算角度）
const calculateAngleDegrees = ({x1, y1, x2, y2}) => {
    // 检查分母是否为0（即x1是否等于x2）
    if (x1 === x2) {
        // 如果x1等于x2，则线条是垂直的
        // 这里我们假设y2 > y1表示向上，y2 < y1表示向下
        return y2 > y1 ? 90 : -90; // 或者返回270而不是-90
    }

    // 计算斜率
    let slope = (y2 - y1) / (x2 - x1);

    // 使用Math.atan()计算角度（以弧度为单位）
    let angleRadians = Math.atan(slope);

    // 将弧度转换为度
    let angleDegrees = angleRadians * (180 / Math.PI);

    // 如果线条是从右向左倾斜的（x2 < x1），并且你想要一个正的角度值
    // （尽管CSS的rotate函数已经是以逆时针方向为正方向的）
   
    // if (x2 < x1) angleDegrees += 180;

    // 返回角度（以度为单位）
    return angleDegrees;
};
calculateDistance方法（获取两点之间的距离）
const calculateDistance = ({ x1, y1, x2, y2 }) => {
    // 计算两点在x轴和y轴上的距离差
    let dx = x2 - x1;
    let dy = y2 - y1;

    // 应用勾股定理计算斜线的长度
    let distance = Math.sqrt(dx * dx + dy * dy);
    return distance;
}
划线
let line = null;
const drawLine = (startX, startY) => {
    line = document.createElement("div");
    line.className = "line";
    svgRef.value.appendChild(line);
};
鼠标移动划线
const mousemove = (e) => {
    if (!line) return;
    const { left: targetPageX, top: targetPageY } = getElementPositionRelativeToDocument(svgRef.value);
    const toX = e.pageX - targetPageX - lineSpacingRef.value;
    const toY = e.pageY - targetPageY - lineSpacingRef.value;
    line.style.width = `${calculateDistance({x1, y1, x2: toX, y2: toY})}px`;
    line.style.borderTop = '1px solid red';
    line.style.transformOrigin = '0 0';
    line.style.transform = `translateX(0) translateY(${y1}px) rotate(${calculateAngleDegrees({x1, y1, x2: toX, y2: toY})}deg)`;
};
qq_42179237
关注
Vue使用JQuery和svg.js实现连线题 文字、图片、音频 双列与三列
z17665627053的博客
08-27 731
使用先下载jquery与svg.js npm i --save jquery npm i --save svg.js template部分 <divid="draw"class="draw-container"> <divstyle="position:absolute"class="btn-group"> <phref="javascript:;"id="j-reset">...
前端应用 - 实现100以内加减法的连线习题兼容移动端
ycn2008的专栏
09-29 716
html主页面（index.html）： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"&g...
vue实现连线效果
weixin_47330492的博客
10-23 6397
vue+jsplumb实现连线效果
vue、jsPlum连线题demo
最新发布
xujing_06的博客
03-19 227
vue、jsPlum连线题demo
Vue3 节点之间连线
leoz1的博客
03-05 2366
目前每个节点的连线的偏移量是根据其在list中的索引有关，因此越靠后的节点其偏移量也越大，感觉不美观，想要修改成根据其是当前第几个连接的元素来控制偏移量，但是试了很多次都无法实现，好像偏移量在第一次初始化后就无法更改了，再次进行初始化是无效的，偏移量仍然是第一次初始化时设置的值，待解决。创建一个全局数组用来存放连接信息，在连接connection和connectionDetached时，对其进行push和splice操作。在initLeaf中初始化每个节点的信息。利用jsPlumb进行节点的连线操作。
html5做连线题
08-14
html连线题实现，可以在前台轻松做到网站的连线效果
H5+canvas+js实现连线题
05-09
本项目"**H5+canvas+js实现连线题**"就是利用这些技术来创建一种互动式的在线连线题目，这在教育、测试或游戏场景中非常实用。 连线题是一种常见的认知测试形式，通常要求用户将两个相关的项目通过线条连接起来。在...
HTML5 Cavnas实现连线题特效
09-03
在这个场景中，“HTML5 Canvas实现连线题特效”是指利用Canvas API来构建一种互动式的连线答题界面，用户可以通过鼠标拖动来连接不同的元素，形成正确的关联。 Canvas的基本使用涉及到以下几个核心概念： 1. 创建...
JavaScript实现连连看连线算法
10-17
实现连连看连线算法的代码需要考虑以下几个关键点： - 游戏画布的二维数组表示，用于存储游戏中的精灵位置。 - 精灵的表示方式，通常包含行号、列号等属性。 - 有效路径的判断方法，即如何判断两个点之间是否存在...
HTML5 Canvas实现连线题特效.zip
11-18
连线题是一种常见的教育或测试工具，用户需要将指定的元素通过线条正确连接起来，常用于记忆训练或逻辑思维练习。 在这个项目中，我们可以预见到以下几个关键知识点： 1. **HTML5 Canvas API**：Canvas API提供了...
教育连线题Demo实现与结果反馈技术
连线题是一种常见的互动学习活动，通常用于评估学习者是否能够正确地将概念、术语或对象之间建立联系。该Demo旨在演示如何利用不同的数据类型（可能是文本、图形、音视频等）来构建连线题目，并且能够自动检查和反馈...
在线考试连线题 js demo
02-22
在线考试连线题 js demo
Vue 使用jsPlumb 实现连线绘图
银滴子的博客
01-30 6212
Vue 使用jsPlumb 实现连线绘图
微信小程序绘制连线题（自参）
xxx
05-04 1389
【代码】微信小程序绘制连线题（自参）
一笔画连线问题, 代码完美解决.
weixin_40467931的博客
04-06 297
抖音上有大量这种游戏的主播, 我干脆直接写出代码的求解.https://www.bilibili.com/video/BV1gp42127MZ/https://github.com/zhangbo2008/draw_by_one_line # 2024-04-14,0点26 可能是空间复杂度太高, 改成用树来存储路径. #=============一笔画问题. import matplotl...
vue+jsplumb 实现根据数据渲染出连线绘图
qq_37656005的博客
07-20 2279
vue+jsplumb 实现根据数据渲染出连线绘图 vue+jsplumb 实现连线绘图 vue3.x 使用jsplumb进行拖拽连线 jsplumb 点击节点或者连线高亮显示
需求：vue+svg实现连线功能
weixin_44996782的博客
12-14 5067
问题描述：如标题所示 参考了svg.js和jquery实现连线功能 需求： 1.右侧两个方框可以合成一个bond，点击bond之后又可以恢复。 2.一对一连接 3.有回显功能 package.json @svgdotjs/svg.js: “^3.1.1” 解决方法: svg_style.css .draw-container { position: relative; margin-top: 50px; } .data-list { position: absolute; }
vue连线 插件_使用jsPlumb插件实现动态连线功能
weixin_35725410的博客
12-28 5948
这周去看了两天的羽毛球亚锦赛，工作有提前晚上加班做一些，但是技术文章却拉下了。这段时间一直在寻找可以实现前端元素动态连线的功能，找了好几个库，考虑过用d3或者原生svg和canvas来实现，最后和同项目的同事商量后决定使用jsPlumb插件库来做。jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，其实j...
Vue 前端根据坐标点按顺序生成连线
weixin_43945408的博客
09-27 2788
Vue.js 前端生成连线， 根据自定义的一些点， 按顺序连成一个闭环，并赋予不同的class展示
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值