Стилизация обводки геометрии с помощью шаблона canvas

Question

Я бы хотел стилизовать обводку многоугольника следующим образом:

Повторяющееся изображение в формате png выглядит так:

Я пытался:

1) Создайте CanvasPattern изображения (это символ в формате png).

2) Присвойте шаблон цвету ol.style.Sroke.

Шаг 1 прошел хорошо.

Но шаг 2 не работает, так как атрибут цвета ol.style.Stroke должен иметь тип ol.Color, несмотря на документацию Openlayers, где цвет ol.style.Stroke также может быть ol.ColorLike, который означает, что также должен быть разрешен CanvasPattern.

Может, кто-то знает другой способ сделать то же самое?

Кстати, я могу заполнить многоугольник, назначив созданный CanvasPattern символа для цвета ol.style.Fill. Однако таким образом я заполняю многоугольник символом; Я просто хочу, чтобы штрих имел рисунок. «Странно» то, что цвет атрибута ol.style.Fill имеет тот же тип, что и ol.style.Stoke, согласно документации. В любом случае, любая помощь приветствуется.

Answer 1

В качестве цвета мазка можно использовать рисунок.

// Create pattern on image load
var image = new Image();
image.onload = function() {
  var ctx = document.createElement('canvas').getContext("2d");
  var pattern = ctx.createPattern(image,"repeat");
  // create style with the pattern
  var style = new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 8,
      color: pattern
    })
  });
  // use it on vector layer
  vector.setStyle(style);
};
// Load image
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAGFBMVEUAAACPjwCmpgCbmwCCggD+/gCXlwD//wDWAMTYAAAAB3RSTlOAsr64rP62hR4cWgAAADpJREFUCNetzTEOACAIA8ACYv//YwVJxF0mLm0AJAUxtjeCPq6IkvKwNYM9c/ko1AdLTLxNtEyZbFcWKysC1htDphIAAAAASUVORK5CYII='

См. Пример: https://codepen.io/viglino/pen/erErXb