الأربعاء، 4 يونيو 2014

DashPathEffect, apply dash effect on path

To apply DashPathEffect on path:
  //init DashPathEffect
dashPathEffect = new DashPathEffect(
new float[]{10.0f, 5.0f}, //interval
0); //phase

paintDash.setPathEffect(dashPathEffect);

Example:

Modify from last example "Draw rotated path by rotating canvas".

MyView.java
package com.example.androiddrawpath;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
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;

DashPathEffect dashPathEffect;

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

//init DashPathEffect
dashPathEffect = new DashPathEffect(
new float[]{10.0f, 5.0f}, //interval
0); //phase
}

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

Paint paintDash = myShape.getPaint();
paintDash.setPathEffect(dashPathEffect);

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

}

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

}

Modify MyShape.java to call paint.setStyle(Paint.Style.STROKE).
package com.example.androiddrawpath;

import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;

public class MyShape {

private Paint paint;
private Path path;

public MyShape() {
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(3);
paint.setStyle(Paint.Style.STROKE);
//paint.setStyle(Paint.Style.FILL);
//paint.setStyle(Paint.Style.FILL_AND_STROKE);

path = new Path();
}

public void setCircle(float x, float y, float radius, Path.Direction dir){
path.reset();
path.addCircle(x, y, radius, dir);
}

public void setStar(float x, float y, float radius, float innerRadius, int numOfPt){

double section = 2.0 * Math.PI/numOfPt;

path.reset();
path.moveTo(
(float)(x + radius * Math.cos(0)),
(float)(y + radius * Math.sin(0)));
path.lineTo(
(float)(x + innerRadius * Math.cos(0 + section/2.0)),
(float)(y + innerRadius * Math.sin(0 + section/2.0)));

for(int i=1; i<numOfPt; i++){
path.lineTo(
(float)(x + radius * Math.cos(section * i)),
(float)(y + radius * Math.sin(section * i)));
path.lineTo(
(float)(x + innerRadius * Math.cos(section * i + section/2.0)),
(float)(y + innerRadius * Math.sin(section * i + section/2.0)));
}

path.close();

}

public Path getPath(){
return path;
}

public Paint getPaint(){
return paint;
}

}


download filesDownload the files.

More example of Drawing Path on canvas of custom View.

ليست هناك تعليقات:

إرسال تعليق