在狭窄的空间中绘制斜线

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的改变，这只是一个划分的坐标问题。纵横比不尽相同，所以你要么要压扁东西要么剪掉一部分。