javascript - 让箭头指向特定的 (x, y) 点

Question

你好，我正在尝试让两个箭头指向特定的 (x, y) 点或按钮的一般区域。

我想要两个箭头从每个框指向按钮的一般区域。我可以在某些屏幕上使用常规 css 很好地做到这一点，但是当屏幕调整大小或变小时，箭头不再指向按钮。我只是想找出一个好的方法来处理这个问题。

所以我真正要问的是，在 2 个指向同一点的 div 之后附加两个箭头的好方法是什么。 (红场)

JSFIDDLE: https://jsfiddle.net/kxw7jquu/

HTML

<div class='app-info-panel'>
  <div class='app-info-panel-header'>
    <h1>Data-sources</h1>
  </div>

  <div class='data-source-panel-wrapper' id='source_report'>
    <h1>Report_File</h1>
    <div class='data-source-panel'>
      <div class='data-source-info'>
        <h3>Report Id</h3>
        <h2>1</h2>
      </div>
      <div class='data-source-info'>
        <h3>Report Name</h3>
        <h2>Medicine-stock</h2>
      </div>
      <div class='data-source-info'>
        <h3>Date</h3>
        <h2>02/16/18</h2>
      </div>
      <div class='data-source-info'>
        <h3>Reporter</h3>
        <h2>John Smith</h2>
      </div>
    </div>
    <div class='source-arrow' style="transform: rotate(50deg); top: -10px">
      &#10141;
    </div>
  </div>

  <div class='data-source-panel-wrapper' id='source_order'>
    <h1>Order_movement</h1>
    <div class='data-source-panel'>
      <div class='data-source-info'>
        <h2>ID: 1</h2>
      </div>
      <div class='data-source-info'>
        <h2>Medicine-stock</h2>
      </div>
      <div class='data-source-info'>
        <h2>02/16/18</h2>
      </div>
      <div class='data-source-info'>
        <h2>John Smith</h2>
      </div>
    </div>

    <div class='source-arrow' style="transform: rotate(130deg); bottom: -40px; left: 60px">
      &#10141;
    </div>
  </div>

  <div>
    <button class='data-source-button'>Order Filling</button>
  </div>

</div>

CSS

.app-info-panel {
  border-radius: 4px;
  height: 30rem;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  width: 100%;

  h1 {
    font-size: 1.5rem;
    font-weight: 500;
  }
}

.data-source-panel-wrapper {
  position: absolute;
  user-select: none;

  .source-arrow {
    position: absolute;
    left: calc(50% - 50px);
    bottom: 20px;
    font-size: 12.5rem;

    color: #D6D7D8;
    transform-origin: left;
    z-index: 1;
  }

  h1 {
    font-size: 1.4rem;
    color: #0481E2;
    text-align: center;
  }
}

.data-source-panel {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 1rem;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  z-index: 2;

  .data-source-info {
    h3 {
      color: #0481E2;
      margin-top: 0;
      margin-bottom: 3px;
      font-size: .8rem;
      line-height: normal;
    }

    h2 {
      margin: 0;
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
    }
  }
}

#source_report {
  .data-source-panel {
    .data-source-info {
      margin-right: 18px;
    }
  }
}

#source_order {
  right: 60px;

  .data-source-panel {
    flex-direction: column;

    .data-source-info {
      margin: 5px 0;
    }
  }
}

.data-source-button {
  display: block;
  width: 220px;
  height: 68px;
  font-size: 1.25rem;
  margin: 18.75rem auto 0;
  color: white;
  background-color: #FF9700;
}

Answer 1

我不是一个真正的数学爱好者，我设法在互联网上找到一个公式来做你想做的事。

来源Pen我没有跟随鼠标，而是跟随按钮 PS:为了便于解释，我去掉了右边的html。

我知道这不是一个完整的答案，但您可以从这里进行调整。

window.onresize = pointing;

function pointing() {

  let point = document.querySelector('.data-source-button');
  let rad = Math.atan2(point.offsetLeft, point.offsetTop);
  let left = (rad * (20 / Math.PI) * -5) + 60;


  document.querySelector('.leftArrow').style.transform = "rotate(" + left + "deg)"
}

pointing();

.app-info-panel {
  border-radius: 4px;
  height: 30rem;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  width: 100%;
}

.app-info-panel h1 {
  font-size: 1.5rem;
  font-weight: 500;
}

.data-source-panel-wrapper {
  position: absolute;
  user-select: none;
}

.data-source-panel-wrapper .source-arrow {
  position: absolute;
  left: calc(50% - 50px);
  bottom: 20px;
  font-size: 12.5rem;
  color: #D6D7D8;
  transform-origin: left;
  z-index: 1;
}

.data-source-panel-wrapper h1 {
  font-size: 1.4rem;
  color: #0481E2;
  text-align: center;
}

.data-source-panel {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 1rem;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  z-index: 2;
}

.data-source-panel .data-source-info h3 {
  color: #0481E2;
  margin-top: 0;
  margin-bottom: 3px;
  font-size: .8rem;
  line-height: normal;
}

.data-source-panel .data-source-info h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

#source_report .data-source-panel .data-source-info {
  margin-right: 18px;
}

.data-source-button {
  display: block;
  width: 220px;
  height: 68px;
  font-size: 1.25rem;
  margin: 18.75rem auto 0;
  color: white;
  background-color: #FF9700;
}

<div class='app-info-panel'>
  <div class='app-info-panel-header'>
    <h1>Data-sources</h1>
  </div>

  <div class='data-source-panel-wrapper' id='source_report'>
    <h1>Report_File</h1>
    <div class='data-source-panel'>
      <div class='data-source-info'>
        <h3>Report Id</h3>
        <h2>1</h2>
      </div>
      <div class='data-source-info'>
        <h3>Report Name</h3>
        <h2>Medicine-stock</h2>
      </div>
      <div class='data-source-info'>
        <h3>Date</h3>
        <h2>02/16/18</h2>
      </div>
      <div class='data-source-info'>
        <h3>Reporter</h3>
        <h2>John Smith</h2>
      </div>
    </div>
    <div class='source-arrow leftArrow' style=" top: -10px">
      &#10141;
    </div>
  </div>



  <div>
    <button class='data-source-button'>Order Filling</button>
  </div>

</div>