绘制一个扭曲的矩形

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

这是我发现here的一个有趣的解决方案：

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

一些代码：

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

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

  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);
  

来自文档here：

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);