I would like to animate a single Path on the android canvas.
public class MyView extends View {
private Path paths[];
protected void onDraw( Canvas canvas ) {
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth( 8 );
paint.setColor(Color.BLUE);
Path path = new Path();
path.moveTo(75, 11);
path.quadTo(62, 87, 10, 144);
canvas.drawPath( path, paint );
paths[0] = path;
path.reset();
path.moveTo(50, 100);
path.lineTo(150, 200);
canvas.drawPath( path, paint );
paths[1] = path;
}
}
Now I have paths[], I would like to animate each one separately. I would like it to change alpha like it was growing. At first there is just a little dot, then it grows into a line, repeat.
Can it be done?
How?
I would add a new float ranging from 0 to 1 that keeps the current animation percentage and use it to set the current alpha
public class MyView extends View {
private Path paths[];
private float mAnimPercentage = 0.0f;
private static final int clip(int value){ //forces the value to be between 0 and 255
return Math.max(0, Math.min(255, value));
}
protected void onDraw( Canvas canvas ) {
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth( 8 );
paint.setColor(Color.BLUE);
Path path = new Path();
path.moveTo(75, 11);
path.quadTo(62, 87, 10, 144);
//edited here
paint.setAlpha(clip(mAnimPercentage*255*2));
canvas.drawPath( path, paint );
paths[0] = path;
path.reset();
path.moveTo(50, 100);
path.lineTo(150, 200);
//edited here
paint.setAlpha(clip(-127 + mAnimPercentage*255*2)); //the biggest is the negative value, the latter this path will show, the biggest is the number multiplied by mAnimPercentage, the fastest this path will get completely opaque
canvas.drawPath( path, paint );
paths[1] = path;
mAnimPercentage+= 0.01; //FIXME this is for TEST only, you should update it with an animator
postInvalidate();
}
}
Related
I am using following code to make a spinner wheel.
#Override
public void onDraw(Canvas canvas)
{
super.onDraw(canvas);
for (int i = 0; i < segmentColors.length; i ++)
{
drawDataSet(canvas, i);
}
canvas.drawCircle(getWidth()/2, getHeight()/2, getWidth() - getWidth()/2 - dpToPx(5), mTransparentCirclePaint);
}
protected void drawDataSet(Canvas canvas, int position)
{
int color = segmentColors[position];
float mainArcAngle = ((float) 360/ (float)segmentColors.length);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
if ( position%2 == 0)
paint.setColor(color);
else
paint.setColor(Color.parseColor("#009f2f"));
RectF rect = new RectF(0, 0, getWidth(), getWidth());
canvas.drawArc(rect, (mainArcAngle * position), mainArcAngle, true, paint);
TextPaint mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(Color.BLACK);
mTextPaint.setAntiAlias(true);
mTextPaint.setTypeface(Typeface.MONOSPACE);
mTextPaint.setTextAlign(Paint.Align.CENTER);
mTextPaint.setTextSize(18f);
Path path = new Path();
path.addArc(rect, (mainArcAngle * position), mainArcAngle);
//PathMeasure pm = new PathMeasure(path, false);
//DynamicLayout layout = new DynamicLayout(values[position], values[position], mTextPaint, (int) pm.getLength(), Layout.Alignment.ALIGN_CENTER, 1, 0, true);
//canvas.save();
//layout.draw(canvas);
//canvas.restore();
canvas.drawTextOnPath(values[position], path, 0 , getWidth() / 6 , mTextPaint );
}
The text that is written inside the arc is a bit compressed because of small spacing. How can I make it multiline or increase letter spacing?
Starting from API 21 you can use Paint#setLetterSpacing(float):
Set the paint's letter-spacing for text. The default value is 0. The value is in 'EM' units. Typical values for slight expansion will be around 0.05. Negative values tighten text.
You may also see how TextView#setLetterSpacing() is implemented.
I want to draw a circle and that activity must receive values (in degrees). I would draw lines on this circle and will have the opportunity to draw points on it.
If you can help me it would be great :)
I tried This :
public class DiagObstActivity extends Activity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.diagobstacles_main);
int radius;
radius = 200;
final ImageView imgCircle = (ImageView) findViewById(R.id.imgCircle);
Paint paint = new Paint();
paint.setColor(getResources().getColor((R.color.blue)));
paint.setStyle(Paint.Style.STROKE);
Bitmap bmp = Bitmap.createBitmap(500,500,Bitmap.Config.ARGB_4444);
Canvas canvas = new Canvas(bmp);
canvas.drawCircle(bmp.getWidth() / 2, bmp.getHeight() / 2, radius, paint);
RectF rectF = new RectF(50, 20, 100, 80);
canvas.drawOval(rectF, paint);
paint.setColor(Color.BLACK);
canvas.drawArc(rectF, 180, 0, true, paint);
imgCircle.setImageBitmap(bmp);
}
}
but the result is 2 circles screenshot
i am new thanks for ur help :)
What steps are required to create a shape e.g. rectangle with a shadow from scratch using a Canvas?
Adding a shadow layer to the paint used to draw the rectangle yielded no success.
No need for a Bitmap, just needed to set the layer type to LAYER_TYPE_SOFTWARE the original approach worked.
public class TestShapeShadow extends View
{
Paint paint;
public TestShapeShadow(Context context)
{
super(context);
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setShadowLayer(12, 0, 0, Color.YELLOW);
// Important for certain APIs
setLayerType(LAYER_TYPE_SOFTWARE, paint);
}
#Override
protected void onDraw(Canvas canvas)
{
canvas.drawRect(20, 20, 100, 100, paint);
}
}
I followed the ideas in #pskink's answer and found a solution.
I put the code snippet here for anyone in need.
public class MyViewWithShadow extends View {
Paint paint;
int mainColor;
int shadowColor;
// shadow properties
int offsetX = -25;
int offsetY = 30;
int blurRadius = 5;
public MyViewWithShadow(Context context)
{
super(context);
mainColor = Color.RED;
shadowColor = Color.BLACK; // this color can also have alpha
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.FILL);
}
#Override
protected void onDraw(Canvas canvas)
{
// Create paint for shadow
paint.setColor(shadowColor);
paint.setMaskFilter(new BlurMaskFilter(
blurRadius /* shadowRadius */,
BlurMaskFilter.Blur.NORMAL));
// Draw shadow before drawing object
canvas.drawRect(20 + offsetX, 20 + offsetY, 100 + offsetX, 100 + offsetY, paint);
// Create paint for main object
paint.setColor(mainColor);
paint.setMaskFilter(null);
// Draw main object
canvas.drawRect(20, 20, 100, 100, paint);
}
}
[Link is now broken:]
If you wonder what shadow properties are, you can refer to this tester:
https://okawa-h.github.io/box-shadow_tester/~
create. a Path, add some elements to it
set BlurMaskFilter to a Paint
draw a path with dx, dy shadow offset
unset mask filter
draw a path again with no. offset
I have made a paint app in which i have used ImageView in layout to show image that can be taken from camera or gallery.I want to draw transparent line over image so that image can be seen after drawing.please help me.
Thanks for support
I have used the code to make draw line transparent is :
myPaint.setAlpha(50);
My code is:
protected void onDraw(Canvas canvas) {
Toast.makeText(PaintScreen.this, "onDraw is called", Toast.LENGTH_SHORT).show();
// myPaint.setAlpha(100);
canvas.drawBitmap(PaintScreen.this.localBitmap, 0,0,null);
// canvas.drawPath(myPath, paintBlur);
canvas.drawPath(myPath, myPaint); Log.i("OnDRAWING", "REACH ON DRAW"); }
public class CustomView extends ImageView {
private float mX, mY;
public CustomView(Context context) {
super(context);
localBitmap = Bitmap.createBitmap(myBitmap.getWidth(), myBitmap.getHeight(), Config.ARGB_8888);
myCanvas = new Canvas(localBitmap);
myPaint = new Paint(); setPaintForDraw(paintcolor, false, 30);
setFocusable(true);
setFocusableInTouchMode(true); myPath = new Path();
}
}
private void setPaintForDraw(int color, boolean eraseMode, int brushSize) {
//myPaint.setAlpha(100);
myPaint.setAntiAlias(true);
myPaint.setDither(true);
myPaint.setStyle(Paint.Style.STROKE);
myPaint.setColor(color);
myPaint.setStrokeCap(Paint.Cap.ROUND);
myPaint.setStrokeJoin(Paint.Join.ROUND);
myPaint.setStrokeWidth(brushSize);
myPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
if (eraseMode) {
myPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
}
else { myPaint.setXfermode(null); }
}
see this thread How to maintain multi layers of ImageViews and keep their aspect ratio based on the largest one?, here you can use multiple Draeable layers that are drawn over the image
First, you have to check that your Bitmap is mutable. If it is not, make a copy of it. And here is how you can draw a line on your image:
Bitmap copyBmp = yourBMP.copy(Bitmap.Config.ARGB_8888, true); //Copy if yourBMP is not mutable
Canvas canvas = new Canvas(copyBmp);
Paint paint = new Paint();
paint.setAlpha(50); //Put a value between 0 and 255
paint.setColor(Color.GRAY); //Put your line color
paint.setStrokeWidth(5); //Choose the width of your line
canvas.drawLine(startX, startY, stopX, stopY, paint); //Set the coordinates of the line
Now, if you display copyBmp, you should see a line drawn over it.
I want to draw an oval shape around the text on Canvas, I am displaying the 3 texts on Canvas using drawwText() method.
Now when I click on a particular text, I need to draw an oval around that text and again when we click on another text, the oval shape should appear on the clicked text. For this give me some code suggestions.Thanks in advance
use drawOval method().. here is the signature of the method..
public void drawOval (RectF oval, Paint paint)
RectF is class for drawing rectangle...whose constructor is defined as following...
RectF(x,y,x+width,y+height);
you can make its object as follows
RectF rect = new RectF(x,y,x+width,y+height);...
now pass this object in drawOval method....
canvas.drawOval(rect,paint);
for resolution (480 x 800)
in onCreate()
setContentView(new SampleView(this));
create class
private static class SampleView extends View {
// CONSTRUCTOR
public SampleView(Context context) {
super(context);
setFocusable(true);
}
#SuppressLint("DrawAllocation")
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
//1
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.GRAY);
RectF oval1 = new RectF(0, 0, 250,250);
Paint p1 = new Paint();
p1.setColor(Color.BLACK);
canvas.drawText("Parent", 30, 50, p1);
canvas.drawOval(oval1, paint);
//2
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLUE);
RectF oval2 = new RectF(50, 50, 150, 150);
Paint p2 = new Paint();
p2.setColor(Color.GREEN);
canvas.drawText("Child", 75, 75, p2);
canvas.drawOval(oval2, paint);
}
}