Рисование линий на холсте из For-L oop в Typescript не отображается - PullRequest
Новая
       16

Рисование линий на холсте из For-L oop в Typescript не отображается

0 голосов
/ 06 мая 2020

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

Я пытался получить очень простой график ... линейный график.

Однако использование for-l oop внутри моего проекта машинописного текста не дает результатов.

Посмотрите исходный код ниже, вы можете увидеть, что у меня есть журналы консоли, в которых мне нужно подтвердить, что происходит действие. Все они работают нормально и в идеальном порядке в моем проекте машинописного текста.

Фрагмент, вызывающий у меня проблемы:

g.px и g.py - мои координаты. Они берутся из этого массива (это примерный массив продаж пиццы): 

const pizzas = {
    x: [0, 5, 10, 15, 20, 25, 30, 35, 40],
    y: [0, 1, 2, 3, 4],
    px: [0, 5.2, 7, 20.9, 34.3, 39.5],
    py: [0, 1.1, 1.3, 2.7, 3.5, 3.9]
};

// Draw Numbers
if (g.px.length == g.py.length) {
    console.log("confirm");
    for (var i = 1; i < g.px.length + 1; i++) {
        if (i == 1) {
            console.log("start");
            ctx.beginPath();
            ctx.moveTo(g.px[i], g.py[i]);
        } else if (i < g.px.length) {
            console.log("continue");
            ctx.lineTo(g.px[i], g.py[i]);
        } else {
            console.log("draw");
            ctx.stroke();
        }
        console.log(i);
    }
}

Теперь посмотрите на картинку ниже, все работает нормально: enter image description here

1 Ответ

1 голос
/ 06 мая 2020

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

        ctx.beginPath();
        ctx.moveTo(-40, -40);
        ctx.lineTo(40, -40);
        ctx.lineTo(40, 40);
        ctx.lineTo(-40, 40);
        ctx.stroke();

непосредственно перед тем, как вы начнете рисовать линию, которая на самом деле показывает некоторые результаты. Если я везде поменяю g.py[i] на -g.py[i], то в левый нижний угол графика добавится небольшая линия. Надеюсь, это поможет!

the result

...