Question

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

我的图表是通过将数据转换为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;

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

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

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

理想情况下，我想找到一种方法来使用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并向上增加。

如果您正在使用其他转换，请将此转换置于其他转换之前。

在Javascript中绘制图形时处理反转的Y轴？

1 个答案: