元素通過變壓器旋轉或縮放后，無法手動圍繞中心旋轉元素

Question

canvas 中有一個元素。 每次單擊按鈕時，我都希望它圍繞其中心點旋轉 90 度。 所以當我判斷這個元素的原點不在中心點時，我會手動指定它的原點到中心點。 當我不使用變壓器旋轉或縮放它時，它工作得很好，可以圍繞中心點旋轉。但是，當我通過變壓器旋轉或縮放這個元素，然后單擊按鈕旋轉它時，它的 position 是偏移的，如果我繼續單擊它，它可以圍繞中心點旋轉。 我希望它始終圍繞中心點旋轉 90 度，但我不知道如何解決它。 代碼如下

<button @click="rotate">rotate</button>

let stage = new Konva.Stage({
    container: container,
    width: 800,
    height: 800,
});

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

let rect = new Konva.Rect({
    x:50,
    y:50,
    width: 200,
    height: 150
});
layer.add(rect);

let transformer = new Konva.Transformer({
    rotationSnaps: [0, 90, 180, 270],
    nodes:[rect]
});
layer.add(transformer);

function rotate(){
    if(!rect.attrs.offsetX){
        rect.setAttrs({
            offsetX:rect.attrs.width/2,
            offsetY:rect.attrs.height/2,
            x:rect.attrs.x + rect.attrs.width/2,
            y:rect.attrs.y + rect.attrs.height/2
        })
    }
    rect.rotate(90);
}

Answer 1

 let stage = new Konva.Stage({ container: container, width: 400, height: 400, }) let layer = new Konva.Layer() stage.add(layer) let rect = new Konva.Rect({ x: 150, y: 150, width: 200, height: 150, fill: "red", //set offset offsetX: 200 / 2, offsetY: 150 / 2, }) layer.add(rect) let transformer = new Konva.Transformer({ rotationSnaps: [0, 90, 180, 270], nodes: [rect], }) layer.add(transformer) function rotate() { rect.rotate(10) }

 <script src="https://unpkg.com/konva@8.3.10/konva.min.js"></script> <button onclick="rotate()">rotate</button> <div id="container"></div>