有人可以解释一下 arcTo 的最后两个参数吗？

Question

我正在尝试绘制一个带圆角的矩形。我有一个执行此操作的 javascript 路径，但 javascript arcTo 方法采用一个矩形（定义其椭圆形），然后是一个设置扫描的参数。

但是，在 Android 版本中，有三个参数。矩形椭圆形（我认为我已经正确定义了），然后是 startAngle 和 sweepAngle（我不了解它的用法），但是当我用我的方式做面条时，我的弧线看起来不像我所期望的那样我猜他们应该工作。

有人知道这方面的好教程吗？

具体来说，我想了解如果我试图从 12 到 3 绘制弧线（在钟面上），然后假设我有一条从 3 向下延伸的线，那么这两个参数会是什么样子然后需要从 3 到 6 圆角，依此类推。

这是我的代码（现在忽略其中的弧数......这只是我猜测这可能如何工作的最新迭代，在之前的更明智的尝试中失败了）：

Path ctx = new Path();
        ctx.moveTo(X+5,Y); //A
        ctx.lineTo(X+W-5,Y);//B
        ctx.arcTo(new RectF(X+W, Y, X+W, Y+5), -180, 90); //B arc

        ctx.lineTo(X+W,Y+H-5); //C
        ctx.arcTo(new RectF(X+W,Y+H,X+W-5,Y+H),90,180); //C arc

        ctx.lineTo(X+W/2 +6,Y+H);
        ctx.lineTo(X+W/2,Y+H+8);
        ctx.lineTo(X+W/2-6,Y+H);
        ctx.lineTo(X+5,Y+H);
        ctx.arcTo(new RectF(X,Y+H,X,Y+H-5),180,270);

        ctx.lineTo(X,Y+5);
        ctx.arcTo(new RectF(X,Y,X+5,Y),270,0);
        Paint p = new Paint();
        p.setColor(0xffff00ff);

        canvas.drawPath(ctx, p);

非常感谢。

Answer 1

archTo 参数使用四个示例直观地解释。

public void arcTo (RectF oval, 
                float startAngle, 
                float sweepAngle, 
                boolean forceMoveTo)

RectF 在哪里

RectF(float left, float top, float right, float bottom)

（希望比阅读 archTo android 文档不那么痛苦和神秘）

Answer 2

奇怪的是没有人提供答案，一旦我找到它（不容易找到），它真的很简单。

所以，它的工作方式是这样的： 假设您要在 12 - 3 处绘制圆角（使用时钟参考）： 你开始你的路径，当你需要线弧时，你定义一个矩形，其左上角是你的线当前终止的地方，其右下角是你想要弧线去的地方，所以如果你想象X,Y 为 12（在时钟上）且 X+W,Y+H 为 3 的正方形，这就是您需要的正方形。

现在，假设你在那个正方形中有一个椭圆（在这个例子中它是一个圆形椭圆，如果你想让你的曲线更像椭圆，那么将你的正方形定义为一个矩形），你可以取任意切片该圆圈使用该方法的最后两个参数。第一个参数定义您要开始切割的角度。如果我们使用指南针，0 度是东（不知道为什么，我不是几何专家......这正常吗？我一直认为 0 是北，但我看到的所有编程几何示例都有 0 作为东方，也许有人会评论为什么会这样）。

第二个参数定义你想要多少圆。如果你想要整个圆圈，你可以放 360，如果你想要一半的圆圈，你可以放 180 等等。

因此，在我们的例子中，因为我们想从 12 到 3 圆角，所以我们将 270 作为我们的起始度并抓取圆的 90 度。

最后，当您完成此过程后，该线路现在认为自己在下午 3 点，因此您可以从那里继续 lineTo(ing)。 所以......这是我的形状的固定代码（它有一个小三角形，但它既不是这里也不是那里，实际的圆形部分是BC，DE，IJ和KA。其余都是直线。

int arc = 25;
    public Cursor(int X, int Y, int W, int H){
        /*
         *   A            B
         * K                C 
         * J                D
         *   I   H   F    E
                   G
         */
        int Ax = X+ arc;
        int Ay = Y;
        int Bx = X + W - arc;
        int By = Y;
        int Cx = X + W;
        int Cy = Y + arc;
        int Dx = Cx;
        int Dy = (Y + arc) + (H - arc*2);
        int Ex = Bx;
        int Ey = Y + H;
        int Fx = X+W/2 +6;
        int Fy = Ey;
        int Gx = X+W/2;
        int Gy = Y+H+8;
        int Hx = X+W/2-6;
        int Hy = Ey;
        int Ix = Ax;
        int Iy = Hy;
        int Jx = X;
        int Jy = Dy;
        int Kx = X;
        int Ky = Cy;


        Path ctx = new Path();
        ctx.moveTo(Ax,Ay); //A
        ctx.lineTo(Bx,By);//B
        ctx.arcTo(new RectF(Bx, By, Cx, Cy), 270, 90); //B-C arc

        ctx.lineTo(Dx,Dy); //D
        ctx.arcTo(new RectF(Dx - arc, Dy, Ex + arc, Ey),0,90); //D-E arc

        ctx.lineTo(Fx, Fy); //E-F
        ctx.lineTo(Gx, Gy); //F-G
        ctx.lineTo(Hx, Hy); //G-H
        ctx.lineTo(Ix, Iy); //H - I
        ctx.arcTo(new RectF(Jx, Jy, Ix, Iy),90,90);// I = J arc

        ctx.lineTo(Kx, Ky); //K
        ctx.arcTo(new RectF(Ax - arc, Ay, Kx + arc, Ky),180,90); //K - A arc
        ctx.lineTo(Ax, Ay); //K



        Paint p = new Paint();
        p.setAntiAlias(true);
        p.setColor(0xffffffff);
        p.setStyle(Style.FILL);
        canvas.drawPath(ctx, p);    
        p.setColor(0xff000000);
        p.setStyle(Style.STROKE);
        p.setStrokeWidth(3);            
        canvas.drawPath(ctx, p);



    }

Answer 3

感谢这个例子，它使参数非常清晰易懂。 从我在 Android 的开发文档中读到的内容，您可能可以省去一些“lineTo()”调用（除了点 F、G、H 的调用），因为当弧的第一个点是 arcTo 时，arcTo 会自动添加 lineTo不是画的最后一点……

至于为什么0开始东，是因为数学和三角学课一般假设0度标记是三角圆（圆心为0,0，半径为1的圆）与X轴相交的点，这是东（但是这些相同的课程通常是逆时针计算角度，所以 90 度变成北，270 是南，而在 Android 上似乎是顺时针计算角度）

Answer 4

这里有一些示例代码（从我的一个类中拼凑而成）来绘制一个填充的圆角矩形，然后添加一个描边矩形来给它一个边框：

//Initializing some stuff
_paint = new Paint();
_rect = new RectF();
_radius = 10;
_bgColor = 0xFFFFFFFF;
_borderColor = 0xFFCCCCCC;

//Doing dimension calculations
_rect.left = 0;
_rect.top = 0;
_rect.right = this.getWidth() - 1;
_rect.bottom = this.getHeight() - 1;

//painting
//draw the background
_paint.setColor(_bgColor);
_paint.setStyle(Style.FILL_AND_STROKE);
canvas.drawRoundRect(_rect, _radius, _radius, _paint);

//draw the border
_paint.setStrokeWidth(1);
_paint.setColor(_borderColor);
_paint.setStyle(Style.STROKE);
canvas.drawRoundRect(_rect, _radius, _radius, _paint);