Android Draw Ball Spur

Question

Es gibt Bälle in meiner App, die nur durch das Display fliegen. Sie zeichnen, wie ich will. Aber jetzt möchte ich die Spur hinter ihnen zeichnen.

Alles, was ich machen könnte, ist nur durch canvas.drawPath etwas Zeichnung wie folgendes Bild:

Aber es ist nicht das, was ich will. Es sollte spitzen Schwanz haben und Farbverlauf wie folgt aus:

Ich habe keine Ahnung, wie es zu machen. Versucht BitmapShader - konnte etwas nicht richtig machen. Hilfe bitte.

Code:

Zunächst einmal gibt es Point Klasse für die Position auf dem Display:

class Point { 
    float x, y; 
    ... 
} 

Und Spur als Warteschlange von Point gespeichert ist:

private ConcurrentLinkedQueue<Point> trail; 

Es spielt keine Es spielt keine Rolle, wie es sich füllt, nur wissen, es hat eine Größenbeschränkung:

trail.add(position); 
if(trail.size() > TRAIL_MAX_COUNT) { 
    trail.remove(); 
} 

Und Zeichnung in DrawTrail Verfahren geschehen:

private void DrawTrail(Canvas canvas) { 
    trailPath.reset(); 
    boolean isFirst = true; 
    for(Point p : trail) { 
     if(isFirst) { 
      trailPath.moveTo(p.x, p.y); 
      isFirst = false; 
     } else { 
      trailPath.lineTo(p.x, p.y); 
     } 
    } 
    canvas.drawPath(trailPath, trailPaint); 
} 

By the way, ist trailPaint gerade richtig fett Farbe :)

trailPaint = new Paint(); 
trailPaint.setStyle(Paint.Style.STROKE); 
trailPaint.setColor(color); 
trailPaint.setStrokeWidth(radius * 2); 
trailPaint.setAlpha(150); 

Answer 1

Ich fand eine Lösung. Aber denke immer noch, dass es nicht das Beste ist.

Zunächst einmal sind meine Klassenfelder für diese Aufgabe verwendet.

static final int TRAIL_MAX_COUNT = 50; //maximum trail array size 
static final int TRAIL_DRAW_POINT = 30; //number of points to split the trail for draw 

private ConcurrentLinkedQueue<Point> trail; 
private Paint[] trailPaints; 
private float[][] trailPoss, trailTans; 
private Path trailPath; 

Zusätzlich zu trailPath Objekt verwendet I PathMeasure Objektpfad auf mehrere gleiche Teile zu teilen.

Nach dem Füllen Trail-Objekt hinzugefügt Trail Call-Funktion hinzugefügt.

lastTrailAdd = now; 
trail.add(pos.Copy()); 
if (trail.size() > TRAIL_MAX_COUNT) { 
    trail.remove(); 
} 
FillTrail(); 

Dann meine FillTrail Funktion.

private void FillTrail() { 
    trailPath.reset(); 
    boolean isFirst = true; 
    for(Point p : trail) { 
     if(isFirst) { 
      trailPath.moveTo(p.x, p.y); 
      trailPoss[0][0] = p.x; 
      trailPoss[0][1] = p.y; 
      isFirst = false; 
     } else { 
      trailPath.lineTo(p.x, p.y); 
     } 
    } 
    PathMeasure path = new PathMeasure(trailPath, false); 
    float step = path.getLength()/TRAIL_DRAW_POINT; 
    for(int i=0; i<TRAIL_DRAW_POINT; i++) { 
     path.getPosTan(step * i, trailPoss[i], trailTans[i]); 
    } 
} 

Es wurde vom Zeichenthread getrennt. Nächster Code ist Zeichenfunktion.

private void DrawTrail(Canvas canvas) { 
    if(trail.size() > 1) { 
     float prevWidthHalfX = 0f, prevWidthHalfY = 0f, prevX = 0f, prevY = 0f; 
     Path trailStepRect = new Path(); 
     boolean isFirst = true; 
     for (int i = 0; i < TRAIL_DRAW_POINT; i++) { 
      float currWidthHalf = (float) (radius) * i/TRAIL_DRAW_POINT/2f, 
        currWidthHalfX = currWidthHalf * trailTans[i][1], 
        currWidthHalfY = currWidthHalf * trailTans[i][0], 
        currX = trailPoss[i][0], currY = trailPoss[i][1]; 
      if (!isFirst) { 
       trailStepRect.reset(); 
       trailStepRect.moveTo(prevX - prevWidthHalfX, prevY + prevWidthHalfY); 
       trailStepRect.lineTo(prevX + prevWidthHalfX, prevY - prevWidthHalfY); 
       trailStepRect.lineTo(currX + currWidthHalfX, currY - currWidthHalfY); 
       trailStepRect.lineTo(currX - currWidthHalfX, currY + currWidthHalfY); 
       canvas.drawPath(trailStepRect, trailPaints[i]); 
      } else { 
       isFirst = false; 
      } 
      prevX = currX; 
      prevY = currY; 
      prevWidthHalfX = currWidthHalfX; 
      prevWidthHalfY = currWidthHalfY; 
     } 
    } 
} 

Hauptpunkt ist die Zeichnung von Spuren durch Teile mit verschiedenen Farben. Näher zum Ball - breiter der Trail. Ich denke, ich werde es optimieren, aber es ist schon Arbeit.

Wenn Sie sehen möchten, wie es aussieht, installieren Sie einfach my app from google play.

Answer 2

Ich sehe, Sie wollen eine Steigung auf den Ball sehen Pfad, könnten Sie etwas wie das verwenden

int x1 = 0, y1 = 0, x2 = 0, y2 = 40; 
Shader shader = new LinearGradient(0, 0, 0, 40, Color.WHITE, Color.BLACK, TileMode.CLAMP); 
trailPaint = new Paint(); 
trailPaint.setShader(shader); 

Das ist, was Sie Ihre trailPaint ändern sollten und sehen, ob es funktioniert.

bereitgestellt von here.