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 you have read our privacy policy.

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