HTML и SVG, как переместить только одну конечную точку строки щелчком мыши? - PullRequest
Новая
       1

HTML и SVG, как переместить только одну конечную точку строки щелчком мыши?

0 голосов
/ 07 мая 2018

Я пытался найти способ переместить только один конец линии, но он продолжает менять контейнер и, таким образом, перерисовывать всю линию и перемещать ее.

Вот скрипка JS: https://jsfiddle.net/h2nwygu8/1/

<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Review Race</title>
  </head>

  <body>
    <div class="wrapper">
      <section>
        <h1>Line Test</h1>
        <div id="canvas" style="width: 960px; height:410px; border: 4px solid lime;">
          <svg id="svgContainer" xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute; top:95px; width:960px; height:410px;">
                    <line id="start_line" x1="10" y1="0" x2="10" y2="960" style="stroke:rgb(255,0,0);stroke-width:3;" />
                    </svg>
        </div>
      </section>
    </div>
  </body>

</html>

и JavaScript: 

function placeLine(e) {
  var d = document.getElementById('start_line');

  posY = e.clientY;
  posX = e.clientX;
  d.setAttribute("y1", posY)
  d.setAttribute("x1", posX)
}

document.addEventListener("click", placeLine);

Я хотел бы, чтобы верх красной линии перемещался по зеленой рамке в положение мыши x, y. Нижняя часть линии не должна двигаться. Однако с каждым кликом контейнеры меняются и перемещаются по всей линии. Вы также можете увидеть, что есть несколько проблем со смещением с помощью мыши x, y и линии. Единственное ограничение заключается в том, что линия должна иметь возможность накладываться поверх контейнера с зеленой границей.

Какой лучший способ сделать это? Спасибо.

1 Ответ

0 голосов
/ 07 мая 2018

Вы перепутали высоту и ширину в отношении свойств x2 и y2. Он должен начать работать больше, чем вы ожидаете, если вы измените y2, чтобы он был равен вашему росту (410px).

См .: https://jsfiddle.net/zukrtpyg/.

HTML: 

<div id="canvas" style="width: 960px; height:410px; border: 4px solid lime;">
   <svg id="svgContainer" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:960px; height:410px;">
       <line id="start_line" x1="0" y1="0" x2="0" y2="410" style="stroke:rgb(255,0,0);stroke-width:3;" />
   </svg>
</div>

Javascript: 

function placeLine(e) {
  var d = document.getElementById('start_line');

  posY = e.offsetY;
  posX = e.offsetX;
  d.setAttribute("y1", posY)
  d.setAttribute("x1", posX)
}

document.getElementById('canvas').addEventListener("click", placeLine);

Я также удалил объявления top и position в элементе canvas, из-за которых линия проходила за зеленую границу снизу.

Наконец, я изменил прослушиватель кликов на элементе canvas, чтобы вы могли использовать offsetX и offsetY событий, чтобы расположить линию по отношению к элементу canvas, которому и сопоставлены координаты пути. на первом месте.

Использование позиций clientX и clientY пытается разместить ее относительно страницы, которая не соответствует той позиции, на которой вы хотите, чтобы она находилась на холсте.

На самом деле вы все еще можете использовать позиции clientX и clientY, вам просто нужно компенсировать их положением x и y элемента canvas по отношению к странице. Вы можете узнать их, используя Element.getBoundingClientRect () . См. https://jsfiddle.net/th0aLcx0/ для примера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...