Module @luciad/ria/view/style/complexstroke/ComplexStrokedLineStyle

A style that can be used to stroke the outline of a shape with complex patterns.

See the step-by-step guide to complex strokes for more information.

A complex stroked line style can be used on ShapeStyle.stroke, instead of a LineStyle.

It is composed of a series of Pattern instances, which are repeated along the line as a ComplexStrokedLineStyle.fallback pattern, or which are positioned once at a specific location as decorations.

A complex stroked line style is a combination of 3 layers of patterns:

  • Pattern instances that are painted once at a specific position along the line. For example, an arrow at the start or end of a line or some text in the middle of the line.
  • Pattern that is repeated infinitely along the line. For example, a dash or wave pattern.
  • Pattern that is drawn if there is not enough room to draw decorations or the regular pattern. This pattern is usually kept as simple as possible, for example a simple PatternFactory.parallelLine() or a simple dash pattern.

Differences in complex stroked lines on a WebGLMap and a non-WebGLMap

  • On non-WebGL Maps, some complex stroked lines do not follow the curvature of the line as nicely as on WebGLMaps (for example, a squared pattern on a circle).
  • sharpAngleThreshold is not supported on a non-WebGLMap.
  • Complex strokes with a world size will be missing certain pattern aspects when used on a non-WebGL map.

Limitations

Shader compilation in WebGL

When using a WebGLMap, keep in mind that every unique ComplexStrokedLineStyle results in new GPU shaders being compiled. If you use a lot of different ComplexStrokedLineStyle's in your application, it might take a while before all shaders are compiled. The more complex the style is, the longer the compilation will take. Once a shader is compiled, it is re-used across multiple GeoCanvas.drawShape calls. Re-submitting the same style multiple times, does not trigger a re-compilation.

Pattern size and line width in 3D

Due to the nature of the perspective camera in 3D and varying scale along lines, you can expect certain deformations of your pattern and/or line width when looking at the line at certain angles. LuciadRIA tries to keep these at a minimum, but if your camera is roughly parallel with your line, you might notice these effects:

  • Your pattern is squeezed or stretched along the line.
  • Your line width is smaller or wider than usual.

Internet Explorer

The usage of complex stroked lines on a WebGLMap is prone to break on Internet Explorer. LuciadRIA generates GPU shaders based on the ComplexStrokedLineStyle. If these shaders become too complex for Internet Explorer to handle (too large or too much branching), the browser can become unresponsive. Because of those known issues, we do not recommend using complex stroked lines on a WebGLMap in Internet Explorer. As an alternative, you can use a non-WebGLMap or a simple LineStyle in Internet Explorer.

rotateUp in WebGL

PatternFactory.text and PatternFactory.icon have a 'rotateUp' option. This option guarantees that the text or icon is always rotated upwards. This increases legibility of the text or icon. The device running the application, needs to support float textures for this option to work on a WebGLMap. If the device does not support float textures, this option is ignored, and the text/icon will not be rotated up. To check if float textures are supported, open the "device support" sample on the device. rotateUp will always work on a non-WebGL Map.

Since

2018.1

Index

Interfaces