Javascript 在HTML上绘制箭头_Javascript_Html_Svg

Javascript 在HTML上绘制箭头

javascript html svg

Javascript 在HTML上绘制箭头,javascript,html,svg,Javascript,Html,Svg,我有一个html表格，我想画一个箭头从一个单元格到另一个单元格。例如：这怎么可能呢 HTML示例： <html> <body> <table> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6&

我有一个html表格，我想画一个箭头从一个单元格到另一个单元格。例如：

这怎么可能呢

HTML示例：

<html>

 <body>

<table>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>
 <tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr>


</body>

</html>

如果调整浏览器的大小，箭头应保持在（新的）开始/结束位置。

您需要将表格放在div中，并提供属性position:relative 然后为箭头编写HTML（如果愿意，可以使用图像），并将其属性设置为absolute，然后使用top、left、right按需设置样式

在此处阅读有关位置属性的更多信息

您可以使用SVG元素和css样式覆盖表格的绝对位置。并通过JavaScript DOM API获取起点和终点，如

getBoundingClientRect（）

这是一个演示。（使用Angular制作，但您可以在任何地方使用它。纯JavaScript示例见下文。）

您可以动态更改开始和结束。您只需重新调用该方法即可获得位置。请注意，我使用left、top、right按钮将箭头放置在元素的边缘。您可以通过比较两个位置来计算中心点或边

你必须把svg放在桌子上。您可以通过设置css

position:absolute；左：0；顶部：0

。但是请注意，您的家长还应该具有

位置

属性。e、 g.

位置：相对的

更新：是一个纯JavaScript演示。单击左侧查看所有文件，然后选择index.js查看js内容。（就像在VS代码中一样）

完整代码：


0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
const svgLine=document.querySelector（“#svg行”）；
const startElement=document.querySelector（“开始”）；
const endElement=document.querySelector（“#end”）；
const startRect=startElement.getBoundingClientRect（）；
const endRect=endElement.getBoundingClientRect（）；
const startX=startRect.right；
const startY=startRect.top；
const endX=endRect.left；
const endY=endRect.bottom；
svgLine.setAttribute（'x1'，startX）；
svgLine.setAttribute（'y1'，startY）；
svgLine.setAttribute（'x2'，endX）；
svgLine.setAttribute（'y2'，endY）；

只需将上面的代码复制到一个新的空html文件中，并在浏览器中运行即可

顺便说一句，你也可以用画布来完成。（svg的替代方案）

我会这样做： svg元素使用表的大小作为viewBox值。您正在计算需要关联的单元格的大小和位置，并使用此位置绘制线。箭头的尖端使用了一个标记

请调整窗口大小：

let cells=Array.from（document.querySelectorAll（“td”）；
//待关联单元格的索引
设n1=90；
设n2=9；
//绘制箭头的函数
函数drawArrow（）{
//了解桌子的大小
设size=theTable.getBoundingClientRect（）；
//设置svg元素的viewBox属性
setAttributeNS（null，“viewBox”，“0${size.width}${size.height}`）
//获取单元格的大小和位置
设c1=单元格[n1]。getBoundingClientRect（）；
设c2=单元格[n2]。getBoundingClientRect（）；
//设置行的x1、y1、x2、y2属性
setAttributeNS（null，“x1”，`${c1.left+c1.width/2}`）；
setAttributeNS（null，“y1”，“${c1.top+c1.height/2}`）；
setAttributeNS（null，“x2”，`${c2.left+c2.width/2}`）；
setAttributeNS（null，“y2”，`${c2.top+c1.height/2}`）；
}
drawArrow（）
setTimeout（函数（）{
drawArrow（）
window.addEventListener（'resize'，drawArrow，false）；
}, 15);
正文{
保证金：0；
填充：0；
}
表，svg{
宽度：100%；
边界塌陷：塌陷；
保证金：0；
位置：绝对位置；
}
运输署{
边框：1px实心#d9d9d9；
填充：0.5em；
文本对齐：居中；
}
svg{background:rgba（0,0255,5）}

0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
您可以使用我的解决方案尚未完成绘制箭头，
让我们创建一个画布，并根据起点和终点的计算从两个点绘制一条线
Example running: https://jsfiddle.net/tabvn/uk7hsj3a    



0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
4.
5.
6.
7.
8.
9
0
1.
2.
3.
Example running: https://jsfiddle.net/tabvn/uk7hsj3a