从 Typescript 中的 For 循环在画布上绘制线条不会呈现

Posted 2023-03-13

【中文标题】从 Typescript 中的 For 循环在画布上绘制线条不会呈现

【英文标题】：Drawing Lines on a Canvas from a For-Loop in Typescript doesnt render

【发布时间】：2020-08-20 19:37:50

【问题描述】：

我当时是为了好玩而制作了一个绘图工具，然后它变成了一个真正的项目......

我试图实现一个非常简单的图形......一个折线图。

但是，在我的 typescript 项目中使用 for 循环不会产生任何结果。

查看下面的源代码，您可以看到我有控制台日志，我需要在其中确认某个操作正在发生。在我的 typescript 项目中，它们都运行良好且顺序完美。

由于 SO 不支持 typescript，这里有一个带有 完整源代码和 typescript 编译器的 codepen： https://codepen.io/SkylerSpark/pen/zYvpWNZ

导致我出现问题的代码段：

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);
    

现在看下图，它运行良好：

【问题讨论】：

如果有人好奇的话，控制台中删除的警告是 codepen 的非法同站点 HTTP Cookies

【参考方案1】：

问题是您的 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]，则会在图表的左下方添加一条小线。希望这会有所帮助！

【讨论】：

facepalm 我完全忘记了 -y 的事情......昨天下午我一直在玩负数和正数数学，只是为了让这些数字正确呈现。估计我的脑子太糊了。现在我知道了，我实际上可以计算 x 和 y 的实际位置并绘制 em