Question

我正在制作一个程序，根据用户输入的数据绘制一条线。（它基于斜率形式/等式）。我正在使用Canvas来绘制我的等式。我一直有一个问题，以一种方式绘制方程，使其适应缩放（这取决于输入数字的大小。）

如果画布缩放，如何使绘制的方程（线）符合图形？

这是我的代码：

var c=document.getElementById("graph_");
var ctx=c.getContext("2d");
graph_.style.backgroundColor="white";

// This is used to define the parameters of the canvas. Variables a and b are the x and y intercepts of the linear function.

var z0=Math.max(Math.abs(a),Math.abs(b));
var z=Math.round(z0);           
var z1=Math.round(z);
var z2=z*2
// alert(z1);           
// alert(z2);`

//The code below is used to properly scale the canvas and lines so they can accomodate larger numbers   
var scale = 2*z/360;
var offsetX = 150;
var offsetY = 75


ctx.translate((-c.width /2 * scale) + offsetX,(-c.height / 2 * scale) + offsetY);                   
ctx.scale(scale,scale);    


        var lw = scale/2
        var xnew = 360/2+360/2*a
        var ynew = 360/2-360/2*b
        alert(xnew);    
        alert(ynew);

        //The two lines drawn below are the axises of the graph

                    ctx.lineWidth = 2/lw;
                        ctx.beginPath()
                    ctx.moveTo(150, 40000*-1);
            ctx.lineTo(150, 40000);
        ctx.closePath();

        ctx.lineWidth = 1/lw;
        ctx.moveTo(400000*-1, 75);
        ctx.lineTo(40000, 75);
        ctx.strokeStyle = "#8B8682";
        ctx.stroke();
        ctx.closePath();

        //var xmax = 400000 - b 
        //var xmax1 = xmax/s
        //var ymax =    400000*s
        //var ymax1 = ymax + b

// The code below graphs the equation. 

          ctx.beginPath();
          ctx.lineWidth = 1/lw;
                  ctx.moveTo(xnew, 180);
          ctx.lineTo(180, ynew);
          // ctx.lineTo(xmax, ymax)
          // ctx.lineTo(xmax*-1, ymax*-1)
          ctx.strokeStyle = "red";
          ctx.stroke();

以下是整个页面的编码：正如你所看到的那样，如果画出来的话，它就不会变得足够长。（线性线总是无穷大，所以线应该穿过整个图，而不是一小部分。）

var canwith=360
var canheight=360

// alert(window.innerWidth)

 function doSolve() {
var s=''
var x1 = document.getElementById('x1').value
var y1 = document.getElementById('y1').value
var x2 = document.getElementById('x2').value 
var y2 = document.getElementById('y2').value 
var m 
var b
var a 

    try {
        if ((x2 - x1)==0) {
            m='Undefined'
            b='Undefined'
            a=x1 
        } else {
            m = (y2 - y1)/(x2 - x1)
            b = (y2-x2*m)
            a = (-b/m)
        }


        s += 'Coordinates are: ('
        s += x1
        s += ','
        s += y1
        s += '),('
        s += x2
        s += ','
        s += y2
        s += ')'
        s += '<br>Slope:'
        s += m
        s +='<br>y intercept:'
        s += b
        s += '<br>x intercept:' 
        s += a

        if (m=='undefined') {
            s += '<br>Equation: x = ' + x1      
        } else {
            s += '<br>Equation: y = '
            if (m!=0) {
                if (m!=1) {
                    s += m + 'x' 
                } else {
                    s += 'x' 
                }
            }
            if (b!=0) {
                if (b>0) {
                    s += ' + ' + b
                } else {
                    s += ' - ' + b*-1
                }
            }
        }

        document.getElementById('outputx').innerHTML=s

    } catch (e) {alert(e.message)}  

    try {

        var c=document.getElementById("graph_");
        var ctx=c.getContext("2d");
        graph_.style.backgroundColor="white";
        var z0=Math.max(Math.abs(a),Math.abs(b));
        var z=Math.round(z0);           
        var z1=Math.round(z);
        var z2=z*2
        // alert(z1);   
        // alert(z2);

           var scale = 2*z/360;
           var offsetX = 150;
           var offsetY = 75


    ctx.translate((-c.width /2 * scale) + offsetX,(-c.height / 2 * scale) + offsetY);                   
    ctx.scale(scale,scale);    


        var lw = scale/2
        var xnew = 360/2+360/2*a
        var ynew = 360/2-360/2*b
        alert(xnew);    
        alert(ynew);


        ctx.lineWidth = 2/lw;
        ctx.beginPath()
        ctx.moveTo(150, 40000*-1);
        ctx.lineTo(150, 40000);
        ctx.closePath();

        ctx.lineWidth = 1/lw;
        ctx.moveTo(400000*-1, 75);
        ctx.lineTo(40000, 75);
        ctx.strokeStyle = "#8B8682";
        ctx.stroke();
        ctx.closePath();

        var xmax = 400000 - b 
        var xmax1 = xmax/s
        var ymax =  400000*s
        var ymax1 = ymax + b

          ctx.beginPath();
          ctx.lineWidth = 1/lw;
          ctx.moveTo(xnew, 180);
          ctx.lineTo(180, ynew);
          ctx.lineTo(xmax, ymax)
          ctx.lineTo(xmax*-1, ymax*-1)
          ctx.strokeStyle = "red";
          ctx.stroke();                                         

    } catch (e) {alert(e.message)}

}

Answer 1

我无法处理您的代码，因此我根据您的视觉要求制作了自己的实现，希望这可以解决问题：

try {
    var c = document.getElementById("graph_");
    var ctx = c.getContext("2d");
    graph_.style.backgroundColor="white";

    var w = c.width;
    var h = c.height;

    var xAxisSize = 40;
    var yAxisSize = 40;    

    var scaleFactorX = w / xAxisSize;
    var scaleFactorY = -(h / yAxisSize);        

    var offsetX = -10;
    var offsetY = -10;

    ctx.scale(scaleFactorX, scaleFactorY);
    ctx.translate((xAxisSize / 2) + offsetX, -((yAxisSize / 2) + offsetY));

    ctx.lineWidth = 3 / scaleFactorX;
    ctx.beginPath();
    ctx.moveTo(-xAxisSize, 0);
    ctx.lineTo( xAxisSize, 0);
    ctx.strokeStyle = "#8B8682";        
    ctx.stroke();
    ctx.closePath();

    ctx.lineWidth = 3 / scaleFactorY;
    ctx.beginPath();
    ctx.moveTo(0, -yAxisSize);
    ctx.lineTo(0,  yAxisSize);
    ctx.strokeStyle = "#8B8682";
    ctx.stroke();
    ctx.closePath();

    ctx.lineWidth = 3 / scaleFactorY;
    ctx.beginPath();
    var xx1 = -xAxisSize - offsetX;
    var yy1 = m * xx1 + b;
    var xx2 =  xAxisSize + offsetX;
    var yy2 = m * xx2 + b;        
    ctx.moveTo(xx1, yy1);
    ctx.lineTo(xx2,yy2);
    ctx.strokeStyle = "red";
    ctx.stroke();
    ctx.closePath();  
} catch (e) { 
    alert(e.message) 
}

enter image description here

我该如何使这条线工作？

1 个答案: