Search code examples
javascriptcanvaspixi.js

How draw an open line or unclosed path pixi.js


I am trying to draw a zig-zagged line across the canvas with a 6px colored stroke with no fill. However the shape is always closed and connects an unwanted line back to the origin. How can I prevent pixi.js from closing the path.

  @line = new PIXI.Graphics
  @line.lineStyle(6, color)
  stage.addChild(@line)

  @line.moveTo markX,markY

  for row, col in rows
    @line.lineTo(@getSymbolX(col)-spanDistance, @getSymbolY(row))
    @line.lineTo(@getSymbolX(col)+spanDistance, @getSymbolY(row))

  @line.lineTo(@getSymbolX(4) + 60, @getSymbolY(rows[4]))
  @line.lineStyle(0, color)

enter image description here

PIXI 3.07 has introduced a bug https://github.com/pixijs/pixi.js/issues/1892 a workaround solution is to use the following graphics.currentPath.shape.closed = false


Solution

  • Try this:

    @line.currentPath.shape.closed = false;

    https://github.com/pixijs/pixi.js/issues/2014

    EDIT: Or in 2022:

    graphics.currentPath.closeStroke = false;