关于网页文本高亮的详细内容, 可以参考我之前的两篇文章, 详细记录了我实现网页文本高亮的过程:
本篇文章主要介绍的是如何在网页中实现几个文本之间的连线和标注. 类似下面图片展示的功能:
最初看到这个需求时一头雾水, 没有什么思路. GitHub上查到的代码参考的价值也不是很大. 好在查了一天资料以后, 主要确定了两种实现方式:
- jsplumb 插件 (大体功能能实现, 但网上对于jsplumb的介绍大多都是针对流程图的)
- 通过
getBoundingClientRect()这个方法确定文本的位置, 再用 canvas 画图 (参考: javaScript中getBoundingClientRect获取div盒子到页面浏览器顶部的距离, MDN getBoundingClientRect()介绍, h5 Canvas线段的绘制)
最后我选择了使用 jsplumb 插件的方式, 因为给的时间比较紧, 感觉可能省事一点.
参考: jsplumb 中文教程
遇到的小问题
这里记录一下遇到的几个问题和解决方法:
- 文本是放在一个有滚动条的div盒子里的, 使用 jsplumb 连接的线不能随文本一起移动
解决方法 => 为外层的div设置相对定位position: relative, 因为jsplumb的元素是绝对定位(absolute)的.
- 每个文本连线的位置可能会有点乱, 有些连线从左边出来, 有些从右边出来, 而且看起来弯弯绕绕的, 很不美观.
解决方法 => 设置jsplumb的锚点anchor为动态锚点, 只能从"top" 和"bottom" 连线.
anchor:["Top", "Bottom", [0.5, 0, 0, -1], [0.5, 1, 0, 1]]
- 文本设置了行间距, 使用
Flowchart这种方式连线后, 线可能穿过文本连接, 不能限制在行间距内.
解决方法 => 通过stub设置线拐角地方的高度, 把连线高度控制在文本的行间距以内.
connector: ['Flowchart',{ stub: [20, 10], cornerRadius: 5, alwaysRespectStubs: true }],
- 在连线上加箭头和文字标注
解决方法 => jsplumb的overlays
overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }],
["Label", { location: 0.5, label: "标签", cssClass: "endpointTargetLabel", visible: true, id: "label" }]
]
- 如何处理跨行文本 (如果文本跨行了, 连线就连不到这个文本上了, 而是会连到根据这个文本的位置计算出来的另一个位置上, 有点像
getBoundingClientRect()处理跨行文本的方式)
解决方法 => 没想到什么特别好的解决方法 (比如因为容器宽度和文本内容不定, 很难判断高亮的文本是不是在同一行), 所以就把 1) 高亮文本的第一个字作为连线的节点, 或者 2) 直接在文字前面加一个span标签; 这样就没有跨行的问题了.
方法 1):
用这种方法, 如果需要从网页采集selection对象的话, 会有一些影响. 比如用户标记 "世界"的时候 , 得到的selection对象如下:
方法 2) 的网页效果和selection对象
发现选择这个高亮文本的时候, 在文本前面添加的span标签一般不会有什么大的影响.
样例代码
这是我在正式采用这种方式之前写的一个比较简单的样例代码, 希望能有一点参考价值 :
( 注意: 正式项目中 jsplumb 应该放在mounted 里, 因为要对dom节点进行一些操作; 如果放在 created 里会报错 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#diagramContainer{
position: relative;
width: 560px;
height: 600px;
border: 1px solid black;
padding: 20px;
overflow: auto;
}
#divText{
line-height: 80px;
}
.endpointTargetLabel {
background-color: pink;
color: white;
padding: 0 2px;
font-size: 10px;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="diagramContainer">
<div id="divText">
一百年来，我们党从成立时只有 <span class="highlight"><span id="text0">5</span>0多名党员</span>，发展成为拥有
<span class="highlight"><span id="text1">9</span>500多万名党员</span>、领导着14亿多人口大国、具有重大全球影响力的
<span class="highlight"><span id="text2">世</span>界第一大执政党</span>分别在连线或点击前后触发，如果要保存连线修改的信息，可以在mounted中对实例化对象绑定事件,
文本内容就是上面圈着的一部分，内容中包含换行符（↵）.对于这类型的数据，在前端页面是需要进行稍微处理才能正常显示。如果没有经过处理，那么内容是不会在有换行符的位置进行换行显示的：
思想：将文本字符串转化为数组，然后将数组中“\n”换成浏览器正常解析的换行标签即可。(后端传回来的“↵”就是\n)，上面同样可以使用正则表达式来将字符串的换行符转换为< br >，那么就不用转换为数组了。
</div>
</div>
<script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
<script>
/* global jsPlumb */
jsPlumb.ready(function () {
jsPlumb.connect({
source: 'text0',
target: 'text1',
endpoint: 'Blank',
anchor:["Top", "Bottom", [0.5, 0, 0, -1], [0.5, 1, 0, 1]],
connector: ['Flowchart',{ stub: [20, 10], cornerRadius: 5, alwaysRespectStubs: true }],
maxConnections: -1,
paintStyle: { stroke: 'pink', strokeWidth: 1 ,radius:7},
EndpointStyle: { radius: 4, fill: "#acd"}, //端点样式
overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }],
["Label", { location: 0.5, label: "标签", cssClass: "endpointTargetLabel", visible: true, id: "label" }]
]
}),
jsPlumb.connect({
source: 'text0',
target: 'text2',
endpoint: 'Blank',
anchor:["Top", "Bottom", [0.5, 0, 0, -1], [0.5, 1, 0, 1]],
connector: ['Flowchart',{ stub: [20, 10], cornerRadius: 5, alwaysRespectStubs: true }],
maxConnections: -1,
paintStyle: { stroke: 'pink', strokeWidth: 1 ,radius:7},
EndpointStyle: { radius: 4, fill: "#acd"}, //端点样式
overlays: [ ['Arrow', { width: 8, length: 8, location: 1 }],
["Label", { location: 0.5, label: "标签", cssClass: "endpointTargetLabel", visible: true, id: "label" }]
]
})
})
</script>
</body>
</html>
更详细的用法, 可以参考中文教程: jsplumb 中文教程
5178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
