Canvas.drawLines() produces gaps between linesPaint.setStrokeJoin doesn't work with canvas.drawLinesWhat is the difference between “px”, “dip”, “dp” and “sp”?How do I pass data between Activities in Android application?What is the difference between gravity and layout_gravity in Android?Drawing a line with a certain pixel widthWhat is the difference between match_parent and fill_parent?Android: onDraw method using DrawPoint() causing jitter and distortion on canvasDrawing a line on imageViewAndroid android.graphics.Path width limited to 2036?drawLines method produces strange effect on scaled CanvasUndo/Redo not working in android Canvas
Housemarks (superimposed & combined letters, heraldry)
Use 1 9 6 2 in this order to make 75
ASCII Meme Arrow Generator
Why is the length of the Kelvin unit of temperature equal to that of the Celsius unit?
How to befriend someone who doesn't like to talk?
What is the Leave No Trace way to dispose of coffee grounds?
C++ logging library
What differences exist between adamantine and adamantite in all editions of D&D?
A life of PhD: is it feasible?
How to get depth and other lengths of a font?
Canada travel to US using Global Entry
Do you really need a KDF when you have a PRF?
Why do radiation hardened IC packages often have long leads?
Are the guests in Westworld forbidden to tell the hosts that they are robots?
Make Gimbap cutter
Is it safe to remove python 2.7.15rc1 from Ubuntu 18.04?
How (un)safe is it to ride barefoot?
A Salute to Poetry
Cathode rays and the cathode rays tube
Convert only certain words to lowercase
Can the removal of a duty-free sales trolley result in a measurable reduction in emissions?
Extracting data from Plot
Was Self-modifying-code possible just using BASIC?
Is Lambda Calculus purely syntactic?
Canvas.drawLines() produces gaps between lines
Paint.setStrokeJoin doesn't work with canvas.drawLinesWhat is the difference between “px”, “dip”, “dp” and “sp”?How do I pass data between Activities in Android application?What is the difference between gravity and layout_gravity in Android?Drawing a line with a certain pixel widthWhat is the difference between match_parent and fill_parent?Android: onDraw method using DrawPoint() causing jitter and distortion on canvasDrawing a line on imageViewAndroid android.graphics.Path width limited to 2036?drawLines method produces strange effect on scaled CanvasUndo/Redo not working in android Canvas
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I use drawLines() on my dataset of points. It's drawn perfectly when it starts from (0,0), but when the dataset starts from another point it produces some gaps.
Here the chart starting with (0, 0) (added small line at left bottom):
Here it starts from from (83, 56) and produces gap:
What I've tried:
- Setting on/off anti-alias.
- Different datasets (they all produce gap at the top y point if there is nothing drawn at (0, 0).
- I've read about trying
drawPath(), but since I need to draw lots of lines it was said to be not as effecient asdrawLines().
Here are some snippets from my project:
My dataset:x =
0,12,83,84,84,121,121,128,128,151,151,173,173,203,203,217,217,224,224,229,229,253,253,294,294,305,305,331,331,355,355,364,364,409,409,411,411,416,416,431,431,448,448,497,497,504,504,508,508,536,536,582,582,586,586,630,630,646,646,660,660,689,689,728,728,761,761,768,768,798,798,822,822,860,860,894,894,908,908,952,952,996,996,1039,1039,1085,1085,1085,1085,1099,1099,1119,1119,1133,1133,1169
y =
0,12,56,115,115,220,220,232,232,170,170,350,350,117,117,157,157,205,205,290,290,184,184,127,127,181,181,231,231,210,210,278,278,142,142,120,120,299,299,29,29,290,290,50,50,258,258,127,127,203,203,168,168,27,27,27,27,83,83,116,116,228,228,295,295,62,62,299,299,121,121,216,216,266,266,164,164,234,234,116,116,182,182,130,130,208,208,218,218,202,202,85,85,59,59,114
How I set my Paint:
private void init()
chartPaint = new Paint();
chartPaint.setStyle(Paint.Style.STROKE);
chartPaint.setStrokeWidth(4);
chartPaint.setColor(color);
My onDraw():
@Override
protected void onDraw(Canvas canvas)
super.onDraw(canvas);
canvas.save();
// let chart start from the most left without gaps
canvas.translate(0, viewHeight);
// TODO: find place to move calcs outside onDraw()
final float xScale = (float) viewWidth / (Util.getMax(x) - Util.getMin(x));
final float yScale = (float) -viewHeight / (Util.getMax(y) - Util.getMin(y));
valuesScaled = new float[values.length];
for (int i = 0; i < values.length; i++)
valuesScaled[i] = (i%2==0) ? values[i] * xScale : values[i] * yScale;
canvas.drawLines(valuesScaled, chartPaint);
canvas.restore();
values array is where x and y arrays are stored alternatively, i.e. first 4 elements of values are x[0], y[0], x[1], y[1], ...
viewWidth and viewHeight are taken from onSizeChange().
android canvas asked Mar 24 at 21:43
pushandpoppushandpop
227718
add a comment |
I use drawLines() on my dataset of points. It's drawn perfectly when it starts from (0,0), but when the dataset starts from another point it produces some gaps.
Here the chart starting with (0, 0) (added small line at left bottom):
Here it starts from from (83, 56) and produces gap:
What I've tried:
- Setting on/off anti-alias.
- Different datasets (they all produce gap at the top y point if there is nothing drawn at (0, 0).
- I've read about trying
drawPath(), but since I need to draw lots of lines it was said to be not as effecient asdrawLines().
Here are some snippets from my project:
My dataset:x =
0,12,83,84,84,121,121,128,128,151,151,173,173,203,203,217,217,224,224,229,229,253,253,294,294,305,305,331,331,355,355,364,364,409,409,411,411,416,416,431,431,448,448,497,497,504,504,508,508,536,536,582,582,586,586,630,630,646,646,660,660,689,689,728,728,761,761,768,768,798,798,822,822,860,860,894,894,908,908,952,952,996,996,1039,1039,1085,1085,1085,1085,1099,1099,1119,1119,1133,1133,1169
y =
0,12,56,115,115,220,220,232,232,170,170,350,350,117,117,157,157,205,205,290,290,184,184,127,127,181,181,231,231,210,210,278,278,142,142,120,120,299,299,29,29,290,290,50,50,258,258,127,127,203,203,168,168,27,27,27,27,83,83,116,116,228,228,295,295,62,62,299,299,121,121,216,216,266,266,164,164,234,234,116,116,182,182,130,130,208,208,218,218,202,202,85,85,59,59,114
How I set my Paint:
private void init()
chartPaint = new Paint();
chartPaint.setStyle(Paint.Style.STROKE);
chartPaint.setStrokeWidth(4);
chartPaint.setColor(color);
My onDraw():
@Override
protected void onDraw(Canvas canvas)
super.onDraw(canvas);
canvas.save();
// let chart start from the most left without gaps
canvas.translate(0, viewHeight);
// TODO: find place to move calcs outside onDraw()
final float xScale = (float) viewWidth / (Util.getMax(x) - Util.getMin(x));
final float yScale = (float) -viewHeight / (Util.getMax(y) - Util.getMin(y));
valuesScaled = new float[values.length];
for (int i = 0; i < values.length; i++)
valuesScaled[i] = (i%2==0) ? values[i] * xScale : values[i] * yScale;
canvas.drawLines(valuesScaled, chartPaint);
canvas.restore();
values array is where x and y arrays are stored alternatively, i.e. first 4 elements of values are x[0], y[0], x[1], y[1], ...
viewWidth and viewHeight are taken from onSizeChange().
android canvas asked Mar 24 at 21:43
pushandpoppushandpop
227718
1
The answer is here. You cannot useCanvas.drawLines()you have to usedrawPath()to get what you want. You could usedrawLines()as a kind of preview and in the background rundrawPath()and then use that when it has finished drawing.
– Jon Goodwin
Mar 25 at 1:47
@JonGoodwin Thanks for the comment. I've trieddrawPath()and set stroke join. It produces the same gap. Do you know the possible reason for this?
– pushandpop
Mar 25 at 6:14
1
Yes. When the angle is really sharp (as in your second, highlighted peak), the miter end-point can recede to infinity. What you do is set a limit with .e.g.chartPaint.setStrokeMiter(6)see these image examplesstroke-miterlimit. You could use a round end-point, or use a cap. With thin lines, maybe you just need a cap and so use the fasterCanvas.drawLines(). Have a play and see...
– Jon Goodwin
Mar 25 at 7:21
@JonGoodwin thank you. you can post an answer - I'll accept it. Btw, you know any good resources (articles/talks/book) on android canvas/custom views?
– pushandpop
Mar 25 at 8:00
look at my back catalog of answers on graphics (my specialty) I will give you an answer, but time-poor and I only give what I consider a good answer...stay tuned... ;O)
– Jon Goodwin
Mar 27 at 23:29
add a comment |
I use drawLines() on my dataset of points. It's drawn perfectly when it starts from (0,0), but when the dataset starts from another point it produces some gaps.
Here the chart starting with (0, 0) (added small line at left bottom):
Here it starts from from (83, 56) and produces gap:
What I've tried:
- Setting on/off anti-alias.
- Different datasets (they all produce gap at the top y point if there is nothing drawn at (0, 0).
- I've read about trying
drawPath(), but since I need to draw lots of lines it was said to be not as effecient asdrawLines().
Here are some snippets from my project:
My dataset:x =
0,12,83,84,84,121,121,128,128,151,151,173,173,203,203,217,217,224,224,229,229,253,253,294,294,305,305,331,331,355,355,364,364,409,409,411,411,416,416,431,431,448,448,497,497,504,504,508,508,536,536,582,582,586,586,630,630,646,646,660,660,689,689,728,728,761,761,768,768,798,798,822,822,860,860,894,894,908,908,952,952,996,996,1039,1039,1085,1085,1085,1085,1099,1099,1119,1119,1133,1133,1169
y =
0,12,56,115,115,220,220,232,232,170,170,350,350,117,117,157,157,205,205,290,290,184,184,127,127,181,181,231,231,210,210,278,278,142,142,120,120,299,299,29,29,290,290,50,50,258,258,127,127,203,203,168,168,27,27,27,27,83,83,116,116,228,228,295,295,62,62,299,299,121,121,216,216,266,266,164,164,234,234,116,116,182,182,130,130,208,208,218,218,202,202,85,85,59,59,114
How I set my Paint:
private void init()
chartPaint = new Paint();
chartPaint.setStyle(Paint.Style.STROKE);
chartPaint.setStrokeWidth(4);
chartPaint.setColor(color);
My onDraw():
@Override
protected void onDraw(Canvas canvas)
super.onDraw(canvas);
canvas.save();
// let chart start from the most left without gaps
canvas.translate(0, viewHeight);
// TODO: find place to move calcs outside onDraw()
final float xScale = (float) viewWidth / (Util.getMax(x) - Util.getMin(x));
final float yScale = (float) -viewHeight / (Util.getMax(y) - Util.getMin(y));
valuesScaled = new float[values.length];
for (int i = 0; i < values.length; i++)
valuesScaled[i] = (i%2==0) ? values[i] * xScale : values[i] * yScale;
canvas.drawLines(valuesScaled, chartPaint);
canvas.restore();
values array is where x and y arrays are stored alternatively, i.e. first 4 elements of values are x[0], y[0], x[1], y[1], ...
viewWidth and viewHeight are taken from onSizeChange().
android canvas asked Mar 24 at 21:43
pushandpoppushandpop
227718
I use drawLines() on my dataset of points. It's drawn perfectly when it starts from (0,0), but when the dataset starts from another point it produces some gaps.
Here the chart starting with (0, 0) (added small line at left bottom):
Here it starts from from (83, 56) and produces gap:
What I've tried:
- Setting on/off anti-alias.
- Different datasets (they all produce gap at the top y point if there is nothing drawn at (0, 0).
- I've read about trying
drawPath(), but since I need to draw lots of lines it was said to be not as effecient asdrawLines().
Here are some snippets from my project:
My dataset:x =
0,12,83,84,84,121,121,128,128,151,151,173,173,203,203,217,217,224,224,229,229,253,253,294,294,305,305,331,331,355,355,364,364,409,409,411,411,416,416,431,431,448,448,497,497,504,504,508,508,536,536,582,582,586,586,630,630,646,646,660,660,689,689,728,728,761,761,768,768,798,798,822,822,860,860,894,894,908,908,952,952,996,996,1039,1039,1085,1085,1085,1085,1099,1099,1119,1119,1133,1133,1169
y =
0,12,56,115,115,220,220,232,232,170,170,350,350,117,117,157,157,205,205,290,290,184,184,127,127,181,181,231,231,210,210,278,278,142,142,120,120,299,299,29,29,290,290,50,50,258,258,127,127,203,203,168,168,27,27,27,27,83,83,116,116,228,228,295,295,62,62,299,299,121,121,216,216,266,266,164,164,234,234,116,116,182,182,130,130,208,208,218,218,202,202,85,85,59,59,114
How I set my Paint:
private void init()
chartPaint = new Paint();
chartPaint.setStyle(Paint.Style.STROKE);
chartPaint.setStrokeWidth(4);
chartPaint.setColor(color);
My onDraw():
@Override
protected void onDraw(Canvas canvas)
super.onDraw(canvas);
canvas.save();
// let chart start from the most left without gaps
canvas.translate(0, viewHeight);
// TODO: find place to move calcs outside onDraw()
final float xScale = (float) viewWidth / (Util.getMax(x) - Util.getMin(x));
final float yScale = (float) -viewHeight / (Util.getMax(y) - Util.getMin(y));
valuesScaled = new float[values.length];
for (int i = 0; i < values.length; i++)
valuesScaled[i] = (i%2==0) ? values[i] * xScale : values[i] * yScale;
canvas.drawLines(valuesScaled, chartPaint);
canvas.restore();
values array is where x and y arrays are stored alternatively, i.e. first 4 elements of values are x[0], y[0], x[1], y[1], ...
viewWidth and viewHeight are taken from onSizeChange().
android canvas android canvas asked Mar 24 at 21:43
pushandpoppushandpop
227718
asked Mar 24 at 21:43
pushandpoppushandpop
227718
edited Mar 24 at 21:49
pushandpop
asked Mar 24 at 21:43
pushandpoppushandpop
227718
asked Mar 24 at 21:43
pushandpoppushandpop
227718
asked Mar 24 at 21:43
pushandpoppushandpop
227718
227718
1
The answer is here. You cannot useCanvas.drawLines()you have to usedrawPath()to get what you want. You could usedrawLines()as a kind of preview and in the background rundrawPath()and then use that when it has finished drawing.
– Jon Goodwin
Mar 25 at 1:47
@JonGoodwin Thanks for the comment. I've trieddrawPath()and set stroke join. It produces the same gap. Do you know the possible reason for this?
– pushandpop
Mar 25 at 6:14
1
Yes. When the angle is really sharp (as in your second, highlighted peak), the miter end-point can recede to infinity. What you do is set a limit with .e.g.chartPaint.setStrokeMiter(6)see these image examplesstroke-miterlimit. You could use a round end-point, or use a cap. With thin lines, maybe you just need a cap and so use the fasterCanvas.drawLines(). Have a play and see...
– Jon Goodwin
Mar 25 at 7:21
@JonGoodwin thank you. you can post an answer - I'll accept it. Btw, you know any good resources (articles/talks/book) on android canvas/custom views?
– pushandpop
Mar 25 at 8:00
look at my back catalog of answers on graphics (my specialty) I will give you an answer, but time-poor and I only give what I consider a good answer...stay tuned... ;O)
– Jon Goodwin
Mar 27 at 23:29
add a comment |
1
The answer is here. You cannot useCanvas.drawLines()you have to usedrawPath()to get what you want. You could usedrawLines()as a kind of preview and in the background rundrawPath()and then use that when it has finished drawing.
– Jon Goodwin
Mar 25 at 1:47
@JonGoodwin Thanks for the comment. I've trieddrawPath()and set stroke join. It produces the same gap. Do you know the possible reason for this?
– pushandpop
Mar 25 at 6:14
1
Yes. When the angle is really sharp (as in your second, highlighted peak), the miter end-point can recede to infinity. What you do is set a limit with .e.g.chartPaint.setStrokeMiter(6)see these image examplesstroke-miterlimit. You could use a round end-point, or use a cap. With thin lines, maybe you just need a cap and so use the fasterCanvas.drawLines(). Have a play and see...
– Jon Goodwin
Mar 25 at 7:21
@JonGoodwin thank you. you can post an answer - I'll accept it. Btw, you know any good resources (articles/talks/book) on android canvas/custom views?
– pushandpop
Mar 25 at 8:00
look at my back catalog of answers on graphics (my specialty) I will give you an answer, but time-poor and I only give what I consider a good answer...stay tuned... ;O)
– Jon Goodwin
Mar 27 at 23:29
1
1
The answer is here. You cannot use
Canvas.drawLines() you have to use drawPath() to get what you want. You could use drawLines() as a kind of preview and in the background run drawPath() and then use that when it has finished drawing.– Jon Goodwin
Mar 25 at 1:47
The answer is here. You cannot use
Canvas.drawLines() you have to use drawPath() to get what you want. You could use drawLines() as a kind of preview and in the background run drawPath() and then use that when it has finished drawing.– Jon Goodwin
Mar 25 at 1:47
@JonGoodwin Thanks for the comment. I've tried
drawPath() and set stroke join. It produces the same gap. Do you know the possible reason for this?– pushandpop
Mar 25 at 6:14
@JonGoodwin Thanks for the comment. I've tried
drawPath() and set stroke join. It produces the same gap. Do you know the possible reason for this?– pushandpop
Mar 25 at 6:14
1
1
Yes. When the angle is really sharp (as in your second, highlighted peak), the miter end-point can recede to infinity. What you do is set a limit with .e.g.
chartPaint.setStrokeMiter(6) see these image examples stroke-miterlimit. You could use a round end-point, or use a cap. With thin lines, maybe you just need a cap and so use the faster Canvas.drawLines(). Have a play and see...– Jon Goodwin
Mar 25 at 7:21
Yes. When the angle is really sharp (as in your second, highlighted peak), the miter end-point can recede to infinity. What you do is set a limit with .e.g.
chartPaint.setStrokeMiter(6) see these image examples stroke-miterlimit. You could use a round end-point, or use a cap. With thin lines, maybe you just need a cap and so use the faster Canvas.drawLines(). Have a play and see...– Jon Goodwin
Mar 25 at 7:21
@JonGoodwin thank you. you can post an answer - I'll accept it. Btw, you know any good resources (articles/talks/book) on android canvas/custom views?
– pushandpop
Mar 25 at 8:00
@JonGoodwin thank you. you can post an answer - I'll accept it. Btw, you know any good resources (articles/talks/book) on android canvas/custom views?
– pushandpop
Mar 25 at 8:00
look at my back catalog of answers on graphics (my specialty) I will give you an answer, but time-poor and I only give what I consider a good answer...stay tuned... ;O)
– Jon Goodwin
Mar 27 at 23:29
look at my back catalog of answers on graphics (my specialty) I will give you an answer, but time-poor and I only give what I consider a good answer...stay tuned... ;O)
– Jon Goodwin
Mar 27 at 23:29
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55328863%2fcanvas-drawlines-produces-gaps-between-lines%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55328863%2fcanvas-drawlines-produces-gaps-between-lines%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
The answer is here. You cannot use
Canvas.drawLines()you have to usedrawPath()to get what you want. You could usedrawLines()as a kind of preview and in the background rundrawPath()and then use that when it has finished drawing.– Jon Goodwin
Mar 25 at 1:47
@JonGoodwin Thanks for the comment. I've tried
drawPath()and set stroke join. It produces the same gap. Do you know the possible reason for this?– pushandpop
Mar 25 at 6:14
1
Yes. When the angle is really sharp (as in your second, highlighted peak), the miter end-point can recede to infinity. What you do is set a limit with .e.g.
chartPaint.setStrokeMiter(6)see these image examplesstroke-miterlimit. You could use a round end-point, or use a cap. With thin lines, maybe you just need a cap and so use the fasterCanvas.drawLines(). Have a play and see...– Jon Goodwin
Mar 25 at 7:21
@JonGoodwin thank you. you can post an answer - I'll accept it. Btw, you know any good resources (articles/talks/book) on android canvas/custom views?
– pushandpop
Mar 25 at 8:00
look at my back catalog of answers on graphics (my specialty) I will give you an answer, but time-poor and I only give what I consider a good answer...stay tuned... ;O)
– Jon Goodwin
Mar 27 at 23:29