Как получить точку пересечения (x, y) на пути SVG - PullRequest
Новая
       40

Как получить точку пересечения (x, y) на пути SVG

0 голосов
/ 28 апреля 2020

У меня есть путь SVG, и я хочу получить координату точки y.

enter image description here enter image description here

SVG-линия : 

<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="340" viewBox="0 0 1920 340">
  <path clip-rule="evenodd" fill="none" stroke="#B3B3B3" stroke-miterlimit="10" d="M-.5 60.3c88.8-42 232.2-89.1 355.2-34.4C549.3 112.5 640.3 163 720.3 192.4c80 29.4 278.9 116.9 451.3 61.4 172.3-55.4 328-112.5 568.3-23.2 100.1 43 151.4 65.8 179.6 79.3"/>
</svg>

Я пытаюсь этот код ответа , но он не соответствует моим потребностям. Я думаю, что path.getTotalLength() не подходит для моего вопроса.

Как я могу это сделать?

Обновление:

Что хочет сделать мой проект: JSFiddle

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

1 Ответ

0 голосов
/ 28 апреля 2020

Предлагаю попробовать бумагу js. Это графическая библиотека JS, которая использует элементы HTML <canvas> в качестве своих графических контекстов. Вот пример использования вашей кривой и вертикальной линии в mouse.x, пересечения которых показаны. 

let wave_path
let bounds

window.onload = function() {
  //paper is a library for working with canvases; it's like a graphics library that works with a canvas
  //as its GUI window. Each canvas context is its own PaperScope, and the global paper variable is a reference
  //to the currently active PaperScope.
  paper.setup(document.getElementById('paper-canvas'))

  //import wave svg. however, if you integrate paperjs into your page, you might as well draw the curve directly onto the
  //canvas with paper, rather than creating an invisible svg element that you then import.
  let wave_svg = paper.project.importSVG(document.getElementById('svg-wave'))
  wave_svg.visible = true // Turn off the effect of display:none

  //fit wave into paper canvas
  bounds = paper.view.bounds
  wave_svg.fitBounds(bounds)

  wave_path = wave_svg.children[0] //get contained path
  wave_path.strokeColor = 'black'
  wave_path.fillColor = null

  //set event handlers on paper canvas
  paper.view.onMouseMove = mouse_move
}

function mouse_move(event) {
  let mouse_location = event.point

  //clear canvas before redrawing
  paper.project.clear()

  //when creating a graphical object with paper, it automatically gets drawn to the canvas at the end of an event handler

  //draw vertical line to intersect with
  let line = new paper.Path(new paper.Point(mouse_location.x, 0), new paper.Point(mouse_location.x, bounds.height))
  line.strokeColor = 'black'

  //redraw wave path
  new paper.Layer(wave_path)

  //draw intersections
  let intersections = line.getIntersections(wave_path)
  for (intersection of intersections) {
    let circle = new paper.Path.Circle(intersection.point, 5)
    circle.strokeColor = 'red'
    circle.fillColor = 'white'
  }
}
<!DOCTYPE html>
<html>
	<head>
		<title>SVG Intersection Demo</title>
		
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-core.min.js"></script>
	</head>
	<body>
		<svg id="svg-wave" style="display:none;" xmlns="http://www.w3.org/2000/svg" width="1920" height="340">
		  <path clip-rule="evenodd" fill="none" stroke="#B3B3B3" stroke-miterlimit="10" d="M-.5 60.3c88.8-42 232.2-89.1 355.2-34.4C549.3 112.5 640.3 163 720.3 192.4c80 29.4 278.9 116.9 451.3 61.4 172.3-55.4 328-112.5 568.3-23.2 100.1 43 151.4 65.8 179.6 79.3"/>
		</svg>
		<div style="text-align:center;">
			<canvas id="paper-canvas" style="width:80%;"></canvas>
		</div>
	</body>
</html>
...