Получение неподходящего ограничения пути в сафари - PullRequest
Новая
       9

Получение неподходящего ограничения пути в сафари

0 голосов
/ 03 октября 2018

На самом деле, я хочу сделать поле выбора на пути.

Чтобы создать коробку, мне нужно найти реальные границы этого пути, но я получаю неподходящие ограничения только для сафари.где я использую getScreenCTM() функцию d3.select("path").node().Я также пытался использовать функцию getBBox(), но это дало неверный результат после масштабирования или панорамирования основного SVG.

.

let section  = d3.select("path");
d3.select("#boundingClientRect").on("click", () => {
	let bounding = section.node().getBoundingClientRect();
  d3.select('rect').remove()
  d3.select("svg").append('rect')
    .attr('x', bounding.top)
    .attr('y', bounding.left)
    .attr('fill', '#ff45455a')
    .attr('stroke-width', 2)
    .attr('width', bounding.width)
    .attr('height', bounding.height)
  
})

d3.select("#screenCTM").on("click", () => {
	let bounding = section.node().getBoundingClientRect();
  let screenCTM = section.node().getScreenCTM();
  Object.defineProperty(bounding, 'bottom', {
    value: (bounding.top - section.node().getScreenCTM().f + section.node().getCTM().f) + bounding.height
  });
  Object.defineProperty(bounding, 'top', {
    value: (bounding.top - section.node().getScreenCTM().f + section.node().getCTM().f)
  });
  d3.select('rect').remove()
  d3.select("svg").append('rect')
    .attr('x', bounding.top)
    .attr('y', bounding.left)
    .attr('fill', '#ff45455a')
    .attr('stroke-width', 2)
    .attr('width', Math.abs(bounding.right - bounding.left))
    .attr('height', Math.abs(bounding.top - bounding.bottom))
  
})
#tool{
  position:fixed;
  left:20px;
  top:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="tool">
<button id="boundingClientRect" >
getBoundingClientRect
</button>
<button id="screenCTM" >
getScreenCTM
</button>
</div>
<svg height="1000" width="1000">
<path class="section" stroke-linejoin="round" fill="#dddddd" stroke="#aaaaaa" stroke-width="1" d="M 288.50631321538214 239.24248598815532 L 288.50631321538214 239.24248598815532 L 801.3579069918218 228.30165198759127 L 823.2395749929499 520.9689615026793 L 280.3006877149591 527.8069827530319  Z">  
</path>
</svg>

Не могли бы вы помочь мне разобраться?

...