为在开放层中为 angular 8 创建的图像添加边框

Posted 2023-03-28

【中文标题】为在开放层中为 angular 8 创建的图像添加边框

【英文标题】：Add a border to an image that created in open layers for angular 8

【发布时间】：2021-09-28 12:43:46

【问题描述】：

我正在使用开放层的 Angular 8 进行编程（在 package.json ol 中是版本 ^5.3.6）。

当我为图像创建新样式时，我会执行以下操作：

const myIcon = new Style(
image:new Icon(
   anchor:[0,0],
   anchorOrigin: IconOrigin.BOTTOM_LEFT,
   anchorXUnits:IconAnchorUnits.PIXELS,
   anchorYUnits: IconAnchorUnits.PIXELS,
   color: rgb(128,128,128),
   src: 'myimage.svg'
 )
);

颜色必须是灰色的。 当图像处于黑暗状态（黑色或灰色图像）时，几乎看不到图像。

所以，我想在图像周围画一个轮廓，颜色为白色（如何计算一个好的负轮廓，因为 128 的负数是 128）。

图像是任何图像，例如一朵花。这是一个透明的图像，边框为花朵的形状，所以我需要画一个非矩形的轮廓。

图像也是一个图标对象，基于 svg 图像

除了在图像周围绘制轮廓之外，还有其他好的解决方案吗？

如何在图像周围添加轮廓？

【问题讨论】：

您可能需要更新画布中的图像（类似于***.com/questions/24039599/…），然后将其用于图标

【参考方案1】：

一个 OpenLayers 样式也可以由多个样式组成的数组组成，数组中的第一项将首先呈现，因此位于底部。

一种可能性是在图像下方制作一个尺寸正确的矩形，如下所示： https://openlayers.org/en/latest/examples/regularshape.html

样式看起来像这样：

const styles = [
  new Style(
    image: new RegularShape(
      stroke: new Stroke(
       color: 'white',
       width: 5
      ),
      points: 4,
      angle: 0,
      // adjust these numbers according to your image 
      radius: 10 / Math.SQRT2,
      radius2: 10,
      scale: [1, 0.5],
    )
  ),
  myIcon
]

不确定负轮廓，尽管通常我会避免使用纯色轮廓，但地图本身已经是非常复杂的图形。 但是，您可以将 RegularShape 的 Fill 和 Stroke 设置为 rgba 颜色，使它们看起来是半透明的。

【讨论】：

图像是任何图像，例如一朵花。它是一个透明的图像，边框为花朵的形状，所以我需要画一个非矩形的轮廓。与“花”的形状相同，即或任何非矩形轮廓。

我需要一个更好的解决方案，任何图像，因为我要求基于图标对象的 svg 图像，它需要一个轮廓，不是矩形，而是围绕图标对象的轮廓。