I'm drawing some circles on a canvas. I want to apply a radial gradient to each of this circle.
I'm currently allocating a new gradient for each circle, but i'm guessing this not a very good idea.
protected void onDraw(Canvas canvas)
{
int radius = 6;
int cx = radius;
int cy = radius ;
for(int i = 0; i < nbPage; i++)
{
if(i % 12 == 0 && i > 0) {
cx = radius;
cy += 20;
}
RadialGradient gradient = new RadialGradient(cx, cy, radius, 0xFFFFFFFF,
0xFF000000, android.graphics.Shader.TileMode.CLAMP);
p.setDither(true);
p.setShader(gradient);
canvas.drawCircle(cx, cy, radius, p);
cx += 20; //16px + 4 de marge
}
}
Is there a solution to preallocate the radial gradient knowing that each circle have the same radius but differents coordinates ?
Thanks
Take the RadialGradient object and draw it to a Bitmap, then proceed to draw that Bitmap to the Canvas for each circle.
Bitmap circleBitmap = Bitmap.create((int) (radius * 2.0f), (int) (radius * 2.0f),
Bitmap.Config.ARGB_8888);
Canvas tempCanvas = new Canvas(circleBitmap);
RadialGradient gradient = new RadialGradient(cx, cy, radius, 0xFFFFFFFF,
0xFF000000, android.graphics.Shader.TileMode.CLAMP);
p.setDither(true);
p.setShader(gradient);
tempCanvas.drawCircle(radius, radius, radius, p);
for (int i = 0; i < nbPage; i++)
canvas.drawBitmap(circleBitmap, cx + (i * 20) - radius, cy - radius, p);
Related
I am creating Augmented Reality in Android application, in which I have few POI and I am putting them on Camera Coordinates, Now only issue with this is nearby Coordinates are overlapping. I want to cluster the nearby Coordinates. Is there any way to do it. I am using this AR Project
Following is the code of OnDraw() method.
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (currentLocation == null) {
return;
}
final int radius = 30;
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
paint.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.NORMAL));
paint.setTextSize(60);
for (int i = 0; i < arPoints.size(); i ++) {
float[] currentLocationInECEF = LocationHelper.WSG84toECEF(currentLocation);
float[] pointInECEF = LocationHelper.WSG84toECEF(arPoints.get(i).getLocation());
float[] pointInENU = LocationHelper.ECEFtoENU(currentLocation, currentLocationInECEF, pointInECEF);
float[] cameraCoordinateVector = new float[4];
Matrix.multiplyMV(cameraCoordinateVector, 0, rotatedProjectionMatrix, 0, pointInENU, 0);
// cameraCoordinateVector[2] is z, that always less than 0 to display on right position
// if z > 0, the point will display on the opposite
if (cameraCoordinateVector[2] < 0) {
float x = (0.5f + cameraCoordinateVector[0]/cameraCoordinateVector[3]) * canvas.getWidth();
float y = (0.5f - cameraCoordinateVector[1]/cameraCoordinateVector[3]) * canvas.getHeight();
canvas.drawCircle(x, y, radius, paint);
canvas.drawText(arPoints.get(i).getName(), x - (30 * arPoints.get(i).getName().length() / 2), y - 80, paint);
}
}
}
Here is what I'm using to draw a circle shape on to the canvas (and then an icon bitmap on it):
private static Bitmap makeIcon(int radius, int color, Bitmap icon) {
final Bitmap output = Bitmap.createBitmap(radius, radius, Bitmap.Config.ARGB_8888);
final Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(color);
canvas.drawARGB(0, 0, 0, 0);
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT)
canvas.drawCircle(radius / 2, radius / 2, radius / 2, paint);
else
canvas.drawRect(0, 0, radius, radius, paint);
int cx = (radius - icon.getWidth()) >> 1; // same as (...) / 2
int cy = (radius - icon.getHeight()) >> 1;
canvas.drawBitmap(icon, cx, cy, paint);
icon.recycle();
return output;
}
But I have no idea on how to draw a squircle shape instead of the circle shape. FYI, here are some examples of icons using the squircle shape:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Path squirclePath = getSquirclePaath(150, 250, 400);
canvas.drawPath(squirclePath, mPaint);
}
private static Path getSquirclePaath(int left, int top, int radius){
//Formula: (|x|)^3 + (|y|)^3 = radius^3
final double radiusToPow = radius * radius * radius;
Path path = new Path();
path.moveTo(-radius, 0);
for (int x = -radius ; x <= radius ; x++)
path.lineTo(x, ((float) Math.cbrt(radiusToPow - Math.abs(x * x * x))));
for (int x = radius ; x >= -radius ; x--)
path.lineTo(x, ((float) -Math.cbrt(radiusToPow - Math.abs(x * x * x))));
path.close();
Matrix matrix = new Matrix();
matrix.postTranslate(left + radius, top + radius);
path.transform(matrix);
return path;
}
Here is a preview:
The other way is to use a BitmapShader.
Note: both mask and image must be equal size, so you have to resize your images.
Note2: this code is developed for Launcher icons and has poor Adaptive Icons adaptation yet.
baseIconSize is a «destination» size.
fun Drawable.toBitmap(width: Int, height: Int, config: Bitmap.Config): Bitmap {
val bitmap = Bitmap.createBitmap(width, height, config)
val canvas = Canvas(bitmap)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
if (this is AdaptiveIconDrawable) {
background.setBounds(0, 0, width, height)
background.draw(canvas)
foreground.setBounds(0, 0, width, height)
foreground.draw(canvas)
} else {
setBounds(0, 0, width, height)
draw(canvas)
}
} else {
setBounds(0, 0, width, height)
draw(canvas)
}
return bitmap
}
val maskBitmap = requireNotNull(context.getDrawable(R.drawable.mask_squircle))
.toBitmap(
width = baseIconSize,
height = baseIconSize,
config = Bitmap.Config.ALPHA_8
)
val iconBitmap = Bitmap.createBitmap(
baseIconSize,
baseIconSize,
Bitmap.Config.ARGB_8888
)
val originalBitmap = if (bitmap.width == baseIconSize && bitmap.height == baseIconSize) {
bitmap
} else {
bitmap.scale(baseIconSize, baseIconSize)
}
iconShapePaint.shader = BitmapShader(
originalBitmap,
Shader.TileMode.REPEAT,
Shader.TileMode.REPEAT
)
val canvas = Canvas(iconBitmap)
canvas.drawBitmap(maskBitmap, 0f, 0f, iconShapePaint)
originalBitmap.recycle()
return iconBitmap
Before:
After:
Mask:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="1024dp"
android:height="1024dp"
android:viewportWidth="1024"
android:viewportHeight="1024">
<path
android:pathData="M512,1024C736.36,1024 861.08,1024 942.54,942.54C1024,861.08 1024,736.36 1024,512C1024,287.64 1024,162.92 942.54,81.46C861.08,0 736.36,0 512,0C287.64,0 162.92,0 81.46,81.46C0,162.92 0,287.64 0,512C0,736.36 0,861.08 81.46,942.54C162.92,1024 287.64,1024 512,1024Z"
android:strokeWidth="1"
android:fillColor="#000000"
android:fillType="evenOdd"
android:strokeColor="#00000000"/>
</vector>
I am trying to create a jigsaw puzzle game, and I would like to know of alternative ways of creating puzzle pieces without using mask. Currently I have jigsaw pieces by taking a full image, breaking that image up into four pieces (lets say the puzzle is 2x2) and then storing and applying a mask to each piece. It looks like the below
// create standard puzzle pieces
arryPieceEndPos = new int[mCols][mRows];
arryPieceImg = new Bitmap[mCols * mRows];
arryIsPieceLocked = new boolean[mCols * mRows];
int pos = 0;
for (int c = 0; c < mCols; c++) {
for (int r = 0; r < mRows; r++) {
arryPieceImg[pos] = Bitmap.createBitmap(mBitmap,
c * mPieceWidth, r * mPieceHeight,
mPieceWidth, mPieceHeight);
arryIsPieceLocked[pos] = false;
arryPieceEndPos[c][r] = pos;
pos++;
}
}
I then use a helper method to apply a mask to each piece
private Bitmap maskMethod(Bitmap bmpOriginal, Bitmap bmpMask) {
// adjust mask bitmap if size is not the size of the puzzle piece
if (bmpMask.getHeight() != mPieceHeight ||
bmpMask.getWidth() != mPieceWidth) {
Log.e("TEST", "Resize Error :: H (mask): " + bmpMask.getHeight() + " // W (mask): " +
bmpMask.getWidth());
Log.d("TEST", "Resize Error :: H (norm): " + mPieceHeight + " // W (norm): " +
mPieceWidth);
}
Canvas canvas = new Canvas();
Bitmap combine = Bitmap.createBitmap(bmpOriginal.getWidth(), bmpOriginal.getHeight(), Bitmap.Config.ARGB_8888);
canvas.setBitmap(combine);
Paint paint = new Paint();
paint.setFilterBitmap(false);
canvas.drawBitmap(bmpOriginal, 0, 0, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawBitmap(bmpMask, 0, 0, paint);
paint.setXfermode(null);
return combine;
}
I saw this post > http://java.dzone.com/news/connect-pictures-android for connecting pieces together, however, this does not go over generating pieces programmatically without masks. Can anyone provide code examples of how this can be accomplished? The only clue I have is that I should be using Path, however, I am still not sure how. Thanks in advance!
A puzzle piece is a pretty complex view to create, but I can help you understand how to use path. Here is the link to the developer website: http://developer.android.com/reference/android/graphics/Path.html
Look into this link. I made a small thing for you to start. The one thing you need to figure out is how to cut a small circle out of the path, which I wouldn't know. I think you have to look into clipping to have your path follow a circle (you could also do clipping for creating the circle outside the piece, I just haven't done clipping before).
private Bitmap getPuzzleBitmap(Bitmap bitmap)
{
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
calculatePuzzlePath(bitmap.getWidth(), bitmap.getHeight());
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawPath(puzzlePath, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
private void calculatePuzzlePath(int width, int height)
{
float radius = (height / 2) - 5;
float smallRadius = radius / 3;
radius -= smallRadius * 2;
float centerX = width/2;
float centerY = height/2;
puzzlePath = new Path();
// Bottom right
puzzlePath.moveTo(centerX + radius, centerY + radius);
// Top right
puzzlePath.lineTo(centerX + radius, centerY - radius);
// Center top
puzzlePath.lineTo(centerX, centerY - radius);
// Add outside circle to center top
puzzlePath.addCircle(centerX, centerY - radius - ((radius / 3) / 2), radius / 3, Path.Direction.CCW);
// Top left
puzzlePath.lineTo(centerX - radius, centerY - radius);
// Bottom left
puzzlePath.lineTo(centerX - radius, centerY + radius);
//Bottom right
puzzlePath.lineTo(centerX + radius, centerY + radius);
}
I hope this is sufficient to get started with this.
Good luck!
I'm trying to draw the spectrum of an audio file on a circle. Like this:
So on the circle I just want rectangles drawn like you see on the image.
I've got this code:
public void onRender(Canvas canvas, FFTData data, Rect rect) {
canvas.drawCircle(rect.width()/2, rect.height()/2, 200, mPaint);
for (int i = 0; i < data.bytes.length / mDivisions; i++) {
byte rfk = data.bytes[mDivisions * i];
byte ifk = data.bytes[mDivisions * i + 1];
float magnitude = (rfk * rfk + ifk * ifk);
int dbValue = (int) (10 * Math.log10(magnitude));
}
}
Where FFTData is the Fast Fourier Transformation data that Android gives me. Now in my dbValue I got the strength of the signal. mDivisions is how much bars I want. Currently set on 16 because I don't know how much I can set on the circle.
I'm stuck on how I can draw the rectangle with his center on the circle line... So I want a rectangle whose height is based on the dbValue so that I get high and low rectangles. And the center must be placed on my circle line.
Can someone help me on this math formula?
Run a loop over all 360 degrees of the circle (at wanted step), and, for each point, convert Polar (this angle and the radius of the circle) coordinates into Cartesian, as described here, for instance. This way you get the location of the centre of your rectangle.
Translate the system of the coordinates, making origin to be at the wanted point on the circle line and then rotate by the circle angle at that point.
Alternatively, you can build a trapezoid by getting corners at angle +- some offset and radius +- some offset (proportional to your value to plot). It will have shorter inner edge and longer outer edge. Such trapezoids may look better if painted side by side.
i think all you have needed is a pencil and a paper and a little math and also some free time to play :-)
public class MainActivity extends Activity {
ImageView drawingImageView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
drawingImageView = (ImageView) this.findViewById(R.id.DrawingImageView);
Paint paint;
paint = new Paint();
paint.setColor(Color.GREEN);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(16);
final Bitmap bitmap = Bitmap.createBitmap((int) getWindowManager()
.getDefaultDisplay().getWidth(), (int) getWindowManager()
.getDefaultDisplay().getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
int centerX =400;
int centerY =400;
int R = 200;
canvas.drawCircle(centerX, centerY, R, paint);
int h = 100;
paint.setColor(Color.RED);
Path p = new Path();
p.moveTo(centerX + R - h/2, centerY);
p.lineTo(centerX + R + h/2, centerY);
canvas.drawPath(p, paint);
p = mySpectrumDrawer(centerX,centerY,R,h,15);
canvas.drawPath(p, paint);
h = 50;
p = mySpectrumDrawer(centerX,centerY,R,h,30);
canvas.drawPath(p, paint);
h = 60;
p = mySpectrumDrawer(centerX,centerY,R,h,60);
canvas.drawPath(p, paint);
h = 80;
p = mySpectrumDrawer(centerX,centerY,R,h,90);
canvas.drawPath(p, paint);
drawingImageView.setImageBitmap(bitmap);
}
private Path mySpectrumDrawer(int centerX, int centerY,int R,int height, int angel){
Path p = new Path();
int dX = (int) (R*(Math.cos(Math.toRadians(angel))));
int dY = (int) (R*(Math.sin(Math.toRadians(angel))));
int dhx = (int) (height/2*(Math.cos(Math.toRadians(angel))));
int dhy = (int) (height/2*(Math.sin(Math.toRadians(angel))));
p.moveTo(centerX + dX - dhx , centerY - dY + dhy);
p.lineTo(centerX + dX + dhx , centerY - dY - dhy);
return p;
}
}
I'm drawing a circle and I want on the circle line rectangles that are rotated in the right degree. Like on this image:
With the help off someone on SO I've found a way to do that (almost).
I've got this:
Like you see there are 2 things missing:
1) they are not on the circle line
2) They are not rotated
I know how to rotate on a canvas in android but then they are all mixed up.
This is my code:
int r = 200;
canvas.save();
mPaint.setStyle(Paint.Style.STROKE);
canvas.translate(rect.width() / 2, rect.height() / 2);
canvas.drawCircle(0, 0, r, mPaint);
mPaint.setStyle(Paint.Style.FILL);
for (int alpha = 0; alpha <= 360; alpha += 20) {
double x = r/3 * Math.cos(Math.toRadians(alpha));
double y = r/3 * Math.sin(Math.toRadians(alpha));
canvas.translate((float)x, (float)y);
canvas.drawRect(0, 0, 70, 20, mPaint);
}
canvas.restore();
Can someone point me out on what I'm doing wrong, why they aren't showing on the line of the circle? And second how to rotate, because when I do canvas.rotate(alpha) they aren't in a circle anymore.
EDIT:
My code is now like this:
int r = 200;
canvas.save();
mPaint.setStyle(Paint.Style.STROKE);
canvas.translate(rect.width() / 2, rect.height() / 2);
canvas.drawCircle(0, 0, r, mPaint);
mPaint.setStyle(Paint.Style.FILL);
for (int alpha = 0; alpha <= 360; alpha += 20) {
double x = r * Math.cos(Math.toRadians(alpha));
double y = r * Math.sin(Math.toRadians(alpha));
canvas.rotate(20.f);
canvas.drawRect(0, 0, 70, 20, mPaint);
}
canvas.restore();
and it gives me this:
EDIT 2:
code is like:
int r = 200;
canvas.save();
mPaint.setStyle(Paint.Style.STROKE);
canvas.translate(rect.width() / 2, rect.height() / 2);
canvas.drawCircle(0, 0, r, mPaint);
mPaint.setStyle(Paint.Style.FILL);
for (int alpha = 0; alpha <= 360; alpha += 20) {
double x = r * Math.cos(Math.toRadians(alpha));
double y = r * Math.sin(Math.toRadians(alpha));
canvas.rotate(20.f);
canvas.save();
canvas.translate(0, -200);
canvas.drawRect(0, 0, 70, 20, mPaint);
canvas.restore();
}
canvas.restore();
Result:
Doing a rotation with a translation sounds like an impossible task. Draw your rectangles straight and rotate the Canvas with Canvas.rotate() instead.
See: Canvas API