画一个变形的矩形

Question

我正在尝试使用Canvas绘制一个扭曲的矩形。 我尝试过使用Path绘制直线，然后使用arcTo() ，但是我不知道应该使用哪个值。 如何绘制与图像中的形状相似的形状？

编辑：此代码不起作用，它绘制一条直线。

        Path path = new Path();
        path.moveTo(width/2-10, (height/2)+130);
        path.lineTo(width/2-12, (height/2)+170);

        float x1 = width/2-12; //228
        float y1 = height/2+170; //570
        float x3 = width/2-70; //170
        float y3 = height/2+140; //540
        float x2 = (x3+x1)/2; //199
        float y2 = (y3+y1)/2; //555

        path.quadTo(x1, y1, x2, y2);
        Paint paint = new Paint()
        {
            {
                setStyle(Paint.Style.STROKE);
                setColor(Color.YELLOW);
                setStrokeCap(Paint.Cap.ROUND);
                setStrokeWidth(3.0f);
                setAntiAlias(true);
            }
        };
        mCanvas.drawPath(path, paint);

Answer 1

这是我在这里找到的一个有趣的解决方案：

您可以为此使用Path.quadTo（）或Path.cubicTo（）。 可以在SDK示例（FingerPaint）中找到示例。 在您的情况下，您只需要计算中间点，然后将您的三个点传递给quadTo（）。

一些代码为您：

• （x1，y1）和（x3，y3）分别是您的起点和终点。

• 仅创建一次绘制对象（例如，在构造函数中）

   Paint paint = new Paint() { { setStyle(Paint.Style.STROKE); setStrokeCap(Paint.Cap.ROUND); setStrokeWidth(3.0f); setAntiAlias(true); } }; final Path path = new Path(); path.moveTo(x1, y1); final float x2 = (x3 + x1) / 2; final float y2 = (y3 + y1) / 2; path.quadTo(x2, y2, x3, y3); canvas.drawPath(path, paint); 

从这里的文档：

public void cubicTo (float x1, float y1, float x2, float y2, float x3, float y3)

从最后一点添加一个三次方贝塞尔曲线，逼近控制点（x1，y1）和（x2，y2），并在（x3，y3）处结束。 如果没有为此轮廓调用moveTo（），则第一个点将自动设置为（0,0）。

参数 x1三次曲线上第一个控制点的x坐标

y1三次曲线上第一个控制点的y坐标

x2三次曲线上第二个控制点的x坐标

y2三次曲线上第二个控制点的y坐标

x3三次曲线上端点的x坐标

y3三次曲线终点的y坐标

编辑：在您的情况下，我认为您应该将代码更改为：

final Path path = new Path();
path.moveTo(width/2-12, (height/2+170);

float x1 = width/2-12; //228
float y1 = height/2+170; //570
float x3 = width/2-70; //170
float y3 = height/2+140; //540
float x2 = (x3+x1)/2 + 14.5; //213.5
float y2 = (y3+y1)/2 + 7.5; //562.5

path.quadTo(x2, y2, x3, y3);
Paint paint = new Paint()
{
    {
        setStyle(Paint.Style.STROKE);
        setColor(Color.YELLOW);
        setStrokeCap(Paint.Cap.ROUND);
        setStrokeWidth(3.0f);
        setAntiAlias(true);
    }
};
mCanvas.drawPath(path, paint);