javascript - 使用 Konva.Js 相互交换对象

Question

我可以使用 Konva.js 将六边形分类到 Canvas 中。我希望六边形在保持这种形状的同时相互交换。

当我将 Konva 的“draggable:true”属性添加到六边形时，我无法保持形状。

var patternPentagon = new Konva.RegularPolygon({
    x: 220,
    y: 120,
    sides: 6,
    radius: 70,
    rotation:30,
    fillPatternImage: images.hex1,
    fillPatternScaleX: images.hex1.height / 10000,
    fillPatternScaleY: images.hex1.width / 10000,
    fillPatternRotation : -30,
    fillPatternOffset: { x: images.hex1.width / 2 , y: images.hex1.height / 2 },
    name: 'hex1'
});


var patternPentagon2 = new Konva.RegularPolygon({
    x: 220,
    y: 245,
    sides: 6,
    radius: 70,
    rotation:30,
    fillPatternImage: images.hex2,
    fillPatternScaleX: 0.04,
    fillPatternScaleY: 0.04,
    fillPatternRotation : -30,
    fillPatternOffset: { x: images.hex2.width / 2 , y: images.hex2.height / 2 },
    name: "hex2"
});

var patternPentagon3 = new Konva.RegularPolygon({
    x: 328,
    y: 183,
    sides: 6,
    radius: 70,
    rotation:30,
    fillPatternImage: images.hex3,
    fillPatternScaleX: 0.04,
    fillPatternScaleY: 0.04,
    fillPatternRotation : -30,
    fillPatternOffset: { x: images.hex3.width / 2 , y: images.hex3.height / 2 },
    name: "hex2"
});


layer.add(patternPentagon);
layer.add(patternPentagon2);
layer.add(patternPentagon3);
layer.draw();



}

var sources = {
hex1: 'https://picsum.photos/200',
hex2: 'https://picsum.photos/300',
hex3: 'https://picsum.photos/400'
};

loadImages(sources, function (images) {
   draw(images);
});

我还没有遇到过与 Konva 交换的示例。你能帮我解决这个问题吗？

JSFiddle 链接