question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

lineTo with a duplicate point renders a gap in a line drawing.

See original GitHub issue

Hey!

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:closed
  • Created 6 years ago
  • Comments:13 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
gooderistcommented, Aug 21, 2018

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

    lineTo(x, y)
    {
        const points = this.currentPath.shape.points;
        const prevY = points[points.length - 1];
        const prevX = points[points.length - 2];

        // Skip if x,y matches last lineTo coordinates
        if (prevX !== x || prevY !== y)
        {
            this.currentPath.shape.points.push(x, y);
            this.dirty++;
        }

        return this;
    }

Have I overlooked anything?

0reactions
lock[bot]commented, Feb 24, 2020

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found