在密闭空间中绘制斜线

Question

我有一个 50x50 像素的空间，我需要在其中绘制五条线：X 轴和 Y 轴，steepest、average 和 flattest 斜率各一条线。

我正在使用 (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

您真的只需要将它们翻译成各自的 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 只是划分坐标的问题。但是纵横比不一样，所以你要么压扁东西，要么切掉一部分。