Class HatchedImageBuilder

Builder for creating a hatched image with a given line width and color. A typical use case of such a hatched image is as image in a FillStyle.

The generated image will only contain one line in every necessary direction (horizontal, vertical, slash or backslash) on top of the background color (if background is enabled). When used in a FillStyle, this image will be tiled to the required area, resulting in a hatched fill.

Example code:

const pattern = new HatchedImageBuilder()
  .patterns( [HatchedImageBuilder.Pattern.SLASH, HatchedImageBuilder.Pattern.BACKGROUND] )
  .patternSize( 20, 10 )
  .lineColor( "rgb(125,125,125)" )
  .backgroundColor( "rgb(255, 255, 255)" )
  .build();

An example use case of such a pattern is as fill for a shape, for example: 
const painter = new FeaturePainter();
painter.paintBody = function(geoCanvas, feature, shape, layer, map, state) {
  geoCanvas.drawShape(shape, {
    stroke: {
      color: "rgb(255,99,71)",
      width: 8
    },
    fill: {
      color: "rgba(0,0,255,0.5)",
      image: pattern
    }
  });
}

Hierarchy

  • HatchedImageBuilder

Constructors

constructor

Methods

backgroundColor build lineColor lineWidth patternSize patterns

Constructors

constructor

Methods

backgroundColor

  • Sets the background color.

    Note that the background color will only be applied when the BACKGROUND pattern is set on this builder.

    Parameters

    • backgroundColor: string

      The background color specified as a CSS string

    Returns HatchedImageBuilder

    this builder instance

build

  • Builds the pattern with the current settings of this builder instance.

    Returns HTMLImageElement

    An Image based on the current settings.

lineColor

lineWidth

patternSize

  • Sets the pixel size of the filling pattern. The pattern is created by drawing one line in every necessary direction (horizontal, vertical, slash or backslash). This pattern is then tiled to fill the required area. Changing the size of this pattern allows to define the spacing between adjacent lines. Defining a non-square pattern size for slanted patterns (slash and backslash) allows to change the angle of the slanted lines. For example a slash pattern with a pattern size of 20x10 results in 26.6 degree lines (Math.atan(10/20)).

    Width and height must be strictly larger than twice (line width + 2). The values should be small for performance reasons, for example 10x10 or 20x10 pixels.

    Parameters

    • width: number

      The width in pixels

    • height: number

      The height in pixels

    Returns HatchedImageBuilder

    this builder instance

patterns

Settings

Member Visibility

Theme