Android Draw Canvas кривой Безье и прогресс

Question

я пытаюсь сделать что-то вроде этого в пользовательской точки зрения, это прогрессбар со сложной волной

Прогресс такой же кривой Безье, но я бы показать только часть в зависимости от процента.

На самом деле мне удалось нарисовать кривую Безье и заполнить фон форму благодаря @Blackbelt,

 Paint paintBezzier = new Paint() { 
      { 
       setStyle(Style.FILL_AND_STROKE); 
       setStrokeCap(Paint.Cap.ROUND); 
       setStrokeWidth(10.0f); 
       setAntiAlias(true); 
      } 
     }; 

     Paint paintBezzierProgressBase = new Paint() { 
      { 
       setStyle(Style.STROKE); 
       setStrokeCap(Paint.Cap.ROUND); 
       setStrokeWidth(10.0f); 
       setAntiAlias(true); 
      } 
     }; 


     int xControl1 = 0; 
     int yControl1 = 0; 

     int xControl2 = 0; 
     int yControl2 = 0; 


     int x1 = 0; 
     int y1 = contentHeight/2; 

     int x2 = contentWidth; 
     int y2 = contentHeight/2; 

     xControl1 = contentWidth/2; 
     yControl1 = 0 - 40; 

     xControl2 = contentWidth/2; 
     yControl2 = contentHeight+40; 


     Path backgroundPath = new Path(); 
     paintBezzier.setColor(Color.parseColor("#ffffff")); 
     paintBezzier.setStrokeWidth(5); 
     backgroundPath.moveTo(x1, y1); 
     backgroundPath.cubicTo(xControl1, yControl1, xControl2, yControl2, x2, y2); 
     backgroundPath.lineTo(x2, y2); 
     backgroundPath.lineTo(contentWidth, contentHeight); 
     backgroundPath.lineTo(x1, contentHeight); 
     backgroundPath.lineTo(x1, y1); 
     backgroundPath.close(); 

     //TODO calculate progress 

     Path pathProgress = new Path(); 
     paintBezzierProgressBase.setColor(Color.parseColor("#F1AD3D")); 
     paintBezzierProgressBase.setStrokeWidth(7); 
     pathProgress.moveTo(x1, y1); 
     pathProgress.cubicTo(xControl1, yControl1, xControl2, yControl2, x2, y2); 


     canvas.drawPath(backgroundPath, paintBezzier); 
     canvas.drawPath(path, paintBezzierProgressBase); 

Любая идея, как я могу вычислить процент и показать только часть кривой? это цель изображения.

Спасибо расширенного Извините за мой английский

Answer 1

Наконец я решил его с помощью ClippingPath

canvas.clipRect(rectangle, Region.Op.REPLACE); 
    canvas.drawPath(pathProgress, paintBezzierProgressBase); 

Answer 2

попробовать использовать FILL_AND_STROKE как стиль для вашего paintBezzier вместо STROKE. Или, возможно, вы хотите также, чтобы закрыть область вокруг вы хотите рисовать с, а затем использовать один из заливного стиля пути