给数据标注系统加个2D标注功能

---

前言

我们的数据标注系统已经有3D标注的功能且可以通过前端的计算将点云上的3D模型用svg画到2D照片上, 但甲方提出2D照片上的标注位置偶尔存在误差, 希望增加手动2D标注的功能进行修正.

把它嵌到项目的途中遇到了麻烦, 这里是一些思路和解决办法, 代码可跑.

参考: 180行代码，基于D3.js手把手教你实现图片标注功能
代码有改动.

---

0.复原示例

数据标注系统基于原生JavaScript和Three.js, 用于放置参考图的区域id为image-wrapper, 这个区域是可以缩放的, 自由改变图片比例大小, 同样, 标注也应该跟着图片的变化做出改变.

系统中有一个专门的类集成了image-wrapper的一系列操作方法和变量(实际上这个系统中对每个dom模块都进行了这种操作, 不然原生JavaScript会很乱的吧?), 这个新功能也将通过在这个类中进行dom事件注册和书写方法来完成.
先把功能在html文件里复现出来, 因为原例是基于Vue实现, 所以我理所当然的遇到了一堆this指向上的问题, 不过作者思路清晰, 我没有遇到太多其他麻烦.
我当然是选择在类中复现它的, 先把前面加了this的变量都写好, 这在Vue里是应该放在data的部分.

<div id="container5"></div>

class ImageContext {
   
  isDrag = false; // 当前是否为拖拽(移动)模式
  start = false; // 当前是否正在拖放添加矩形
  startDom = null; // 当前正在添加(鼠标未弹起)的矩形id
  rectData = null; // 鼠标坐标, 数组[x, y]
  topDot = null; // 拖拽模式下鼠标拖拽顶点的斜对顶点
}

我就不重复类外框了, 下面的函数都是写在类里的.

---

1.初始化

个人认为D3.js在链式编程这块很像JQuery, 按照原例, 初始化阶段需要在容器里添加一个svg画布, 然后在画布的底上先放上图片, 但是我们系统里的图片已经写在dom里.
这里我犯了一个错误, 这是系统里dom部分:

<div class="image-wrapper" id="image-board">
  <svg id="maincanvas-svg" viewbox="0 0 2048 1536" preserveAspectRatio="none">
    <image id="svg-image" x="0" y="0" width="2048" height="1536" preserveAspectRatio="none" xlink:href="" />
      <g id="svg-boxes"></g>
      <g id="svg-points"></g>
  </svg>
  <header id="header">
    <div id="header-title"></div>
    <div id="header-state"></div>
    <div id="header-action"></div>
  </header>
</div>

你可以看到image已经放在svg里面了, 但我们最初的方案是不动这层svg, 在这层svg上再盖一层svg,也就是变成这样:

<div class="image-wrapper" id="image-board">
  <svg id="maincanvas-svg" viewbox="0 0 2048 1536" preserveAspectRatio="none">
    <image id="svg-image" x="0" y="0" width="2048" height="1536" preserveAspectRatio="none" xlink:href="" />
      <g id="svg-boxes"></g>
      <g id="svg-points"></g>
  </svg>
   <svg id="custom-svg" viewbox="0 0 2048 1536" preserveAspectRatio="none">
      <g id="custom-svg-boxes"></g>
  </svg>
  <header id="header">
    <div id="header-title"></div>
    <div id="header-state"></div>
    <div id="header-action"></div>
  </header>
</div>

这个方案最终是可行的, 毋庸置疑, 但是实现起来的确恶心, 我们以custom-svg作为容器把这套代码实现后, 这套代码在初始化阶段生成的光标出现了, 光标没有问题, 在我处理完svg的viewbox和this问题后, 发现画出来的图形并不能随着图片的缩放自动改变位置和尺寸, 如果图片缩小, 我的标注会被原封不动的遮盖, 图片缩图片的, 上面这张svg画布就好像不动一样.
现在想想我觉得在image-wrapper缩小的时候手动改变上面svg画布的大小该是可以的, 两张svg尺寸相同, viewbox相同, 该是没有问题.

不过我想到一个更好的办法, 我了解到g标签在svg中只是起到分组作用, 这有点像Vue的template, 然后svg内部的image会跟随svg的尺寸变化而变化.
那直接不让这套标注代码生成新的svg, 在这个旧的svg上画不就好了? 单独开一个group让它不要影响其他已有标注, 于是dom代码原封不动:

<div class="image-wrapper" id="image-board">
  <svg id="maincanvas-svg" viewbox="0 0 2048 1536" preserveAspectRatio="none">
    <image id="svg-image" x="0" y="0" width="2048" height="1536" preserveAspectRatio="none" xlink:href="" />
      <g id="svg-boxes"></g>
      <g id="svg-points"></g>
  </svg>
  <header id="header">
    <div id="header-title"></div>
    <div id="header-state"></div>
    <div id="header-action"></div>
  </header>
</div>

我都快忘了我们在做初始化了, 你可以看到我选用的svg画布是已有的而并没有选择生成, act是一个div, 这个功能有移动标注的模式, 有关这个模式的启动与退出, 听取数据标注基地同事的意见(他们担心我们给出的最初方案, 点击其他位置自动退出移动模式会让误触带来的麻烦增加)之后我们决定用按钮来控制编辑模式和移动模式的切换, act按钮就是负责这个功能.

初始化主要是事件的注册, createDrag()负责移动模式(拖拽模式)下svg内图像对鼠标拖动事件的反应, 这个模式的事件单独放在了这个函数里, 等下会说到.

然后就是常规的标注操作了, 这部分的事件直接注册到svg画布上即可, 但注意是原生JavaScript环境, 这里的事件处理函数如果直接调用是无法获取到类中的this的, 他们的<