Javascript konvajs和openlayers之间的混合模式

我尝试在konvajs（）和openlayers（）之间使用混合模式

我用openlayers创建了一个地图，然后使用openlayers的Overlay（）在地图上添加画布konvajs

我试过：

konvajs的属性

globalCompositeOperation

，但它仅适用于konvajs中的项目

css

mix blend mode

，但是konvajs中的所有项目都使用相同的模式，我希望每个项目都有不同的模式

有没有办法做到这一点

下面是我用上面的1号试过的示例代码：

---

为了帮助研究OpenLayer和Konvajs canvas如何交互，我创建了下面的代码片段。这将绘制一个Openlayer地图元素，然后添加一个Konvajs画布元素。两者都是绝对定位的，以便重叠。我加入了一些简单的不透明度不同的矩形，以说明在这种情况下的可能性，这是你真正需要的

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

结论是，这些元素确实是独立的HTML5画布元素。因此，问题切换到“是否可以在画布上使用混合模式？”。幸运的是，这一点得到了解决

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

//创建映射元素
var map=新ol.map({
目标：“地图”，
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
视图：新ol.view({
中心：Lonlat的其他项目（[-1.1656,51.0856]），
缩放：15
})
});
//创建Konva元素
var stage=new Konva.stage（{container:'container1'，宽度：600，高度：400}）；
var layer1=新的Konva.Layer（）；
阶段。添加（第1层）；
var rect=new Konva.rect（{x:100，y:25，宽度：100，高度：50，填充：“洋红色”，笔划：“黑色”，拖拽：真}）；
第1层。添加（rect）；
rect=new Konva.rect（{x:200，y:75，宽度：100，高度：50，填充：“洋红色”，笔划：“黑色”，可拖动：真，不透明度：0.5}）；
第1层。添加（rect）；
rect=new Konva.rect（{x:300，y:125，宽度：100，高度：50，填充：“洋红色”，笔划：“黑色”，可拖动：真，不透明度：0.25}）；
第1层。添加（rect）；
stage.draw（）
.map{
高度：400px；
宽度：100%；
}

听起来是一个非常有趣的项目。你能发布一个例子来说明你遇到的错误吗？@VanquishedWombat谢谢你的提醒，我添加了示例代码链接。我猜openlayers地图不会被Konva视为Konva形状。因此，Konva无法以混合的形式对其进行操作。您是否可以将openlayers地图作为图像传递给konva？关于Konva中的混合图像，这里还有一个问题和答案：感谢您的关注，我将尝试一下Tanks，感谢您的帮助，但是您的解决方案是否适用于“屏幕、打火机、差异等混合模式”？我试图在您的代码片段中添加globalCompositeOperation，但这似乎只起到了不透明度的作用？很抱歉，我没有给您提供解决方案-更像是解释复杂性。因此，我不希望该片段按原样工作。请按照我在上一个问题上发布的链接进行操作，其中包含一些可能的前进路线。感谢您的解释，这对我来说非常清楚，我会在您提供的链接中尝试这些方法，但我会尽量不丢失一些鼠标/触摸功能，因为我需要它们在我的项目中。OK cool。如果我的回答解释/回答了您的问题，尽管这当然是一个负面结果，请将其标记为正确。谢谢。我尝试了你提供的链接，得到了答案。其主要思想是将画布“konva”中的项目拆分为多个项目，然后将其与链接中的“普通”混合模式（混合混合模式）混合。当然，它仍然存在一些问题，首先它降低了性能，第二个鼠标/触摸事件无法从上画布的konva传递到下画布。无论如何，谢谢你。