konvajs与开层的混合模式

Question

我尝试在konvajs (https://konvajs.org/)和openlayers (https://openlayers.org/)之间使用混合模式。

我有一个用openlayers创建的地图，然后我使用openlayers的Overlay (https://openlayers.org/en/latest/examples/overlay.html)在地图上添加画布konvajs。

我试过：

1. property globalCompositeOperation of konvajs，但它只适用于konvajs
2. css mix-blend-mode中的项，但是konvajs中的所有项都停留在相同的模式下，我希望每个项都有不同的模式。

有办法做到这一点吗？

下面是我在上面的第1号尝试过的示例代码：https://codesandbox.io/s/cool-monad-ow21j?file=/main.js

Answer 1

为了帮助研究OpenLayer和Konvajs画布之间的交互方式，我创建了下面的代码片段。这将绘制一个Openlayer映射元素，然后添加一个Konvajs画布元素。两者的位置都是绝对的，因此它们重叠。我加入了一些简单的矩形和不同的不透明度，以说明可能的情况下，这是你真正需要的。

下面的图像显示元素的F12检查器视图。正如我们所看到的，标签指出OpenLayers元素使用一个专用的画布。类似地，标签b显示Konvajs画布。

结论是，这些元素确实是独立的HTML5画布元素。因此，问题转到“是否可以跨画布使用混合模式？”。幸运的是，这是asked before。

因此，在回答你的问题时，“OpenLayer和Konvajs之间有什么办法来实现这种融合吗？”答案似乎是肯定的。但是，从潜在的方法来看，您可能会失去两个画布层的一些鼠标/触摸功能。

​

​

​

// Create the map element
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-1.1656, 51.0856]),
    zoom: 15
  })
});


// Create the Konva element
var stage = new Konva.Stage({container: 'container1', width: 600, height: 400});
var layer1 = new Konva.Layer();
stage.add(layer1);

var rect = new Konva.Rect({x: 100, y: 25, width: 100, height: 50, fill: 'magenta', stroke: 'black', draggable: true });
layer1.add(rect); 

rect = new Konva.Rect({x: 200, y: 75, width: 100, height: 50, fill: 'magenta', stroke: 'black', draggable: true, opacity: 0.5 });
layer1.add(rect); 

rect = new Konva.Rect({x: 300, y: 125, width: 100, height: 50, fill: 'magenta', stroke: 'black', draggable: true, opacity: 0.25 });
layer1.add(rect); 

stage.draw();

      .map {
        height: 400px;
        width: 100%;
      }

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
    <div id="map" class="map"  style="left: 0; top: 0; width: 600px; height: 400px; background-color: transparent; position: absolute;"></div>
    
    <div id='container1' style="left: 0; top: 0; width: 600px; height: 400px; background-color: transparent; position: absolute;"></div>

​