我該如何使這條線路工作？

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

我couln't應付你的代碼，所以我做了我自己實施調整到您的視覺要求，希望此問題解決了：

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