lineTo with a duplicate point renders a gap in a line drawing.
See original GitHub issueHey!
I was working on some line drawing and came across this potential issue:
If you create a graphics object, and then start drawing a line… when you add a duplicate point into to lineTo
method, the renderer somehow seems to add a gap in the line. I am unintentionally adding the duplicate point, so I’m not sure how much of a ‘bug’ this is… However, this is certainly “unexpected behaviour” in my eyes.
Here is a working example using the latest PIXI:
var app = new PIXI.Application(800, 600, { antialias: true });
document.body.appendChild(app.view);
var lines = [
[
[-8.154,558.886],
[121.097,294.348],
[133.744,282.209],
[134.591,281.512],
[166.995,250.542], // < --- Duplicate set of points
[166.995,250.542], // NOTE: comment this out to close the line
[167.029,250.518],
[170.649,248.128],
[172.666,246.822],
[176.68,244.274],
[178.455,243.17],
[292.488,-14.857]
]
]
lines.forEach(function(line){
var graphics = new PIXI.Graphics();
graphics.lineStyle(4, 0xffd900, 1);
line.forEach(function(point, i) {
if (i === 0) graphics.moveTo(point[0], point[1]);
else graphics.lineTo(point[0], point[1]);
})
graphics.endFill();
app.stage.addChild(graphics);
})
Issue Analytics
- State:
- Created 6 years ago
- Comments:13 (4 by maintainers)
Top Results From Across the Web
CanvasRenderingContext2D.lineTo() - Web APIs | MDN
The CanvasRenderingContext2D method lineTo() , part of the Canvas 2D API, adds a straight line to the current sub-path by connecting the ...
Read more >How to draw an outline around any line - Stack Overflow
First duplicate each line twice, once on each side at a distance of half the width you want from each original line.
Read more >How can I draw inconsecutive line chart? · Issue #533 - GitHub
So it can render like line break, but requires addtional logic to break the data sets. Will this workaround for you? I will...
Read more >advanced perspective techniques - handprint
If you are using an ellipse template, the major axis of the ellipse should be aligned either with a line to the opposite...
Read more >Reference - SolveSpace
To do so, first select a point where two line segments or circles join. Then choose Sketch → Tangent Arc at Point; the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Ignoring the call on duplicates, as @G-Rath suggested, seems to work even without digging up the moveTo polygon.
Here is an updated fiddle testing the change on this issue
and another fiddle showing the change working on #3592 despite not checking against the initial moveTo.
The change itself would look something like this
Have I overlooked anything?
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.