使用 canvaspattern 设置几何图形的笔触样式 [英] Styling the stroke of a geometry with a canvaspattern

问题描述

我想以这样的方式设置多边形的笔触样式:

I would like to style the stroke of a polygon in a way like this:

png 格式的重复图像如下所示:

The repeating image in png format looks like this:

我试过了:

1) 创建图像的 CanvasPattern(这是 png 格式的符号).

1) Create a CanvasPattern of the image (this is the symbol in png format).

2) 将图案分配给 ol.style.Stroke 的颜色.

2) Assign the pattern to the color of ol.style.Stroke.

第 1 步进展顺利.

但是第 2 步不起作用，因为 ol.style.Stroke 的颜色属性应该是 ol.Color 类型，尽管 Openlayers 的文档中 ol.style.Stroke 的颜色也可以是 ol.ColorLike，其中意味着也应该允许 CanvasPattern.

But step 2 is not working, since the color attribute of ol.style.Stroke should be of type ol.Color, despite the documentation of Openlayers where the color of ol.style.Stroke could also be ol.ColorLike, which means that also CanvasPattern should be allowed.

也许有人知道另一种方法来完成同样的事情?

Maybe someone knows another way to accomplish the same thing?

顺便说一下，我可以通过将创建的符号 CanvasPattern 分配给 ol.style.Fill 的颜色来填充多边形.但是，通过这种方式，我用符号填充了多边形；我只希望笔画具有图案.根据文档，这里的奇怪"是 ol.style.Fill 的属性颜色与 ol.style.Stoke 的类型相同.无论如何，感谢您的帮助.

By the way, I can fill the polygon by assigning the created CanvasPattern of the symbol, to the color of ol.style.Fill. However, in this way I am filling the polygon with the symbol; I just want the stroke to have a pattern. The "strange" thing here is, is that the attribute color of ol.style.Fill is of the same type as ol.style.Stoke, according the documentation. Anyway, any help is appreciated.

推荐答案

图案也可以用作描边颜色.

A pattern can be used as stoke color as well.

// 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

这篇关于使用 canvaspattern 设置几何图形的笔触样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！