如何在一个像播放按钮一样定向的圆圈内绘制一个完美的三角形

Question

我想创建一个圆形但中间有一个三角形的按钮。 对于发送按钮。我尝试使用 xml 和 drawable，但在屏幕大小和视图始终不居中等方面总是存在问题。

那么我怎样才能只使用画布来做到这一点呢？ 就像我如何获得我需要绘制的点一样，例如，给定圆的半径和各种比例，给我三角形的点并绘制圆。 这是我想要的图片

Answer 1

我最近创建了一些与您想要的非常相似的东西..

看看这个：https://www.desmos.com/calculator/2wpnxwwnty 看看数学/缩放是如何工作的。

这是产生的类：

public class TriangleInscribedCircle {

    private Triangle inscribedTriangle;

    private double s = 1;
    private double r = 100;

    public TriangleInscribedCircle(float radius, float scale) {
        setScale(scale);
        this.r = radius;
        calculateTriangle();
    }

    public Triangle getInscribedTriangle() {
        return this.inscribedTriangle;
    }

    public double getScale() {
        return this.s;
    }

    public void setScale(double scale) {
        if (scale < 0 || scale > 12) {
            throw new IllegalArgumentException("Scale must be between 0 and 12.");
        }
        this.s = scale;
        calculateTriangle();
    }

    public double getCircleRadius() {
        return this.r;
    }

    public void setCircleRadius(double radius) {
        this.r = radius;
        calculateTriangle();
    }

    private void calculateTriangle() {
        double u = -((r) / (s + 1)) + r;
        double x = (6 * u + 10 * r - Math.sqrt(36 * Math.pow(r, 2) + 24 * r * u - 12 * Math.pow(u, 2))) / (8);
        double ax = x;
        double ay = -Math.tan(Math.toRadians(30)) * (x - 2 * r + u) + r;
        double bx = -u + 2 * r;
        double by = r;
        double cx = x;
        double cy = Math.tan(Math.toRadians(30)) * (x - 2 * r + u) + r;

        Point a = new Point(ax, ay);
        Point b = new Point(bx, by);
        Point c = new Point(cx, cy);

        if (this.inscribedTriangle == null) {
            this.inscribedTriangle = new Triangle(a, b, c);
        } else {
            this.inscribedTriangle.setA(a);
            this.inscribedTriangle.setB(b);
            this.inscribedTriangle.setC(c);
        }
    }

}

然后在您的自定义视图中

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int width = getWidth();
    int height = getHeight();
    int radius = width / 2;

    canvas.drawCircle(width / 2, height / 2, radius, mTextFieldEmpty ? mCircleDisabledPaint : mCirclePaint);
    canvas.drawPath(mTrianglePath, mTextFieldEmpty ? mTriangleDisabledPaint : mTrianglePaint);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mTriangle = new TriangleInscribedCircle(w / 2, 1);
    calculatePath();
}


private void calculatePath() {
    mTrianglePath.reset();
    mTrianglePath.moveTo((int) mTriangle.getInscribedTriangle().getA().x, (int) mTriangle.getInscribedTriangle().getA().y);
    mTrianglePath.lineTo((int) mTriangle.getInscribedTriangle().getB().x, (int) mTriangle.getInscribedTriangle().getB().y);
    mTrianglePath.lineTo((int) mTriangle.getInscribedTriangle().getC().x, (int) mTriangle.getInscribedTriangle().getC().y);
    mTrianglePath.lineTo((int) mTriangle.getInscribedTriangle().getA().x, (int) mTriangle.getInscribedTriangle().getA().y);
}