Question

我想编写一个文本编辑器备忘单，其中显示了从一个字符移动到光标在文本中另一个字符（也许在另一行）上的移动命令的结果。

该文本将是固定宽度的代码，因此可以将画布视为N x N网格。理想情况下，我需要一些可以从该网格中的一个位置向另一位置绘制箭头的工具。

还有其他一些考虑，例如我是否可以做得比文本+重叠箭头的光栅化图像更好，或者我是否可以做一些喜欢的事情，例如将文本呈现为文本，然后用矢量化箭头覆盖透明的SVG图像。

作为一名后端服务器端工程师，我发现这样的任务特别艰巨。因此，任何帮助将不胜感激。（很高兴将这个问题发布到其他地方，或者添加任何详细信息。）

Answer 1

由于它是一个网格，正如您所说，您应该知道该行的起点和终点的x，y坐标。这些在以下svg行上转换为x1，y1和x2，y2属性：

html {
  font-family: monospace;
  background-color: #efefef;
}

.text {
  background-color: #ffffff;
  position: relative;
}

.text svg {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  line-height: 120%;
}

.text,
.text svg {
  width: 400px;
  height: 150px;
}

<p class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.


  <svg viewBox="0 0 400 150">
  
    <defs>
      <pattern id="smallGrid" y="12" width="7.8" height="15" patternUnits="userSpaceOnUse">
       <path d="M 15 0 L 0 0 0 15" fill="none" stroke="rgba(50,0,255,0.3)" stroke-width="0.5"/>
      </pattern>
      <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
      </marker>
    </defs>
    
    <rect width="400" height="150" fill="url(#smallGrid)" />
    <line x1="39" y1="12" x2="156" y2="68" stroke="#000" stroke-width="1" marker-end="url(#arrow)" />

  </svg>
</p>

固定宽度文字上的重叠箭头

1 个答案: