3

Я нашел код на fiddle, который при движении мыши рисует (щелчок и перемещение линии). Мое требование - обвести прямоугольник на SVG движением мыши таким же образом.
Возможно ли это, если да, то как?

//Canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
//Variables
let canvasx = canvas.offsetLeft;
let canvasy = canvas.offsetTop;
let last_mousex = 0;
let last_mousey = 0;
let mousex = 0;
let mousey = 0;
let mousedown = false;

//Mousedown
canvas.onmousedown = ({
  clientX,
  clientY
}) => {
  last_mousex = parseInt(clientX - canvasx);
  last_mousey = parseInt(clientY - canvasy);
  mousedown = true;
};

//Mouseup
canvas.onmouseup = () => mousedown = false;


//Mousemove

canvas.onmousemove = ({
  clientX,
  clientY
}) => {
  mousex = parseInt(clientX - canvasx);
  mousey = parseInt(clientY - canvasy);
  if (mousedown) {
    ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
    ctx.beginPath();
    const width = mousex - last_mousex;
    const height = mousey - last_mousey;
    ctx.rect(last_mousex, last_mousey, width, height);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 10;
    ctx.stroke();
  }
};
canvas {
  cursor: crosshair;
  border: 1px solid #000000;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>

  <canvas id="canvas" width="800" height="500"></canvas>

</body>

</html>

Свободный перевод вопроса How to draw a rectangle on SVG with mouse move? от участника @dota2pro.

1

1 ответ 1

4

Чтобы полностью имитировать поведение подхода canvas, который позволяет рисовать прямоугольник путем щелчка и перетаскивания в любом направлении (например, от нижнего правого угла к верхнему левому или наоборот), вам необходимо условно обработать x, y, width и значения height, основанные на положении текущих координат мыши относительно точки начального перемещения мыши.

Кроме того, приведенный ниже фрагмент включает функцию, которая возвращает правильные координаты, если вы «рисуете» преобразованный элемент SVG (или преобразованный дочерний элемент).

const svg = document.querySelector('#svg');

const svgPoint = (elem, x, y) => {
  let p = svg.createSVGPoint();
  p.x = x;
  p.y = y;
  return p.matrixTransform(elem.getScreenCTM().inverse());
}

svg.addEventListener('mousedown', (event) => {
  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  const start = svgPoint(svg, event.clientX, event.clientY);

  const drawRect = (e) => {
    let p = svgPoint(svg, e.clientX, e.clientY);
    let w = Math.abs(p.x - start.x);
    let h = Math.abs(p.y - start.y);
    if (p.x > start.x) {
      p.x = start.x;
    }

    if (p.y > start.y) {
      p.y = start.y;
    }

    rect.setAttributeNS(null, 'x', p.x);
    rect.setAttributeNS(null, 'y', p.y);
    rect.setAttributeNS(null, 'width', w);
    rect.setAttributeNS(null, 'height', h);
    svg.appendChild(rect);
  }

  const endDraw = (e) => {
    svg.removeEventListener('mousemove', drawRect);
    svg.removeEventListener('mouseup', endDraw);
  }
  
  svg.addEventListener('mousemove', drawRect);
  svg.addEventListener('mouseup', endDraw);
});
svg {
  cursor: crosshair;
  border: 1px solid #000000;
}

rect {
  fill: none;
  stroke: #000000;
  stroke-width: 10;
}
<svg id="svg" width="800" height="500"></svg>

Свободный перевод ответа от участника @benvc.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.