Konva.js技术问题：绘制的矩形无法遮挡已有图片如何解决？

嘿，这个问题我之前也碰到过！核心原因就是图片加载是异步的，你现在的代码执行顺序有问题：

你把添加矩形的代码写在了imageObj.onload回调外面，实际运行时，浏览器会先执行添加矩形的代码，然后才会在图片加载完成后把图片添加到图层里。而Konva的图层是按元素添加顺序来排层级的——后加的元素会显示在更上面，所以图片最后被加进去，自然就把两个矩形给盖住了。

最简单的修复方法 #

把添加矩形的代码移到imageObj.onload回调里面，确保图片先被添加到图层，之后再添加矩形，这样矩形就会在图片上层了：

var stage = new Konva.Stage({ container: 'underground-map-container', width: window.innerWidth, height: 1121.6 }); 
var layer = new Konva.Layer(); 
var imageObj = new Image(); 

imageObj.onload = function () { 
    // 先添加图片
    var parking_img = new Konva.Image({ image: imageObj, width: 1328, height: 878.6 }); 
    layer.add(parking_img); 

    // 再添加矩形，这样矩形就在图片上层
    var rect = new Konva.Rect({ x: 700, y: 50, width: 200, height: 200, fill: 'blue', opacity:1 }); 
    layer.add(rect); 
    var rect1 = new Konva.Rect({ x: 800, y: 50, width: 200, height: 200, fill: 'red', opacity:1 }); 
    layer.add(rect1); 

    stage.add(layer); 
}; 

imageObj.src = "../static/img/underground-map.png"; 

如果你不想调整添加顺序，还有另一种办法 #

可以用Konva提供的层级控制方法，手动把矩形移到顶层：

比如在imageObj.onload回调的最后加上：

rect.moveToTop();
rect1.moveToTop();

或者通过设置zIndex属性来指定层级（数值越大，层级越高）：

parking_img.zIndex(0); // 图片层级设为最低
rect.zIndex(1);
rect1.zIndex(2);

不过我更推荐第一种调整添加顺序的方案，更符合Konva的默认逻辑，也不容易搞混层级关系。

内容的提问来源于stack exchange，提问作者zhipeng wang