Module ria/view/style/complexstroke/PatternFactory

In the following examples, two half circles are painted next to each other. This is done twice. The first time, no overlap is allowed. The second time, overlap is allowed:

const arc1 = PatternFactory.arc({
   length: 20,
   minorRadius: 10,
   angle: 180,
   line: {
     color: "rgb(0, 0, 255)"
   }
});

const arc2 = PatternFactory.arc({
   length: 20,
   minorRadius: 10,
   startAngle: 180,
   angle: 180,
   line: {
     color: "rgb(255, 0, 0)"
   }
});

const regular = {
  decorations: [{
    location: 0.5,
    pattern: PatternFactory.append([arc1, arc2])
  }],
  fallback: PatternFactory.parallelLine()
};

const allowOverlap = {
  decorations: [{
   location: 0.5,
   pattern: PatternFactory.append([
     <b>PatternFactory.allowOverlap(arc1, {overlapLeft: 0, overlapRight: 4})</b>,
     <b>PatternFactory.allowOverlap(arc2, {overlapLeft: 4, overlapRight: 0})</b>
    ])
  }],
  fallback: PatternFactory.parallelLine()
};

Results in:

In the following example, 2 circular patterns are appended:

const pattern1 = PatternFactory.arc({length: 20, minorRadius: 10});
const pattern2 = PatternFactory.arc({length: 20, minorRadius: 10, line: {color: "rgb(255, 0, 0, 1.0)"});

const complexStrokedLineStyle = {
  decorations: [{
   location: 0.5,
   pattern: <b>PatternFactory.append([pattern1, pattern2])</b>
  }],
  fallback: PatternFactory.parallelLine()
}

Results in:

Sample code:

const arc1 = <b>PatternFactory.arc({length: 30, minorRadius: 15});</b>
const arc2 = <b>PatternFactory.arc({length: 30, minorRadius: 10, startAngle: 30, angle: 240});</b>

const complexStrokedLineStyle = {
  decorations: [{
   location: 0.5,
   pattern: <b>PatternFactory.append([arc1, PatternFactory.gap(4), arc2])</b>
  }],
  fallback: PatternFactory.parallelLine()
}

Results in:

The following snippet shows how to fill an arc:

const arc1 = <b>PatternFactory.arc({length: 30, minorRadius: 15, fill: { color: "rgb(0, 0, 255)" }});</b>
const arc2 = <b>PatternFactory.arc({length: 30, minorRadius: 10, startAngle: 30, angle: 240, fill: { color: "rgb(255, 0, 0)"}});</b>

const complexStrokedLineStyle = {
  decorations: [{
   location: 0.5,
   pattern: <b>PatternFactory.append([arc1, PatternFactory.gap(4), arc2])</b>
  }],
  fallback: PatternFactory.parallelLine()
}

Results in:

const arrowPattern = <b>PatternFactory.arrow({type: ArrowType.PLAIN_OUTLINED, size: 10})</b>;

const complexStrokedLineStyle = {
  decorations: [{
   location: 0.5,
   pattern: arrowPattern
  }],
  fallback: PatternFactory.parallelLine()
}

Results in:

By making a composed pattern (compose, append, repeat,...) atomic, you ensure that the composed pattern is never broken apart during painting. The sub-patterns will always be painted together, or not at all.

In the example image, the circle patterns are appended. When they are not atomic, the sub-strokes of the 'append' pattern can be dropped individually. This is what happens in the first pattern. If there is not enough room for a circle to be placed, it is dropped.

However, in an atomic pattern, all sub-patterns of the 'append' stroke are dropped together if one of them does not have enough space. This is useful when you are appending multiple patterns, where it is important that all sub-patterns are always visible at the same time.

Sample code:

const arc1 = PatternFactory.arc({length: 16, minorRadius: 8, line: {color: "rgb(0, 0, 255)"}});
const arc2 = PatternFactory.arc({length: 16, minorRadius: 8, line: {color: "rgb(255, 0, 0)"}});
const line = PatternFactory.line({length: 6});
const combinedPattern = PatternFactory.append([line, arc1, arc2, line]);

const regular = {
    regular: combinedPattern,
    fallback: PatternFactory.parallelLine()
};

const atomicPattern = {
    regular: <b>PatternFactory.atomic(combinedPattern)</b>,
    fallback: PatternFactory.parallelLine()
};

Results in:

Normally, a fallback pattern is only painted where no other pattern could be painted. This pattern wrapper adds an exception to this. When a pattern is wrapped with a combineWithFallback, this pattern can be painted in addition to a fallback pattern. This is useful for adding a non-filled arrowhead, as in the image example.

const arrow = PatternFactory.arrow({type: ArrowType.PLAIN, size: 10, line: {width: 2}});
const line = PatternFactory.parallelLine({line: {width: 2}});

const regular = {
    decorations: [{
      location: 0,
      pattern: arrow
    }],
    fallback: line
};

const combinedWithFallback = {
    decorations: [{
      location: 0,
      pattern: <b>PatternFactory.combineWithFallback(arrow)</b>
    }],
    fallback: line
};

Results in:

A regular pattern is a pattern that is repeated along the whole line. Normally, a regular pattern is only painted where no decorations could be painted. This pattern wrapper adds an exception to this. When a pattern is wrapped with a combineWithRegular pattern, the pattern can be painted in addition to the regular pattern. This is useful for adding a non-filled arrowhead, as in the image example.

Note that using this pattern wrapper implies that a fallback pattern can be painted as well (if part of the regular pattern cannot be painted).

Also note that if no regular pattern is specified, then this pattern is combined with the fallback pattern instead, as if you are using combineWithFallback) for example.

const arrow = PatternFactory.arrow({type: ArrowType.PLAIN, size: 10, line: {width: 2}});
const line = PatternFactory.parallelLine({line: {width: 2}});

const regular = {
    decorations: [{
      location: 0,
      pattern: arrow
    }],
    regular: line
};

const combinedWithRegular = {
    decorations: [{
      location: 0,
      pattern: <b>PatternFactory.combineWithRegular(arrow)</b>
    }],
    regular: line
};

<pResults in:

When multiple patterns are composed, they are painted on top of each other. If one of the strokes has a different length than the other strokes, it is aligned to the center of the largest stroke.

In the following example, a horizontal red line and half a red circle are composed:

const line = PatternFactory.line({length: 20, line: {color: "rgb(255, 0, 0)"}});
const arc = PatternFactory.arc({length: 20, minorRadius: 10, angle: 180, line: "rgb(255, 0, 0)"});

const composedStrokeStyle = {
    decorations: [{
      location: 0.5,
      pattern: <b>PatternFactory.compose( [line, arc] ))</b>
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

A gap pattern occupies space only. It can be used to add space in between other strokes, for example.

The following example shows a circle stroke, with a gap at its left and right:

const circle = PatternFactory.arc({length: 20, minorRadius: 10});
const gap = <b>PatternFactory.gap(10)</b>;

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: PatternFactory.append( [gap, circle, gap] )
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

const icon = <b>PatternFactory.icon({ icon: "images/closecross.png"})</b>;

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: icon
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

To offset the icon vertically, use offset. To offset the icon horizontally, use append to insert a gap before the icon pattern.

A line segment is defined by:

• a length, meaning the distance between its two points, see length
• the offsets of the start and end points with respect to the base line. See offset0 and offset1
• styling properties: line.color and line.width

Note that the difference with a parallelLine is that a line has rounded corners, whereas a parallelLine does not have rounded corners.

Note that a filled line pattern is very similar to a filled triangle, in the sense that both can be used to fill areas. The difference is that the filled triangle pattern is a general triangle, while this stroke represents an area between a line and the base line. Because this stroke is faster to evaluate, it is advised for use whenever possible. In cases where a more complicated area needs to be filled, the filled triangle stroke can be used instead.

Sample code snippet to make a non-filled line:

const line1 = <b>PatternFactory.line({length: 10, offset1: 10, line: {width: 3}});</b>
const line2 = <b>PatternFactory.line({length: 10, offset0: 10, line: {width: 3}});</b>

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: PatternFactory.append( [line1, line2] )
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

Sample code snippet to make a filled line:

const line1 = <b>PatternFactory.line({length: 20, offset0: 10, offset1: 20, fill: {color: rgb(255, 0, 0)}});</b>
const line2 = <b>PatternFactory.line({length: 20, offset0: 20, offset1: 10, fill: {color: rgb(0, 0, 255)}});</b>

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: PatternFactory.append( [line1, line2] )
    }],
    fallback: PatternFactory.parallelLine()
};

Results in

Note that the difference with a parallelLine is that a line has rounded corners, whereas a parallelLine does not have rounded corners.

Sample code snippet to make a parallelLine:

const parallelLine1 = <b>PatternFactory.parallelLine({length: 20, offset: 10, line: {width: 3}});</b>
const parallelLine2 = <b>PatternFactory.parallelLine({length: 20, offset: -10, line: {width: 3}});</b>

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: PatternFactory.append( [parallelLine1, parallelLine2] )
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

This is demonstrated in the following sample code:

const points = [[0, 10], [0, -10], [20, -10], [30, 0], [20, 10], [0, 10]];
const polyline = <b>PatternFactory.polyline({points: points });</b>

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: polyline
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

Sample code snippet to make a non-filled rectangle:

const rect1 = <b>PatternFactory.rectangle(</b>{ length: 10, minHeight: -10, maxHeight: 10, line: { color: "rgb(255, 0, 0)" }})</b>;
const rect2 = <b>PatternFactory.rectangle(</b>{ length: 20, minHeight: -10, maxHeight: 0 , line: { color: "rgb(255, 165, 0") }})</b>;

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: PatternFactory.append([rect1, PatternFactory.gap(2), rect2, PatternFactory.gap(2), rect1])
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

`

Sample code snippet to make a filled rectangle

const rect1 = <b>PatternFactory.rectangle({length: 10, minHeight: -10, maxHeight: 10, fill: { color: "rgb(255, 0, 0)" }})</b>;
const rect2 = <b>PatternFactory.rectangle({length: 20, minHeight: -10, maxHeight: 0, fill: { color: "rgb(255,165,0)" }})</b>;
const gap = PatternFactory.gap(2);

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: PatternFactory.append([rect1, gap, rect2, gap, rect1])
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

`

Note that with this pattern, there is no guarantee that the given number of patterns is actually painted. This also depends on the line on which the complex stroke is painted. For example, if the line is too short, not all of the patterns may fit on it. If one of the repeated patterns crosses a sharp corner, it may be omitted as well. In that case, the regular or fallback patterns may be painted instead.

In the following example, a circular stroke is repeated 3 times:

const circle = PatternFactory.arc({length: 20, minorRadius: 10});

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: <b>PatternFactory.repeat(circle, 3)</b>
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

In the following example, a circular stroke is repeated over half the line:

const circle = PatternFactory.arc({length: 20, minorRadius: 10});

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: <b>PatternFactory.repeatOverLength(circle, 0.5, true)</b>
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

This is demonstrated in the following sample code:

const text = <b>PatternFactory.text({text: ["Read me"], textStyle: { font: "Arial, sans-serif", fill: "rgb(0, 0, 0)"}})</b>;

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: text
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

Note that the following TextStyle properties, affecting the position of the text, are ignored:

• alignmentBaseline
• textAnchor
• offsetX
• offsetY

To offset text vertically, use offset. To offset text horizontally, use append to insert a gap pattern before the text pattern.

This is demonstrated in the following sample code:

const triangle1 = <b>PatternFactory.triangle({ p0: [0, 10], p1: [0, -10], p2: [16, -10], line: { color: "rgb(0, 0, 255)" }});</b>
const triangle2 = <b>PatternFactory.triangle({ p0: [0, 10], p1: [16, 10], p2: [16, -10], line: { color: "rgb(255, 0, 0)" }});</b>

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: PatternFactory.append([triangle1, triangle2])
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

The following snippet shows how to fill a triangle:

const triangle1 = <b>PatternFactory.triangle({ p0: [0, 10], p1: [0, -10], p2: [16, -10], fill: { color: "rgb(0, 0, 255)" }});</b>
const triangle2 = <b>PatternFactory.triangle({ p0: [0, 10], p1: [16, 10], p2: [16, -10], fill: { color: "rgb(255, 0, 0)" }});</b>

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: PatternFactory.append([triangle1, triangle2])
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

This is demonstrated in the following sample code:

const wave = <b>PatternFactory.wave({ length: 40, angle: 720, line: { width: 2 }})</b>;

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: wave
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

The following snippet shows how to fill a wave:

const wave = <b>PatternFactory.wave({ length: 60, amplitude: 15, angle: 720, line: { width: 2 }, fill: {color: "rgb(0, 0, 255)"}})</b>;

const complexStrokedLineStyle = {
    decorations: [{
      location: 0.5,
      pattern: wave
    }],
    fallback: PatternFactory.parallelLine()
};

Results in:

An object literal describing the configuration of the pattern.