Spaces between arcs in canvas - android

The goal is to draw a circle having arcs that representing time slices. I have done this:
The problem is that there is a white space between each arch and I want to remove it. Also, the arcs are not aligned. This is my code:
int x = getWidth()/2;
int y = getHeight()/2;
int stroke = 20;
int radiusExternal = 250;
final RectF rect2 = new RectF();
rect2.set(x - radiusExternal, y - radiusExternal, x + radiusExternal, y + radiusExternal);
for (int i = 0; i < modProgram.getListEvents().size(); i++) {
ModEvent event = modProgram.getListEvents().get(i);
Paint paint2 = new Paint();
paint2.setColor(getColorEvent(event));
paint2.setStrokeWidth(stroke);
paint2.setAntiAlias(true);
paint2.setStrokeCap(Paint.Cap.BUTT);
paint2.setStyle(Paint.Style.STROKE);
int initialAngle = getInitialAngle(modProgram, event.getStartEvent());
int sweepAngle = getSweepAngle(modProgram, event, initialAngle);
canvas.drawArc(rect2, initialAngle, sweepAngle, false, paint2);
}

This is probably only a partial answer to deal with the gap between the arc-segments.
Here's a fiddle with javascript: http://jsfiddle.net/oakvLadb/
I've just randomly generated some start- and stop-angles.
The important part lies in the drawing of the arc:
ctx.arc(c.width/2,c.height/2,radius,startAngle,stopAngle+anglePadding);
The anglePadding is there to make sure that a little extra is drawn. When the next segment starts off being drawn from the previous segment's stopAngle, there will be a slit overlapp, making sure no gap is visible.
Next for the poor fit of the arc-segments
When it comes to the fact that it seems like the segments aren't meeting up correctly, the only thing I can think of is that the segments that you're drawing are not those of a perfect circle but an oval, and that's why they're not meeting up correctly. If your rect2 variable doesn't hold data for a perfect square, your segments won't match.
It looks like you do have a perfect square so they should align. Somewhere, there's a rounding error of some kind...

Instead of drawing each Arc next to each other, you can draw larger arcs like layer drawing.
Sorry for my english.

I solve this problem by setting LayerType to LAYER_TYPE_SOFTWARE. like below.
setLayerType(View.LAYER_TYPE_SOFTWARE, null);

export const data = {
labels: ['a', 'b', 'c', 'd'],
datasets: [
{
label: 'Label',
data: [1298, 1798, 2500, 2200],
backgroundColor: [
'#687EEB',
'#FF4B5F',
'#AA71F2',
'#F29741',
],
borderColor: [
'#687EEB',
'#FF4B5F',
'#AA71F2',
'#F29741',
],
borderRadius: [
10,
10,
10,
10,
],
spacing: 20, // i think, this is what you need
borderWidth: 0,
cutout: '80%',
borderAlign: "inner"
},
],
};

Related

Text in pdf-file has mysterious spaces

I am trying to export text to a pdf document using the standard PDFdocument class in android. The code creates a pdf but in the text I write to the PDF, it put mysterious spaces half in words.
Tried using the canvas.drawText option and the drawItemn option.
Both give the same result. The problem code-line is almost at the bottom of the sample code below.
PdfDocument.PageInfo pageInfo = new PdfDocument.PageInfo.Builder(mPageWidth, mPageHeight, pageNr).create();
PdfDocument.Page page = doc.startPage(pageInfo);
Memory memory = mMemoryData.get(pageNr);
Canvas canvas = page.getCanvas();
TextPaint paint = new TextPaint();
paint.setColor(Color.BLACK);
//Header
Yposition = drawItem( canvas,
paint,
18,
true,
Xposition,
Yposition,
memory.getTitle() );
//line
Yposition += 14; //Extra offset to get some space between the text and line
paint.setColor( ContextCompat.getColor(this, R.color.default_Accent) );
canvas.drawLine( Xposition, Yposition, pageInfo.getPageWidth() - Xposition, Yposition, paint );
Yposition += 20;
paint.setColor(Color.BLACK);
paint.setTextSize(10);
// **this is the line that gives the problem**
canvas.drawText(memory.getText(),Xposition, Yposition, paint);
doc.finishPage(page);
The result of this action is:
At first sight this looks ok but if you zoom in a bit or better yet copy/past the text into notepad (or something) you get this:
No w le ts try this
In stead of the problem line, I also tried this:
drawItem( canvas, paint, 10, false, Xposition, Yposition, memory.getText() );
This has some benefits especially with bigger text but other that that it gives the same problem.
Does anybody have an idea how to solve this?
Thanks to the tip from Henry the problem is now solved.
For others having the same problem:
i was close with the setting of the font but "Arial" just doesn't work
This also goes for "Typeface.SANS_SERIF". I kept getting these strange spaces in my text.
Now it put it like below.
paint.setTypeface(Typeface.create( Typeface.MONOSPACE, Typeface.NORMAL));
Not the best looking text markup but it does the trick for now.

How to draw equidistant dashes using DashPathEffect

At the moment I’m using DashPathEffect with hardcoded intervals to draw a circle as next:
float[] intervals = new float[]{ 3, 18 };
DashPathEffect path = new DashPathEffect(intervals, 0);
paint.setPathEffect(path);
… … … …
canvas.drawCircle(x, y, radius, paint);
But this produces a non-equidistant dash where the circle starts and ends, as shown in the image below:
I can of course adjust it manually, but this would only work for one specific device density, and produce again the same problem in a different display density.
What would the formula to calculate equidistant dashes?
You need n dashes plus n gaps to have the same total length as the circumference of the circle. The below code assumes you've correctly determined both the center point and the radius you want to use.
double circumference = 2 * Math.PI * radius;
float dashPlusGapSize = (float) (circumference / NUM_DASHES);
intervals[0] = dashPlusGapSize * DASH_PORTION;
intervals[1] = dashPlusGapSize * GAP_PORTION;
DashPathEffect effect = new DashPathEffect(intervals, 0);
paint.setPathEffect(effect);
canvas.drawCircle(center, center, radius, paint);
For instance, I've used NUM_DASHES = 20, DASH_PORTION = 0.75f, and GAP_PORTION = 0.25f, and I see:
You can use different values for these constants to change how many dashes you chop the cirlce into, or how big the dash/gap are relative to each other (as long as DASH_PORTION + GAP_PORTION adds up to 1).
In case you have a different figure you can use this method to measure your custom path length:
val measure = PathMeasure(path, false)
val length = measure.getLength()

Drawing path gradually in Android

I have a custom view, around which I want to draw a path, like a border.
But the border should draw itself gradually, like a snake growing in size.
The aim is to use it as a timer for a player to make his move in a game.
I used the Path class and the methods lineTo and addArc to draw the border.
timerPath = new Path();
timerPath.moveTo(getTranslationX() + width / 2, getTranslationY() + 3);
timerPath.lineTo(getTranslationX() + width - 10, getTranslationY() + 3);
timerPath.addArc(new RectF(getTranslationX() + width - 20, getTranslationY() + 3,
getTranslationX() + width - 3, getTranslationY() + 20), -90f, 90f);
...
...
timerPath.lineTo(getTranslationX() + width / 2, getTranslationY() + 3);
timerPaint = new Paint();
timerPaint.setColor(Color.GREEN);
timerPaint.setStyle(Paint.Style.STROKE);
timerPaint.setStrokeWidth(6);
I use the drawPath() method in onDraw:
canvas.drawPath(timerPath, timerPaint);
It looks well.
Now, I wonder if there is a way to draw just part of the path using percentage (10%, 11%, 12% .. etc).
Then I'll be able to animate the drawing.
If it's not possible, is there another way of animating border drawing? (to use as a timer)
Appreciate your help.
You can use the PathMeasure class to do this. Create a PathMeasure object from your path, measure the length and then use getSegment() to return a partial path that you can draw to the canvas:
float percentage = 50.0f; // initialize to your desired percentage
PathMeasure measure = new PathMeasure(timerPath, false);
float length = measure.getLength();
Path partialPath = new Path();
measure.getSegment(0.0f, (length * percentage) / 100.0f, partialPath, true);
partialPath.rLineTo(0.0f, 0.0f); // workaround to display on hardware accelerated canvas as described in docs
canvas.drawPath(partialPath, timerPaint);

Chase player with camera in AndEngine and limit world's bounds

Using AndEngine for Android, I would like to have my scene look like this:
The red box is the world which must be limited to a given size, say 2000px*450px.
The blue box is the Camera, which is limited as well (as usual), for example to 750px*450px.
For the whole scene, I have a background image that is exactly 450px high. So my Camera can be scaled to whatever size is appropriate, but the background must exactly fit to the height. The width of the Camera may be variable.
The player (circle) must always be in the center (horizontally) but may not leave the world's boundaries.
To achieve this, I've tried adding two types of sizes:
camera size (CAMERA_WIDTH, CAMERA_HEIGHT)
world size (WORLD_WIDTH, WORLD_HEIGHT)
And this function was to add boundaries to the world so that the physics engine prevents the player from leaving those boundaries:
private void createWorldBoundaries() {
Body body;
final Rectangle wall_top = new Rectangle(0, WORLD_HEIGHT-5, WORLD_WIDTH, 10, mVertexManager);
final Rectangle wall_bottom = new Rectangle(0, 5, WORLD_WIDTH, 10, mVertexManager);
final Rectangle wall_left = new Rectangle(5, 0, 10, WORLD_HEIGHT, mVertexManager);
final Rectangle wall_right = new Rectangle(WORLD_WIDTH-5, 0, 10, WORLD_HEIGHT, mVertexManager);
body = PhysicsFactory.createBoxBody(mPhysicsWorld, wall_top, BodyType.StaticBody, new PhysicsFactory.createFixtureDef(0.0f, 0.5f, 0.5f));
wall_top.setUserData(body);
body = PhysicsFactory.createBoxBody(mPhysicsWorld, wall_bottom, BodyType.StaticBody, new PhysicsFactory.createFixtureDef(0.0f, 0.5f, 0.5f));
wall_bottom.setUserData(body);
body = PhysicsFactory.createBoxBody(mPhysicsWorld, wall_left, BodyType.StaticBody, new PhysicsFactory.createFixtureDef(0.0f, 0.5f, 0.5f));
wall_left.setUserData(body);
body = PhysicsFactory.createBoxBody(mPhysicsWorld, wall_right, BodyType.StaticBody, new PhysicsFactory.createFixtureDef(0.0f, 0.5f, 0.5f));
wall_right.setUserData(body);
attachChild(wall_top);
attachChild(wall_bottom);
attachChild(wall_left);
attachChild(wall_right);
}
But this is not working, unfortunately. (see edit)
Setting the camera to chase the player has the wrong result for me: The player does really stay in the center of the screen all time, but I want the player only to stay in the center horizontally, not vertically.
What am I doing wrong and what can I change? And the basic question is: How can I make the world wider than the camera view, while the height is equal to the camera view. The result should be that you can horizontally walk through your world (moving camera) and you can always see the full height.
Edit:
As you define the coordinates of the Rectangle's center and not its top-left corner, you have to do it like this, it seems:
final Rectangle wall_top = new Rectangle(WORLD_WIDTH/2, WORLD_HEIGHT-1, WORLD_WIDTH, 2, mVertexManager);
final Rectangle wall_bottom = new Rectangle(WORLD_WIDTH/2, FIELD_BASELINE_Y+1, WORLD_WIDTH, 2, mVertexManager);
final Rectangle wall_left = new Rectangle(1, WORLD_HEIGHT/2, 2, WORLD_HEIGHT, mVertexManager);
final Rectangle wall_right = new Rectangle(WORLD_WIDTH-1, WORLD_HEIGHT/2, 2, WORLD_HEIGHT, mVertexManager);
However, I had found the other solution in several tutorials. Are these authors not testing their code before writing the tutorials or did the behaviour change from GLES1 to GLES2 or with any recent version?
i think your question about the world boundaries is self answered, isn't it?
PhysicsWorld Boundaries
for further research you can download nicolas' AndEngine Examples App from the Play Store and look up the different examples here (GLES_2, didn't look for AnchorCenter yet): https://github.com/nicolasgramlich/AndEngineExamples/tree/GLES2/src/org/andengine/examples
Taken from the PhysicsExample, the code for the rectangles should look like this, if the bounds are set to the camera bounds. in your case, you can extend width like you want (3 times CAMERA_WIDTH?)
final Rectangle ground = new Rectangle(0, CAMERA_HEIGHT - 2, WORLD_WIDTH, 2, vertexBufferObjectManager);
final Rectangle roof = new Rectangle(0, 0, WORLD_WIDTH, 2, vertexBufferObjectManager);
final Rectangle left = new Rectangle(0, 0, 2, CAMERA_HEIGHT, vertexBufferObjectManager);
final Rectangle right = new Rectangle(WORLD_WIDTH - 2, 0, 2, CAMERA_HEIGHT, vertexBufferObjectManager);
Camera following player
for the Camera to follow your player, you can lookup the code of the BoundCameraExample https://github.com/nicolasgramlich/AndEngineExamples/blob/GLES2/src/org/andengine/examples/BoundCameraExample.java
the interesting part for you should be the addFace method at the bottom
private void addFace(final float pX, final float pY) {
final FixtureDef objectFixtureDef = PhysicsFactory.createFixtureDef(1, 0.5f, 0.5f);
final AnimatedSprite face = new AnimatedSprite(pX, pY, this.mBoxFaceTextureRegion, this.getVertexBufferObjectManager()).animate(100);
final Body body = PhysicsFactory.createBoxBody(this.mPhysicsWorld, face, BodyType.DynamicBody, objectFixtureDef);
this.mScene.attachChild(face);
this.mPhysicsWorld.registerPhysicsConnector(new PhysicsConnector(face, body, true, true));
this.mBoundChaseCamera.setChaseEntity(face);
}
this method creates a physics body + sprite for "your player" (in this case, a boxed face) and sets the sprite as a chaseEntity for the camera to follow. Since the camera has bounds, that it can't exceed and your camera will have the height of your PhysicWorld boundaries, you can use this to let your camera follow the player in x, but not in y direction.
if you (i don't know why) don't want to use these boundaries, you can overwrite the onUpdate method of your Sprite and re-locate your camera only in x-direction, instead of xy coords
face.registerUpdateHandler(new IUpdateHandler() {
#Override
public void onUpdate(final float pSecondsElapsed) {
float[] coord = face.getSceneCenterCoordinates();
this.mBoundChaseCamera.setCenter(sceneCenterCoordinates[0], CAMERA_Y_POSITION);
}
}
where the CAMERA_Y_POSITION is a static final field with the y-position.
I hope this answers your question(s). :-)
edit: oops, i forgot to mention, how to achieve the camera to be bound and i will edit the world width above:
this.mBoundChaseCamera.setBounds(0, 0,
WORLD_WIDTH, CAMERA_HEIGHT);
all settings are like your image given (except the exact position of the face, that has to be given to the addFace(px, py))
Edit: Difference between scene boundaries in Andengine GLES2 vs GLES2-AnchorCenter
As far as i understood the question, i thought you would use GLES2, i thought of the (older) default GLES2 branch of AndEngine and posted the boundaries. As you found out yourself before and stated in the comments, you use another approach to set the rectangles - where you need to set the rectangles center as pX and pY. The reason for this is in fact, that with the AnchorCenter branch, you won't set the upper left position of an entity anymore and instead use it's center position.

How to change the center of mass?

I am try
MassData md = mBody.getMassData();
md.center.set(2f, 0); mBody.setMassData(md);
But this is not working properly. Help me do this correctly.
I want add a bit more weight to the bottom half of my body.
Instead of trying to change mass directly, what you want to do is to add an extra fixture to the bottom of your body. You can do it e.g. like this (this is a snippet, not complete code; create your textures, scene etc).
Sprite sprite = new Sprite(CAMERA_WIDTH / 2, CAMERA_HEIGHT / 2, 32, 32, mDTextureRegion, vbom);
Body body = PhysicsFactory.createCircleBody(mPhysicsWorld, sprite, BodyType.DynamicBody, PhysicsFactory.createFixtureDef(0.5f, 0.5f, 0.5f)); // create a simple circle body from the sprite
scene.attachChild(sprite);
Debug.i("ORIG MASS Y: " + body.getMassData().center.y); // this is just generated info
FixtureDef fd = PhysicsFactory.createFixtureDef(10f, 1f, 1f, true); // high density fixture; it is a sensor, i.e. it won't affect collisions
CircleShape cs = new CircleShape();
cs.setRadius(0.1f); // make it very small
fd.shape = cs;
cs.setPosition(new Vector2(0, -0.5f)); // attach below the current centre
body.createFixture(fd); // attach to body
Debug.i("NEW MASS Y: " + mDBody.getMassData().center.y); // the generated info changed
mPhysicsWorld.registerPhysicsConnector(new PhysicsConnector(sprite, body, true, true));
This example body will behave like a spintop, it will try to reposition itself so the bottom of the sprite will touch the ground. When you rotate it, it will try to get to that position again.

Categories

Resources