相关疑难解决方法(0)

我有一个HTML页面,其中一些文本跨度标记为这样:

...
<span id="T2" class="Protein">p50</span>
...
<span id="T3" class="Protein">p65</span>
...
<span id="T34" ids="T2 T3" class="Positive_regulation">recruitment</span>
...

即每个跨度都有一个ID,并通过其ID引用零个或多个跨度.

我想将这些引用可视化为箭头.

两个问题:

• 如何将跨度的ID映射到跨度渲染的屏幕坐标？
• 如何绘制从一个渲染到另一个渲染的箭头？

该解决方案应该在Firefox中工作,在其他浏览器中工作是一个加号,但不是真的必要.该解决方案可以使用jQuery或其他一些轻量级JavaScript库.

我正在尝试制作自己的国际象棋分析板，以便在教授国际象棋时使用。我目前有棋盘，可以拖放的棋子，以及清除棋盘和设置不同棋盘位置的方法。我还可以单击方块以突出显示它们。

我希望能够将箭头从一个方格绘制到另一个方格以显示攻击线和影响线，但不知道如何实现这一点。我的板子是由<div>标签组成的。下面是一个简短的例子（为简洁起见，伪代码和实际代码）。

// 几个 CSS 样式来定义正方形的宽度、高度和颜色 CSS 样式类 "dark square" CSS 样式类 "light square"

//我的板子是由<div>标签组成的

<div id="board">
    <div id="a1" class="lightsquare"></div>
    <div id="a2" class="darksquare"></div>
    <div id="a3" class="lightsquare"></div>
    //second rank
    <div id="b1" class="darksquare"></div>
    <div id="b2" class="lightsquare"></div>
    <div id="b3" class="darksquare"></div>

    //third rank
    <div id="c1" class="lightsquare"></div>
    <div id="c2" class="darksquare"></div>
    <div id="c3" class="lightsquare"></div>
</div>

我可以将棋子放在棋盘上，移动它们，拿走其他棋子，清除棋盘，设置独特的位置，并突出显示各个方块就好了，但也希望能够让用户点击、拖动和绘制箭头生活在棋盘上，同时仍然能够操纵棋盘上的棋子。

我曾考虑使用该标签，但根据我的阅读和研究，该<canvas>标签似乎并不是为满足我的需求而设计的。

有没有人对如何在 JavaScript 中做到这一点有任何想法？我还没有学会使用 JQuery，我宁愿避免使用 JQuery，因为我不想下载额外的文件或必须在互联网上使用这个程序。