Comments (5)
I did have another idea of how to do this with one additional series that would only be drawn from about 20% to 100%, one layer above the grey dot. However, I couldn't find a way to have it not display from 0% to 20%, so it still didn't work to achieve the desired effect.
from android-decoview-charting.
I think I can actually make this happen by putting two charts into a FrameLayout and synchronizing the series to overlap correctly. Seems workable anyway.
from android-decoview-charting.
There is no alternative way to achieve this currently.
One feature I am considering is to introduce customizable caps for the start and end of the series. I may also consider exposing ability to change start angle for each data series.
When implemented these caps would be configured when building the SeriesItem and would replace the current setCapRounded(boolean) setting with an enumerated cap type such as CAP_CONCAVE, CAP_CONVEX, CAP_POINT, CAP_ARROW...
Unfortunately I am busy with work for a client at the moment so there is no set schedule for this feature.
If you want to implement your concave start cap for yourself take a look at the LineSeriesArc.draw() function. You can use the canvas clipping functions in here to clip the drawing area of the canvas before the line series is drawn and restore it after the draw is finished.
This would be done with something like:
public boolean draw(Canvas canvas, RectF bounds) {
...
canvas.save();
processConcaveDraw(canvas);
drawArc(canvas);
canvas.restore();
...
protected void processConcaveDraw(@NonNull Canvas canvas) {
float lineWidth = (getSeriesItem().getLineWidth() * 0.6f);
float radius = mBoundsInset.width() / 2;
float angle = (float)(Math.PI * mArcAngleStart / 180.0f);
float middleX = (float)(mBoundsInset.centerX() + radius * Math.cos(angle));
float middleY = (float)(mBoundsInset.centerY() + radius * Math.sin(angle));
Path mPath = new Path(); //TODO: don't new Path on every draw
mPath.addCircle(middleX, middleY, lineWidth, Path.Direction.CW);
canvas.clipPath(mPath, Region.Op.DIFFERENCE);
}
I made the radius here larger (60% of line width rather than 50%) than the exact size of the start cap of the line as antialiasing would probably leave some artifacts otherwise.
This will clip a concave circle into the start of the arc. The problem will be that when the arc is drawn as a full circle the end of the arc will also be clipped.
As a quick workaround, if you are not using a semi-transparent color for your arc line you could simply add a second drawArc after the canvas.restore() call that will draw over the end of the arc but not the start. For example you could offset the second arc to draw only from 180 degrees to the end point:
if (mArcAngleSweep > 270) {
canvas.drawArc(mBoundsInset,
mArcAngleStart + 180,
mArcAngleSweep - 180,
false,
mPaint);
}
With some more research required I believe an alternative approach may be to use an antialiased paint with PorterDuff.Mode.CLEAR rather than canvas clipping.
from android-decoview-charting.
So, I've taken your ideas and tried them. Clipping a circle using the path clipping does work, but has the exact problem you outlined. The quick workaround really doesn't work for semi-transparent arcs, which you noted. I'll see if I can figure out this CLEAR paint method, and see if that is workable.
One other deficiency is that the clipped circle diameter doesn't quite match the round end-cap diameter, so the arc doesn't quite close at 100%. Here's what I have after a bit of tuning:
With non-transparent paint, this is very nearly what I need, but wouldn't be generic enough for the rest of your users, most likely.
from android-decoview-charting.
Did a little polishing. Unfortunately, as I polish, it makes your code somewhat uglier, but I sent a PR #6 just to show you, and you can do something similar but better.
I solved the double drawn circle at 320 degrees, and also made it work with edge effects.
I tried putting in some CLEAR paint, but it just kept looking like a darker spot on the ring. It didn't seem to actually erase the pixels at that spot. So I had to draw the ring in two passes, and path mask the drawing twice to avoid overlap.
from android-decoview-charting.
Related Issues (20)
- Line width completely different for different screen sizes HOT 5
- Point and arrow at the edges of the series
- How to fixed one series and overlap two other serieses
- Large load on CPU HOT 2
- Series item with start angle
- how to add gradient to Series Item ? HOT 1
- TextView HOT 1
- Series label gets hidden HOT 4
- How to only use one of the charts
- In File SampleFragment4
- Decoview gets hide
- Label on point series
- Dyanamically changing the percentage value HOT 2
- Decoview with labels at fixed position
- Bug refreshing UI
- Change position of Label Text to end of progress of each SeriesItem
- How to draw line path on top of arc
- Is there any way to show big circle end of the progress
- Is there a way to add a gradient colour?
- Can I set click events? How to set up
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from android-decoview-charting.