使用画布图案设计几何体的笔触答案

【问题标题】：Styling the stroke of a geometry with a canvaspattern使用画布图案设计几何体的笔触
【发布时间】：2018-05-04 21:20:05
【问题描述】：

我想以如下方式设置多边形的笔触：

png格式的重复图片如下：

我试过了：

1) 创建图片的CanvasPattern（这是png格式的符号）。

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

第 1 步进展顺利。

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

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

顺便说一句，我可以通过将创建的符号 CanvasPattern 分配给 ol.style.Fill 的颜色来填充多边形。但是，通过这种方式，我用符号填充多边形；我只是想让笔画有一个图案。根据文档，这里的“奇怪”之处在于 ol.style.Fill 的属性 color 与 ol.style.Stoke 的类型相同。无论如何，感谢任何帮助。

【问题讨论】：

标签： openlayers

【解决方案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

【讨论】：

谢谢。我为 Openlayers 使用了 typescript 定义文件。根据这个文件，画布图案不被接受为有效的颜色类型。不管你是对的，Openlayers 确实接受画布模式，所以交付的打字稿定义文件是不正确的。你已经回答了我的问题，虽然我会提出另一个问题，因为结果不会是我想要的，如上图所示；点图像应根据多边形轮廓的斜率进行旋转。
如果您正在查看沿多边形绘制哈希线，您应该查看以下示例：viglino.github.io/ol-ext/examples/style/…