Monday, June 16, 2014

Implement running dash path, using PathDashPathEffect

Example to implement running dash path, using PathDashPathEffect.

Modify from previous example "DashPathEffect, apply dash effect on path", implement PathDashPathEffect. In order to make it running, advance phase of PathDashPathEffect, and call invalidate() in onDraw() method.

MyView.java
package com.example.androiddrawpath;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathDashPathEffect;
import android.graphics.Path.Direction;
import android.util.AttributeSet;
import android.view.View;
import android.widget.TextView;

public class MyView extends View {
 
 MyShape myShape;
 float ratioRadius, ratioInnerRadius;
 int numberOfPoint = 3; //default
 
 float rotate;
 
 //corresponding to UI element
 TextView textLayerInfo;

 Path dashPath;
 float phase;

 public MyView(Context context) {
  super(context);
  initMyView();
 }

 public MyView(Context context, AttributeSet attrs) {
  super(context, attrs);
  initMyView();
 }

 public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  initMyView();
 }
 
 public void initMyView(){
  myShape = new MyShape();
  
  dashPath = new Path();
  dashPath.addCircle(0, 0, 3, Direction.CCW);
  
  phase = 0.0f;
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  
  long starting = System.nanoTime();
  
  int w = getWidth();
  int h = getHeight();
  
  if((w==0) || (h==0)){
   return;
  }
  
  float x = (float)w/2.0f;
  float y = (float)h/2.0f;
  float radius, innerRadius;
  if(w > h){
   radius = h * ratioRadius;
   innerRadius = h * ratioInnerRadius;
  }else{
   radius = w * ratioRadius;
   innerRadius = w * ratioInnerRadius;
  }
  
  myShape.setStar(x, y, radius, innerRadius, numberOfPoint);
  
  //Save and rotate canvas 
  canvas.save();
  canvas.rotate(rotate, x, y);
  
  phase++;
  PathDashPathEffect pathDashPathEffect = 
   new PathDashPathEffect(dashPath, 15.0f, phase, PathDashPathEffect.Style.MORPH);
  
  Paint paintDash = myShape.getPaint();
  paintDash.setPathEffect(pathDashPathEffect);
  
  canvas.drawPath(myShape.getPath(), myShape.getPaint());
  
  //restore canvas
  canvas.restore();
  
  long end = System.nanoTime();
  
  String info = "myView.isHardwareAccelerated() = " + isHardwareAccelerated() + "\n"
    + "canvas.isHardwareAccelerated() = " + canvas.isHardwareAccelerated() + "\n"
    + "processing time (reference only) : " + String.valueOf(end - starting) + " (ns)";
  textLayerInfo.setText(info);
  
  invalidate();
  
 }
 
 public void setShapeRadiusRatio(float ratio){
  ratioRadius = ratio;
 }
 
 public void setShapeInnerRadiusRatio(float ratio){
  ratioInnerRadius = ratio;
 }
 
 public void setNumberOfPoint(int pt){
  numberOfPoint = pt;
 }
 
 public void passElements(TextView textLayerInfo){
  this.textLayerInfo = textLayerInfo;
 }

 public void setShapeRotate(int rot){
  rotate = (float)rot;
 }

}


Other files, refer to last example.

download filesDownload the files.

More example of Drawing Path on canvas of custom View.


1 comment:

Sushant Sharma said...

Can you please provide a solution for this:
http://stackoverflow.com/questions/24256488/android-background-url-inside-cdata