이 라인을 어떻게 만들 수 있습니까?

Question

나는 사용자가 입력 한 데이터를 바탕으로 선을 그려주는 프로그램을 만들고있다. (기울기 양식/방정식을 기반으로합니다). 내 방정식을 그래프로 나타 내기 위해 캔버스를 사용하고 있습니다. 나는 스케일링에 적응할 수있는 방식으로 방정식을 그래프로 표시하는 데 문제가있다. (입력 된 숫자의 크기에 기반한다.)

그래프에 맞는 그래프 방정식을 만들 수있는 방법 캔버스가 비늘처럼? 그것이해야처럼 당신이 전혀 그려 경우, 선을 볼 수있는 충분한 시간이되지 않기 때문에 :

여기

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