Question

I have a 50×50 pixel space in which I need to draw five lines: X and Y axes, and one line for each of a steepest, average, and flattest slope.

I’m working with (Java) code that was handed down to me with no documentation or commentary and I’ve never worked with drawing on a canvas before. Here’s the code for a box that measured 175×75 px. This needs to be adapted for a 50×50 area as described above.

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

I’m completely lost here, so any help would be greatly appreciated.

Answer 1

You really just need to translate them into the respective Canvas commands. For instance:

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

Would become:

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

Changing it from 175×75 to 50×50 is just a matter of dividing the coordinates. The aspect ratio isn’t the same though, so you’re either going to be squishing things or cutting off a part.