Image 使kineticjs图像的一部分不可见

我有一张船在地图上移动的图像。当它在桥下通过时，我想让船在桥下通过的部分看不见

目前，我正在使用一个单独的桥梁副本，作为图像放置在船的顶部，但这需要创建额外的艺术品

理想情况下，我只想指定一个不可见的多边形，多边形下的船舶图像的任何部分都将不可见，从而使地图上的桥梁保持不变

---

是否可以以动画方式逐帧动态隐藏船舶图像的一部分？

KineticJS仅允许矩形剪裁区域

解决办法：

你可以使用屏幕外的画布来裁剪你的桥

然后，您可以将该屏幕外画布指定为动能.image元素的图像源

var myClippedShipImage=new Kinetic.Image({

    image:myOffscreenCanvasElement,

    ...

});

---

你用的是一个单独的图像，我想是同一层上的动力学图像？ 因此，您可以轻松使用KineticJs的内置

.moveToTop（）

函数

例如，船舶的图像如下：

bridge = new Kinetic.Image({
    x: [..],
    y: [..],
    width: [..],
    height: [..],
    image: [..],
    id: 'bridge'
});

它是这样的：

layer.get('#bridge')[0].moveToTop();
layer.draw();

---

祝你好运

谢谢杰拉德，我已经有了这个部分的工作，但它需要我创造桥梁形象。我希望通过动态地使我的船图像的一部分在桥的位置透明来避免这种情况。见：