在HTML上方绘制箭头
gue*_*tli 12 html javascript 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</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>
如果调整浏览器的大小，箭头应停留在（新）开始/结束位置。
您可以使用我的解决方案尚未完成绘制箭头，让我们基于起点和终点的计算来创建画布并从两点绘制一条线。
Example running: https://jsfiddle.net/tabvn/uk7hsj3a
Example running: https://jsfiddle.net/tabvn/uk7hsj3a
- 因此，添加调整大小可以将解决方案分组在一个函数中，然后您可以监听窗口调整大小并再次调用渲染画布。 (3认同)
借助JavasSript和CSS，您可以在不使用canvas或SVG的情况下实现这一目标。这是一个例子：
function getPosition(el) {
return {
x: el.offsetLeft + el.offsetWidth / 2,
y: el.offsetTop + el.offsetHeight / 2
};
}
function getDistance(a, b) {
const from = getPosition(a);
const to = getPosition(b);
return {
//https://stackoverflow.com/a/17628488/529024
distance: Math.hypot(from.x - to.x, from.y - to.y),
angle: Math.atan2(to.x - from.x, from.y - to.y) * 180 / Math.PI,
position: {
start: from,
end: to
}
}
}
function init(){
// Get values and elements then set style
const values = getDistance(
document.getElementById("start"),
document.getElementById("end")
);
let wrapper = document.getElementById('wrapper');
let arrow = document.getElementById('arrow');
let bottom = wrapper.offsetHeight - values.position.start.y;
arrow.style.height = values.distance + "px";
arrow.style.transform = `rotate(${values.angle}deg)`;
arrow.style.bottom = bottom + "px";
arrow.style.left = values.position.start.x + "px";
}
init();
window.addEventListener('resize', function(){
init();
});#wrapper {
position: relative;
left: 50px;
top: 100px;
}
#arrow {
position: absolute;
width: 2px;
background-color: red;
transform-origin: bottom center;
}
#arrow::before {
position: absolute;
height: 0px;
width: 0px;
border: 6px solid transparent;
border-bottom: 8px solid red;
content: "";
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}<div id='wrapper'>
<div id='arrow'></div>
<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>
</table>
</div>