使kineticjs图像的一部分不可见

Question

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

目前，我使用了作为图像放置在船顶的桥梁的单独副本，但这需要创建其他艺术作品。

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

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

Answer 1

KineticJS仅允许使用矩形剪裁区域。

解决方法：

您可以使用离屏画布剪切桥。

然后，您可以将离屏画布指定为Kinetic.Image元素的图像源。

var myClippedShipImage=new Kinetic.Image({

    image:myOffscreenCanvasElement,

    ...

});

Answer 2

您正在为船舶使用单独的图像，我想在同一层上有一个动态图像？ 因此，您可以轻松使用KineticJs的内置.moveToTop()函数。

E.g。船的形象就像：

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

它就像：

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

祝你好运！