1

У меня возникла проблема с перестроением фигуры по координатам. На канве нарисованы точки, соединенные линиями.

Фигура

При клике на канву должно происходить одновременное перемещение точек:

  • 1 -> 3
  • 2 -> 1
  • 3 -> 4
  • 4 -> 2

Проблема в том, что координаты не соответствуют заданным. Например, когда я пытаюсь переместить точку 1 в точку 3, то точка 1 оказывается в других координатах.

particles[0].update(100, 500);

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

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

Мой код здесь https://codepen.io/Stacky/pen/NmMYLo

P.S. Другая реализация с движением точек (но без линий) https://codepen.io/Stacky/pen/bJMMBX

5
  • У Вас же уже есть граф, двигайтесь по его ребрам во время интерполяции 19 апр 2019 в 15:17
  • Не совсем то, что нужно, точки должны перемещаться и тянуть за собой линии, не зависеть от них.
    – Riccu
    19 апр 2019 в 15:19
  • Возможно, будет понятней какая нужна анимация на этом примере (я брал этот код за основу). Только в моем случае координаты должны быть строгими, без рандома. codepen.io/dudleystorey/pen/NbNjjX
    – Riccu
    19 апр 2019 в 15:21
  • Ну точки едут по графу который не меняется, при этом они в каждом кадре соединены, не вижу противоречий 19 апр 2019 в 15:23
  • Если к вечеру у Вас все еще будут сложности с этим, я накидаю пример... 19 апр 2019 в 15:25

1 ответ 1

2

Вот это то, о чем я писал в комментариях, точки едут по ребрам графа, образуемого первоначальным положением точек.

let t, duration = 1000;
let graph = [2, 0, 3, 1];
let coords = [[6, 302], [330, 5], [100, 500], [10, 690]];
let links = [[0,1], [0,2], [0,3], [1,2], [2,3]]
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
let ease = t => t;
window.addEventListener('click', () => animate(t = new Date().getTime()));
draw(0);

function animate() {
    let dt = new Date().getTime() - t;
    draw(Math.min(1, ease(dt/duration)));
    dt <= duration && requestAnimationFrame(animate)
}                          
               
function draw(t) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    let pts = graph.map((to,from) => {
        let x1 = coords[from][0];
        let y1 = coords[from][1];
        return [x1 + (coords[to][0] - x1) * t, 
                y1 + (coords[to][1] - y1) * t];
    });
    pts.forEach(pt => {
        ctx.beginPath();
        ctx.arc(pt[0], pt[1], 5, 0, Math.PI*2);
        ctx.fill();
    })
    links.forEach(link => {
        ctx.beginPath();
        ctx.moveTo(pts[link[0]][0],pts[link[0]][1]);
        ctx.lineTo(pts[link[1]][0],pts[link[1]][1]);
        ctx.stroke();
    })
}
<canvas width="350" height="700"></canvas>

9
  • Спасибо за пример!
    – Riccu
    22 апр 2019 в 6:34
  • @Riccu я старался его сделать минимальным для понятности, Вам все понятно? 22 апр 2019 в 6:35
  • Да, более-менее понял.
    – Riccu
    22 апр 2019 в 6:37
  • @Riccu например я оставил место для Вашей фантазии при реализации функции сглаживания x =>x 22 апр 2019 в 6:38
  • @Riccu не стесняйтесь спросить, если что, с радостью отвечу 22 апр 2019 в 6:39

Ваш ответ

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

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