제한된 공간에서 경사 선 그리기

Question

저는 X 축과 Y 축, 그리고 각각 steepest, average 및 flattest 경사에 대해 하나의 선을 그릴 필요가있는 50x50 픽셀 공간을 가지고 있습니다.

필자는 문서 나 논평없이 나와 전달 된 (Java) 코드로 작업하고 있으며 이전에는 캔버스에서 작업 한 적이 없었습니다. 175x75 픽셀을 측정 한 상자의 코드는 다음과 같습니다. 위에서 설명한대로 50x50 영역에 맞게 조정해야합니다.

DrawingArea canvas = new DrawingArea(175, 75); 
    canvasContainer.add(canvas); 
    Rectangle rectangle = new Rectangle(0, 0, 174, 75); 
    canvas.add(rectangle); 
    Line slopeMainLineX = new Line(5, 70, 170, 70); 
    slopeMainLineX.setStrokeOpacity(0.5); 
    canvas.add(slopeMainLineX); 
    Line slopeMainLineY = new Line(40, 70, 40, 0); 
    slopeMainLineY.setStrokeOpacity(0.5); 
    canvas.add(slopeMainLineY); 
    steepestLine = new Line(40, 70, 0, 0); 
    steepestLine.setStrokeWidth(3); 
    canvas.add(steepestLine); 
    avgSlopeLine = new Line(40, 70, 0, 0); 
    avgSlopeLine.setStrokeWidth(2); 
    canvas.add(avgSlopeLine); 
    flattestLine = new Line(40, 70, 0, 0); 
    flattestLine.setStrokeWidth(1); 
    canvas.add(flattestLine); 

    int steepestAngle = Math.round(site.getSlope().getMax()); 
    int averageAngle = Math.round(site.getSlope().getAvg()); 
    int flatestAngle = Math.round(site.getSlope().getMin()); 

    double xPointSteepestAngle = 40 + 120 * Math.cos(steepestAngle*0.0174532925); 
    double yPointSteepestAngle = 70 + 120 * Math.sin(steepestAngle*0.0174532925); 
    double xPointAverageAngle = 40 + 120 * Math.cos(averageAngle*0.0174532925); 
    double yPointAverageAngle = 70 + 120 * Math.sin(averageAngle*0.0174532925); 
    double xPointFlatestAngle = 40 + 120 * Math.cos(flatestAngle*0.0174532925); 
    double yPointFlatestAngle = 70 + 120 * Math.sin(flatestAngle*0.0174532925); 

    steepestLine.setX2((int) xPointSteepestAngle); 
    steepestLine.setY2(70 - ((int) yPointSteepestAngle - 70)); 

    avgSlopeLine.setX2((int) xPointAverageAngle); 
    avgSlopeLine.setY2(70 - ((int) yPointAverageAngle - 70)); 

    flatestLine.setX2((int) xPointFlatestAngle); 
    flatestLine.setY2(70 - ((int) yPointFlatestAngle - 70)); 

나는 완전히 잃어 버렸기 때문에 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

실제로 캔버스 명령으로 변환하면됩니다. 예를 들어 :

Rectangle rectangle = new Rectangle(0, 0, 174, 75); 
canvas.add(rectangle); 
Line slopeMainLineX = new Line(5, 70, 170, 70); 
slopeMainLineX.setStrokeOpacity(0.5); 
canvas.add(slopeMainLineX); 
... 
steepestLine.setStrokeWidth(3); 

이 될 것입니다 : 50 × 50에 175x75에서 변경

ctx.fillRect(0, 0, 174, 75); 
ctx.beginPath(); 
ctx.moveTo(5, 70); 
ctx.lineTo(170, 70); 
ctx.globalAlpha = 0.5; 
... 
ctx.lineWidth = 3; 

이 좌표를 나누어의 문제이다. 종횡비는 같지 않으므로 물건을 찌그러 뜨리거나 부분을 잘라 버리는 중입니다.