如何在Konva中使用globalCompositeOperation处理具有缩放功能的多个形状

var stage = new Konva.Stage({
    container: 'container', // 容器的ID
    width: window.innerWidth,
    height: window.innerHeight
});

var layer = new Konva.Layer();
stage.add(layer);

var circle = new Konva.Circle({
    x: stage.width() / 2,
    y: stage.height() / 2,
    radius: 50,
    fill: 'red'
});

var rect = new Konva.Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 100,
    fill: 'blue'
});

layer.add(circle);
layer.add(rect);

circle.on('dblclick', function () {
    // 双击圆形时触发缩放
    circle.scaleX(circle.scaleX() * 1.5);
    circle.scaleY(circle.scaleY() * 1.5);
    layer.batchDraw(); // 重新渲染层
});

rect.on('dblclick', function () {
    // 双击矩形时触发缩放
    rect.scaleX(rect.scaleX() * 1.5);
    rect.scaleY(rect.scaleY() * 1.5);
    layer.batchDraw(); // 重新渲染层
});

circle.globalCompositeOperation('destination-over'); // 在形状下方绘制
rect.globalCompositeOperation('source-over'); // 在形状上方绘制

stage.on('wheel', function (e) {
    var oldScale = stage.scaleX();

    var pointer = stage.getPointerPosition();
    var mousePointTo = {
        x: (pointer.x - stage.x()) / oldScale,
        y: (pointer.y - stage.y()) / oldScale
    };

    var newScale = e.evt.deltaY > 0 ? oldScale * 1.1 : oldScale * 0.9;

    stage.scale({ x: newScale, y: newScale });

    var newPos = {
        x: pointer.x - mousePointTo.x * newScale,
        y: pointer.y - mousePointTo.y * newScale
    };

    stage.position(newPos);
    stage.batchDraw();
});