Нарисуйте искаженный прямоугольник

Question

Я пытаюсь нарисовать искаженный прямоугольник, используя Canvas. Я попытался использовать Path, чтобы нарисовать прямую линию, а затем arcTo(), но я не знаю, какие значения использовать. Как нарисовать форму, подобную той, что изображена на изображении?

EDIT: Этот код не работает, он рисует прямую линию.

 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 Х-координата 1-й контрольной точки на кубической кривой

у1 Y-координата 1-й контрольной точки на кубической кривой

x2 Координата x второй контрольной точки на кубической кривой

y2 Y-координата 2-й контрольной точки на кубической кривой

x3 координаты х конечной точки на кубической кривой

у3 Y-координата конечной точки на кубическая кривая

EDIT: в вашем случае я думаю, вы должны изменить код:

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