Java 在受限空间中绘制坡度线

我有一个50x50像素的空间，我需要在其中画五条线：X轴和Y轴，最陡的、平均的和最平坦的斜率各画一条线

我使用的（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));

---

我在这里完全迷路了，因此非常感谢您的帮助。

您只需将它们转换为相应的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);
...
steepestLine.setStrokeWidth(3);

将成为：

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

---

将其从175x75更改为50x50只是划分坐标的问题。但是纵横比不一样，所以你要么压扁东西，要么切掉一个零件。

请原谅，我显然忘了提到这是使用GWT的DrawingArea作为画布。此控件不存在您引用的命令。哦，抱歉。我以为你在使用HTML5画布。事实上，GWT中的命令与您使用的命令更接近。看这里：把东西做成一条线几乎是完全一样的