javascript - 在 HTML 上方绘制箭头-6ren

javascript - 在 HTML 上方绘制箭头

转载作者：行者123 更新时间：2023-12-03 23:25:35

24

4

我有一个 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>

如果您调整浏览器的大小，箭头应该停留在(新的)开始/结束位置。

最佳答案

使用一点 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>

关于javascript - 在 HTML 上方绘制箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58802826/

24

4

0

文章推荐： php - Wordpress 插件 - 删除停用时创建的页面

文章推荐： read-the-docs - 构建失败 Sphinx 错误 contents.rst 未找到

文章推荐： apache-flex - 什么导致 Flash 错误 #2012(无法实例化类)？

文章推荐： .net - 你是如何使用 Machine.config 的，或者你是？

cocoa - 光标位于 sibling 上方
假设有一个具有非常简单的 UI 层次结构的窗口，它只有两个同级: NSTextView 和 NSButton，并且它们确实重叠。我的问题是，为什么光标悬停在按钮上时会有所不同，具体取决于其下方是否有
delphi - 如何将组件放置在 TMainMenu 上方？
例如，当我将 TPanel 添加到表单并使用 alTop 对齐它，然后将 TMainMenu 添加到同一表单时，主菜单位置会覆盖面板位置，以便主菜单保持在窗体的最顶层，面板显示在其下方。是否可以覆盖
layout - 将固定小部件放在 TabBarView 上方
我想构建一个 UI，其中我在屏幕顶部有一些固定的小部件(在所有选项卡上可见)，然后在它们下面我想要一个 TabBarView(底部有选项卡栏)，这是否可能而不使您的自己的标签小部件还是 TabBarV
javascript - 玩家悬停在平台 Sprite 上方
我一直在这里关注 Phaser 3 的介绍 http://phaser.io/tutorials/making-your-first-phaser-3-game并发现我的 Angular 色“悬停”在
iphone - 如何使可视键盘出现在我的 UIToolBar 上方？
我在 View 中间有一个 UITextView，在 View 底部有一个 UIToolBar。当我触摸 UITextView 时，我希望在 UIToolBar 上方出现一个可视键盘。我该怎么做？最
Java - 将标签定位在 GridLayout 上方
我正在尝试制作井字游戏，我有一个 3 x 3 按钮网格，但我想在按钮上方有一个栏，显示分数和玩家姓名，有人可以帮助我吗？到java，不知道从哪里开始。 import javax.swing.*; im
noUiSlider - 将两个工具提示都放在 slider 上方？
是否可以指定 noUiSlider 绘制的工具提示的位置？似乎默认情况下它将第一个放在 slider 上，第二个放在下面。我理解这里的可用性目标，但我想把两者都放在上面或下面。示例(带有上方和下方的
java - 如何将操作栏导航下拉菜单放置在主详细布局中第二个 fragment 上方
我的应用程序中有主详细布局(参见左图): 我为操作栏设置了导航模式列表(使用它来过滤第二个 fragment 中的 ListView ): final ActionBar actionBar = ge
ios - 如何将导航栏或其他东西放在 XLPagerTabStrip 上方
我是 iOS 编程新手，在使用 XLPagerTabStrip(github.com/xmartlabs/XLPagerTabStrip) 时遇到了困难。我按照它的教程，成功在VC的顶部添加了Page
swift - 将图像放置在 map 上方
这个问题适用于任何项目，但在这种情况下，我想将我的图像放置在 map 上方，目前它位于 map 下方。我是 swift 1.2 的新手，所以我不知道如何组合一个示例，任何帮助将不胜感激。最佳答案
javascript - 如何确定元素是否在视口(viewport)上方？
我如何在 javascript 中确定一个元素是否在视口(viewport)上方(用户已经滚动过它)(不仅仅是它是否可见)？在这段代码中: 控制台日志(iselement1aboveviewport
ios - 我的工具栏不会显示在 webView 上方
我正在尝试将工具栏添加到我的 View Controller 。我的 View Controller : -(void)loadView { UIWebView *webView = [[U
ios - 希望将内容固定在视差标题下方的分段 Controller 上方
我知道这是一个一般性问题，但任何方向都会有所帮助。所以我正在使用这个模块 https://github.com/maxep/MXSegmentedPager尝试重新创建 Twitter 的个人资料页
html - 如何将保存按钮放在 div 上方
我需要在保存按钮下放置一个带有 id 的 div。这是 html 代码: save 这是我的 : 通过这种方式，div 隐藏了按钮，我的目的是在 div 上方显示按钮。
ios - 下拉刷新文本放置在 tableview 上方
我试图将我的整个 refreshControl 放在 tableview 后面。我可以通过这样做来放置实际的微调器: self.tableView.addSubview(refreshContro
html - 为什么我的列表项显示在其父
上方？
这在 Safari 和 Firefox 中都会发生。我的导航栏看起来像这样: Test 相关的 CSS 看起来像: li { float: left } a:hover {
css - 为什么框阴影不显示在页脚 div 上方？
我在 CSS 中的 #footermain div 上有一个框阴影，但我无法让它显示在绿色页脚上方。我什么都试过了，还是想不通。 #footermain { background: #1f6c
css - 将图像放在旋转 slider 上方
我试图将图像部分放置在旋转 slider 上方( slider 上侧的一部分应该被图像覆盖)我试过 image{position:relative; z-index:10; } slider{posi
html - 向下滚动时内容显示在固定 div 上方
我认为这是一个简单的问题，但我无法理解它。我在页面顶部有一个固定的 div，当我向下滚动查看内容时，内容(文本)显示在该固定 div 上方 5 像素的边距中。该边距(黑色，请参阅 https://js
jquery - 悬停时显示在 div 上方
我有两个 div，在页脚配置中。目的是在悬停时通过显示隐藏的 div 向上扩展页脚。 #extendedFooter, #test { display: none; } #standardFo

首页

博学

6Ren·AI

商城

javascript - 在 HTML 上方绘制箭头