-6

У меня есть эллипс x,y этого эллипса и x,y точки куда этот эллипс должен смотреть нужно посчитать угол его поворота

введите сюда описание изображения

1
  • Код. Надо видеть код. Мы ж даже не видим как вы отрисовываете. Это канвас, свгшки, изображения или что-то еще? 10 июн 2019 в 8:03

1 ответ 1

4

Угол, на который необходимо повернуть объект, чтобы он смотрел на определенную точку, это один из двух компонентов Полярной системы координат

Для перевода из прямоугольной системы координат в полярную, а точнее для нахождения компонента угла, в javascript(и во многих других языках) есть функция Math.atan2(y, x), она возвращает угол в радианах.

В итоге для Вашего случая, и принимая за 0 центр картинки, формула для расчета угла поворота будет примерно такая.

Math.atan2(y2, x2) - Math.atan2(y1, x1)

где x1 x2 координаты черной точки, а x2 y2 координаты красной, с центром в центре эллипса.

let rnd = () => Math.random()*180-90
let pts = [{x: rnd(), y: rnd()}, {x: rnd(), y: rnd()}];
let pts2 = [pts[0], {x: 0, y: 0}, pts[1]];
let line = d3.line().x(d => d.x).y(d => d.y) 
let path = d3.select('svg').append('path').datum(pts2).attr('d', line)
d3.select('text').html(calcAngle().toFixed(1))
d3.select('svg').selectAll('circle').data(pts).enter() .append('circle')
  .attr('cx', d => d.x).attr('cy', d => d.y).attr('r', 9)
  .style('cursor','pointer').call(d3.drag().on('drag', function(d) {
    d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
    path.attr('d', line)
    d3.select('text').html(calcAngle().toFixed(1))
  }))

function calcAngle(){
  let rad = Math.atan2(pts[1].y, pts[1].x) - 
            Math.atan2(pts[0].y, pts[0].x);
  return (rad / Math.PI * 180 + 360)%360;
}
path, circle {
  fill:transparent;
  stroke:red;
  stroke-width:2px;
}

circle:hover{
  fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg viewbox="-100 -100 200 200" style="height:90vh;border:solid">
<text x=-90 y=-80></text>
</svg>

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