在 Javascript 中绘图时处理倒置的 Y 轴？

Question

我正在使用内置于画布功能的 Javascript 绘制一个图表，显示基于用户输入的房屋贷款支付、贷款余额和净值。 我无法使用任何其他形式的绘图包，因为代码是评估的一部分。

我的图形是通过将数据转换为 X 和 Y 坐标来绘制的。 当输入贷款价格时，一些住房贷款支付方程计算支付的总金额，除以画布宽度以获得间距变量。 此间距变量用于将美元金额转换为画布上的像素。 类似的设置用于获取年和月间隔像素。

我遇到的问题是 Javascript 画布上的 Y 轴是倒置的，0 是画布的顶部，280 是我的画布高度，在底部。 到目前为止，我已经能够解决这个问题，只需交换“+”和“-”运算符，但是，我目前正在创建在图表上绘制贷款余额线的代码，并且反转导致了我遇到的问题好像解决不了可能是我没有看到的简单问题，或者可能是需要解决的更复杂的问题，但无论哪种方式，我都无法弄清楚。

X = 0; // same as before, iterators both set back to 0 for the new line.
            iterator = 0;
            c.beginPath // this next line is for loan balance, it starts at 300000 and goes down with each payment made, then back up with each bit of interest accrued.
            // due to the fact that the y axis begins at the top, this means that the pixels for payments is added to the pixel count, and the interest accrued is taken away.
            c.moveTo(0, loanLocation) // set starting point to x=0 y= loanLocation
            while (X <= 510)// loan balance loop
            {
                X = X + 0.001; // iterates X by .001 each time, allowing an accurate subpixel resolution loop, see above for why this is needed.
                iterator = iterator + 0.001;
                if (iterator >= monthSpacing)
                {
                    loanBalance = loanBalance - monthlyPayment + (monthlyInterest * loanBalance);
                    //alert(loanBalance);
                    //interestY = 
                    //alert(interestY);
                    //alert(X + " " + monthSpacing);
                    loanY = loanY + paymentY - (loanY * monthlyInterest);
                    //alert(loanY);
                    //loanY = loanBalance * paySpacing;
                    c.lineTo(X, loanY);
                    iterator = 0;
                }
            }
            c.strokeStyle = "black"
            c.stroke(); // there is no fill for this line, so it is just left as a stroke.

这是绘制线条的代码集，上面是这里使用的一些变量：

var X = 0;
var iterator = 0;
var monthSpacing = yearSpacing / 12;
//alert(yearSpacing);
//alert(monthSpacing);
var monthlyInterest = interest/1200; // this gives the montly interest rate, the monthly interest pixel amount is below
//alert(monthlyInterest);//debugging, comment out.
var paymentY = monthlyPayment * paySpacing;
var interestY = monthlyInterest * paySpacing; // this is inaccurate, the interestY needs to be gotten by multiplying the remaining loan balance by the 
//monthly interest each month.
//var interestY; // will be used further down, must be calculated monthly so cannot be set outside of the line drawing loops.
var totalY = 280;
var equityY = 280;
var loanBalance = loan;
var loanY = loanLocation;

运行时，我得到了期望结果的奇怪反转，我希望贷款余额线向下弯曲到零，但相反，曲线发生在相反的方向，我尝试了两种不同的方法来获取坐标，贷款余额方式，涉及处理美元值并将其转换为像素，以及贷款方式，涉及直接处理像素值。

贷款余额提供了一条与所需线完全相反的线，它从贷款价值开始，并以与我想要的完全相反的方向向上弯曲，我相信我用于贷款余额方法的数学是准确的，由于 Y 轴的倒置性质，我根本无法想出一种将美元价值转换为像素的方法。

贷款Y提供了一条“向下”的线，但以越来越短的速度向下弯曲，这使我相信虽然正在准确计算每月还款的减法（由于倒置而增加），但加法（减法）月利息计算不正确。 乘法不能像加法和减法那样简单地用除法代替，因此将这个值转换为像素是很困难的。 由贷款方式绘制的线肯定受到反演的影响，但不是所需线的完美反演，用于这种方式的数学显然是非常错误的。

理想情况下，我想找到一种使用loanY方式的方法，它与程序的其余部分一致，并且可以在不使用诸如美元之类的明显值时使用。 如果必须的话，我将使用loanBalance 方式。

如果您不完全确定我在问什么，或者正在使用的代码是什么，如果有帮助，我可以完整地发布程序。 我还没有这样做，因为我不想比我已经拥有的问题更混乱。

Answer 1

您可以更改为笛卡尔坐标系，如下所示：

// get a reference to your canvas element (eg it might have id='myCanvas')
var canvas=document.getElementById('myCanvas');

// get the context for the canvas
var context=canvas.getContext('2d');

// vertically flip the canvas so its Y origin is at the bottom
context.setTransform(1,0,0,-1,0,canvas.height);

这使得 y==0 在画布底部并向上增加。

如果您正在使用其他转换，则将此转换放在其他转换之前。