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只是划分坐标的问题。然而，宽高比并不相同，所以你要么要么在压扁东西，要么切掉一部分。

在狭窄空间中绘制斜坡线

1 个答案: