android - 绘制扭曲的矩形

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