实现标注文本

需求：

1、 鼠标选中文本后，为选中的文本添加背景色。并在选中的文本上增加标签。

2、 生成的文本标签有两种，不同类型的标签可以相互拖拽行成关系，并形成连线，连线后增加关系标签。

3、点击标签可以查看到当前点击的标签指向哪个文本内容，关系标签也是如此

image.png
image.png
image.png

实现工具：

1、JQ

2、svg

实现思路

前期：乍一看这个功能的实现其实还挺简单，但是在实现过程中，由于之前过分依赖vue框架，导致对原生js以及Jq的一些api有些不熟悉。

在实现过程中断断续续出现了很多问题。

1、如何为选中的文本添加背景色

这里有两种实现思路：

  • 根据鼠标选中的坐标，再使用svg进行画图。
    弊端：我前期是使用这种方法，但是这种方法根据鼠标点击的位置来获取x,y的坐标后再去画图的，这就意味一个问题。鼠标的点击位置是不统一的导致标签不对齐问题。（找不到解决思路）


    image.png

  • 根据选中的文本位置，为文本增加span标签，再给span标签加上样式。这种通过添加节点的方式，解决了我们的标签不对齐问题。


    image.png

但这里面还有很多问题。后面呈现代码时分析。

2、如何画线

svg画线就是根据坐标进行画线的，所以我们要拿到两个标签的位置进行连线。

他有两种情况，第一种是同一行标签上连线。第二行是跨行连线。

这里没什么需要特别注意的。

代码实现

    <div class="txtBox">
      <div id="1" data-num="1">【性状】本品为肠溶衣片，除去肠溶衣后显类白色或淡黄色。</div>
    </div>


    // 选中文本
    let text = ''; // 获取选中的文本
    let range = ''; // 获取选中的文本对象
    let beginTxt;
    // 文本结束位置
    let endTxt;
    // 当前行数
    let rowNum;
    // 鼠标事件
    $(".txtBox").mouseup(function(e){
      text = ''
      range = ''
      // 获取屏幕的宽度
      let clientWidth = document.body.clientWidth;
      // 这个方法可以获取当前鼠标选中的文本
      txt = window.getSelection();
      // 获取到当行选中的文本开始索引和结束索引
      beginTxt = txt.anchorOffset;
      endTxt = txt.focusOffset;
      var parentOffset = $(this).offset();
      if(txt.type!=='None'){
        // range 对象是我们当前选中的文本对象
        // 有了这个对象，我们可以为选中的文本添加标签
        range = txt.getRangeAt(0);
        if (txt.toString().length >= 1) {
          text = txt.toString();
        }
      }
    })

这里只贴关键代码

选中了文本对象后，我是通过一个点击事件后才进行标签生成的。所以在前面
记录了range对象。选中文本后我们要生成的标签有两个。


image.png
// 随机生成一个id，因为要生成的标签有两个，后面我们有删除功能
// 根据同一个id来删除，当然我们生成标签是不能重复id,所以有一个标签
// 用class来记录
let id = Number(Math.random().toString().substr(3,length) + Date.now()).toString(36)
// 这里面有些自定义属性始根据我需求来的，关键的就class和style
var newNode = document.createElement("span");
      newNode.setAttribute("class",`${id}`);
      newNode.setAttribute("style",`background:${bgColor}`);
      newNode.setAttribute("data-type",`${type}`);
      newNode.setAttribute("data-bg",`${bgColor}`);
      newNode.setAttribute("data-coverText",`${text}`);
      newNode.setAttribute("data-rowNum",`${rowNum}`);
// 这个方法就可以为文本添加标签
range.surroundContents(newNode);

目前已经实现到这里了


image.png

image.png

但是这里有一个比较严重的问题。我们目前是选中文本之后使用js的getSelection内置方法才得到range对象的。如果我们之后要回显，是没有选中文本这一说的。我们应该怎么记录选中后的文本呢，而且准确的在那个文本里增加标签。

其实我一开始的思路是直接使用选中的文本和当前的行数的文本做配对。但是如果一行内有多个相同的文本，这种方法行不通

所以还是要精准的方式，获取到这一行里面选中文本的当前索引。然后用自定义属性保存当前文本的开始和结束位置

// 前面已经实现了。
beginTxt = txt.anchorOffset;
endTxt = txt.focusOffset;

但是考虑到之前的是纯文本，所以选中文本时肯定可以拿到索引。如果这个文本已经加过标签了。

 我已经<span>加过标签了</span>了，已经不是纯文本。

那么getSelection就不会帮你算的这么准了。它变成这样计算了，也就是跳过了前面的标签。因为一行可以有很多个标签，所以做了一个循环计算当前的文本索引


image.png
// 随机生成一个id，因为要生成的标签有两个，后面我们有删除功能
// 根据同一个id来删除，当然我们生成标签是不能重复id,所以有一个标签
// 用class来记录
let id = Number(Math.random().toString().substr(3,length) + Date.now()).toString(36)
// 这里面有些自定义属性始根据我需求来的，关键的就class和style
var newNode = document.createElement("span");
      // 原本应该在这里就添加文本的开始和结束索引
      newNode.setAttribute("class",`${id}`);
      newNode.setAttribute("style",`background:${bgColor}`);
      newNode.setAttribute("data-type",`${type}`);
      newNode.setAttribute("data-bg",`${bgColor}`);
      newNode.setAttribute("data-coverText",`${text}`);
      newNode.setAttribute("data-rowNum",`${rowNum}`);
      // 标签还是要加，不过在判断后加
      //range.surroundContents(newNode);
      // 首先我的文本结构是做成这样的 
      //看下图，并且定义一个mousedown事件记录当前点击的是第几行
      // 使用 rowNum 来记录
      if(rowNum){
           // 标签还是要加的，我们要改变的只是要获取开始和结束
           // 目前的div结构可能是这样的
  // <div  id="1">我是<span>标签1</span>我<span>标签</span>我不是</div>
          range.surroundContents(newNode);
          // div的id要和行数一致
          var divName=document.getElementById(rowNum);
          // 记录当前的文本在哪个位置
          let strLength = 0;
          //判断在此之前有无添加过标签
          if(divName.childNodes){
            for(let i = 0; i<divName.childNodes.length; i++){
              if(divName.childNodes[i].nodeType===3){
                strLength += divName.childNodes[i].length;
              }
                  if(divName.childNodes[i].nodeType===1&&divName.childNodes[i].class!==id){
                strLength += divName.childNodes[i].dataset.covertext.length;
              }
              if(divName.childNodes[i].class===id){
                beginTxt = strLength;
                endTxt = strLength+text.length
                break;
              }
            }
          }
          $(`.${id}`).attr('data-beginTxt', beginTxt);
          $(`.${id}`).attr('data-endTxt', endTxt);
          // 获取到标签的位置，新增第二个标签
          let heigth = $(`.${id}`).offset().top+ $(".contentBox").scrollTop()+10;
          let spanX = downX+$(".contentBox").scrollLeft();
          let clientWidth = document.body.clientWidth;
          let candrag = e.target.dataset.type==="ingredient"?true:false;
          let width = 16*(e.target.innerHTML.length);
          // 添加标签
          let spanElement = `
          <span 
          id='${id}'
          data-covertext='${text}'  
          data-type='${type}'
          class='labelCategory'
          style='background:${bgColor};
          width:${width}px'
          draggable="${candrag}"
          ondragstart="drag(event)"
          ondragover="allowDrop(event)"
          ondrop="drop(event)">
          ${ e.target.innerHTML }
          </span>`;
          $(`.${id}`).append(spanElement)
          $(".txt_dialog").hide();
      }
}
$(".txtBox").mousedown(function(e){
      rowNum = e.target.dataset.num;
      downX = e.pageX;
    })
文本的结构

这样就能拿到文本的索引值了，当然我们这里不考虑换行。


image.png
image.png

画线

我觉得这里没什么好讲的，就是获取两个标签的索引和位置，判断高度，如果同一高度证明在同一行，否则跨行而已。代码仅供参考

  <!--画图面板-->
    <svg class="svgBox" width='100%' height='1000px' xmlns='http://www.w3.org/2000/svg'>
      <g id='whiskers'></g>
    </svg>

  function draw(currentSpanId,dragDownSpan,height,height2,left,left2,text1,text2){
    var mysvg = document.getElementById("whiskers");
    var rectObj = document.createElementNS("http://www.w3.org/2000/svg","polyline");
    if(rectObj){
      // 用来记录线条，到时可以删除
      let randomIndex = Math.round(Math.random()*100);
      let lineClassName = Number(Math.random().toString().substr(3,length) + Date.now()).toString(36) +"b" + randomIndex
      let lineClassName2 = lineClassName+'two'
      // 如果跨行
      if(height!==height2){
        // 第一条
        rectObj.setAttribute("points",`
        ${left} ${height-5},
        ${left+10} ${height-15},
        ${left+3000} ${height-15}`);
        rectObj.setAttribute("style","stroke:black; fill:none");
        mysvg.appendChild(rectObj);
        // 第二条
        var rectObj2 = document.createElementNS("http://www.w3.org/2000/svg","polyline");
        rectObj2.setAttribute("points",`
        0 ${height2-15},
        ${left2-10} ${height2-15},
        ${left2} ${height2-5}`);
        rectObj2.setAttribute("style","stroke:black; fill:none");
        rectObj.setAttribute("class",lineClassName);
        rectObj2.setAttribute("class",lineClassName2);
        mysvg.appendChild(rectObj2);
      }else{
        rectObj.setAttribute("points",`${left} ${height-5},${left+10} ${height-15}, ${left2-5} ${height2-15}, ${left2} ${height2-5}`);
        rectObj.setAttribute("style","stroke:black; fill:none");
        rectObj.setAttribute("class",lineClassName);
        mysvg.appendChild(rectObj);
      }
      $('.txt_dialog').hide();
      relationTag(currentSpanId,dragDownSpan,left,height,left2,height2,text1,text2,lineClassName,lineClassName2);
    }
  }

保存的数据结构

image.png

回显问题

1、标签的回显我觉得很麻烦。也是和之前的问题一样。一行可能有多个标注。
标注之后会有标签，加了标签之后就不是纯文本了，所以又要计算。
这里直接贴出代码。

function created () {
    let str = '[{"class":"kf7oxv4ic58","name":"反复发","row":"0","type":"ingredient","relationId":"kf7oxy5vc98","beginTxt":"9","endTxt":"12","bg":"#ef5353"},{"class":"kf7oxy5vc98","name":"咳嗽","row":"1","type":"effect","beginTxt":"38","endTxt":"40","bg":"#f1ae45"},{"class":"kf7oy470c48","name":"病重","row":"1","type":"ingredient","relationId":"kf7oy6tmc40","beginTxt":"68","endTxt":"70","bg":"#ef5353"},{"class":"kf7oy6tmc40","name":"睡眠、胃纳稍差","row":"1","type":"effect","beginTxt":"99","endTxt":"106","bg":"#f1ae45"},{"class":"kf7oyf67c38","name":"耳: 外形","row":"13","type":"ingredient","relationId":"kf7oyh1kc81","beginTxt":"0","endTxt":"5","bg":"#ef5353"},{"class":"kf7oyh1kc81","name":"鼻窦压","row":"14","type":"effect","beginTxt":"25","endTxt":"28","bg":"#f1ae45"}]'
    str = JSON.parse(str);
    let lineArr = [];
    let setLine = [];
    // 这里是用来画线的，一个标签可以和多个标签有关系
    for(let i = 0; i<str.length; i++){
      if(str[i].relationId&&str[i].relationId.length>0){
        setLine.push(str[i].class,str[i].relationId)
        setLine = Array.from(new Set(setLine))
      }
      // 这里开始才是回显标注的文本的
      var newNode = document.createElement("span");
      newNode.setAttribute("class",`${str[i].class}`);
      newNode.setAttribute("style",`background:${str[i].bg}`);
      newNode.setAttribute("data-type",`${str[i].type}`);
      newNode.setAttribute("data-bg",`${str[i].bg}`);
      newNode.setAttribute("data-coverText",`${str[i].name}`);
      newNode.setAttribute("data-beginTxt",`${str[i].beginTxt}`);
      newNode.setAttribute("data-endTxt",`${str[i].endTxt}`);
      newNode.setAttribute("data-rowNum",`${str[i].row}`);
      newNode.setAttribute("data-relationId",`${str[i].relationId}`);
          
      var divName=document.getElementById(str[i].row);
      var content;
      // 判断在此之前有无添加过标签
      let strLength = 0;
      // 判断是文本节点还是元素节点
      if(divName.childNodes.length>1){
        for(let j = 0; j<divName.childNodes.length; j++){
          if(divName.childNodes[j].nodeType===3){
            strLength += divName.childNodes[j].length;
          }else if(divName.childNodes[j].nodeType===1){
            strLength += divName.childNodes[j].dataset.covertext.length;
          }
          if(str[i].beginTxt<strLength&&divName.childNodes[j].className!==str[i].class){
            let strToTalLenght = divName.childNodes[j].length;
            let num1 = (strToTalLenght - (strLength - str[i].beginTxt));
            let num2 = num1 + str[i].name.length;
            if(num1>0&&num2>num1){
              content = divName.childNodes[j];
              let range = document.createRange();
              range.setStart(content,num1);
              range.setEnd(content,num2);
              range.surroundContents(newNode);
              createdTag(str[i])
            }
          }
        }
      }else{
        content= divName.firstChild;
        let range = document.createRange();
        range.setStart(content,str[i].beginTxt);
        range.setEnd(content,str[i].endTxt);
        range.surroundContents(newNode);
        createdTag(str[i])
      }        
    }
    // 画线
    createdLine(setLine)
  }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 195,898评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,401评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,058评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,539评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,382评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,319评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,706评论 3赞 386
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,370评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,664评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,715评论 2赞 312
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,476评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,326评论 3赞 313
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,730评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,003评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,275评论 1赞 251
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,683评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,877评论 2赞 335