Question

我需要在android中使用canvas创建如下形状。

下面是我的代码实现相同，我绘制的形状几乎与它相似，但是当我通过e5和e6的点来绘制弧时，曲线的右侧没有成形与drawConcaveCurve和e1相同的功能e2。我想在这里做什么来弯曲e5和e6之间的路径？

public class HeapShape extends View {

ArrayList<Point> points = new ArrayList<>();

private final Paint mArcPaint = new Paint() {
    {
        setDither(true);
        setStyle(Paint.Style.STROKE);
        setStrokeCap(Paint.Cap.ROUND);
        setStrokeJoin(Paint.Join.ROUND);

        setColor(Color.BLUE);
        setStrokeWidth(5.0f);
        setAntiAlias(true);
    }
};

private final Paint mOvalPaint = new Paint() {
    {
        setStyle(Paint.Style.FILL);
        setColor(Color.TRANSPARENT);
    }
};


public HeapShape(Context context) {
    super(context);
}

public HeapShape(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public HeapShape(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}


@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // TODO Auto-generated method stub
    super.onDraw(canvas);
    float width = (float) getWidth();
    float height = (float) getHeight();
    float radius;

    if (width > height) {
        radius = height / 8;
    } else {
        radius = width / 8;
    }


    float center_x, center_y;
    center_x = width / 2;
    center_y = height / 2;

    Path path = new Path();
    path.addCircle(center_x,
            center_y, radius,
            Path.Direction.CW);

    Paint paint = new Paint();
    paint.setStrokeWidth(5);
    paint.setStyle(Paint.Style.FILL);
    paint.setShader(new LinearGradient(getWidth(), getHeight(), getWidth(), getHeight(), Color.BLACK, Color.WHITE, Shader.TileMode.REPEAT));

    final RectF oval = new RectF();


    // left, top, right, bottom
    oval.set(center_x - radius,
            center_y - radius,
            center_x + radius,
            center_y + radius);
    canvas.drawArc(oval, 180, 180, false, paint);

    path.reset();

    // left point with 20 pixel upwards
    // point 1
    PointF e1 = new PointF();
    e1.set(center_x - radius, center_y);
    path.moveTo(e1.x, e1.y);
    // put point for our review
    canvas.drawCircle(e1.x, e1.y, 8, paint);

    // point 2
    PointF e2 = new PointF();
    e2.set(0, e1.y + 160);
    //path.lineTo(e2.x, e2.y);
    // draw concave curve
    path = drawConcaveCurve(e1, e2);
    // put point for our review
    canvas.drawCircle(e2.x, e2.y, 8, paint);

    // point 3
    PointF e3 = new PointF();
    e3.set(e2.x, e2.y + 80);
    path.lineTo(e3.x, e3.y);
    // put point for our review
    canvas.drawCircle(e3.x, e3.y, 8, paint);


    // point 4
    PointF e4 = new PointF();
    e4.set(e3.x + getWidth(), e3.y);
    path.lineTo(e4.x, e4.y);
    // put point for our review
    canvas.drawCircle(e4.x, e4.y, 8, paint);


    // point 5
    PointF e5 = new PointF();
    e5.set(e4.x, e4.y - 80);
    path.lineTo(e5.x, e5.y);
    // put point for our review
    canvas.drawCircle(e5.x, e5.y, 8, paint);


    // point 6
    PointF e6 = new PointF();
    e6.set(e5.x - 405, e5.y - 160);
    path.lineTo(e6.x, e6.y);
    // put point for our review

   // path = drawConcaveCurve(e6, e5);
    canvas.drawCircle(e6.x, e6.y, 8, paint);


    path.close();
    canvas.drawPath(path, paint);


}




private Path drawConcaveCurve(PointF e1, PointF e2) {

    int curveRadius = 180;
    final Path path = new Path();
    float midX            = e1.x + ((e2.x - e1.x) / 2);
    float midY            = e1.y + ((e2.y - e2.y) / 2);
    float xDiff         = midX - e1.x;
    float yDiff         = midY - e1.y;
    double angle        = (Math.atan2(yDiff, xDiff) * (180 / Math.PI)) - 90;
    double angleRadians = Math.toRadians(angle);
    float pointX        = (float) (midX + curveRadius * Math.cos(angleRadians));
    float pointY        = (float) (midY + curveRadius * Math.sin(angleRadians));

    path.moveTo(e1.x, e1.y);
    path.cubicTo(e1.x,e1.y,pointX, pointY, e2.x, e2.y);
    return path;
}


private Path drawConvaxCurve(PointF e1, PointF e2) {

    int curveRadius = 30;
    final Path path = new Path();
    float midX            = e1.x + ((e2.x - e1.x) / 2);
    float midY            = e1.y + ((e2.y - e2.y) / 2);
    float xDiff         = midX - e1.x;
    float yDiff         = midY - e1.y;
    double angle        = (Math.atan2(yDiff, xDiff) * (180 / Math.PI)) - 90;
    double angleRadians = Math.toRadians(angle);
    float pointX        = (float) (midX + curveRadius * Math.cos(angleRadians));
    float pointY        = (float) (midY + curveRadius * Math.sin(angleRadians));

    path.moveTo(e1.x, e1.y);
    path.cubicTo(e1.x,e1.y,pointX, pointY, e2.x, e2.y);
    return path;
}
}

以上代码形成如下形式 -

如何使机翼的右侧与左侧相同。所以请帮助我解决我的代码中的解决方案和更改或修改。提前谢谢。

Answer 1

我终于构建了代码。感谢@ModularSynth分享参考。

以下是我正在寻找的代码：

file_put_contents('debug.log', var_export($foo, true), FILE_APPEND)

如何绘制不规则形状？

1 个答案: