如何通过图像填充Konva.Js中的rotateAnchor？

Question

当我加载图像时，旋转图像的位置恰好位于加载图像的中间。但是，缩放时，位置是固定的，不会调整到图像的新宽度。为什么konvaXImage不会出现这个问题并且与图像一起缩放？是什么原因导致此问题以及如何解决？ [！[

img1.onload = function() {
                logoImg.value.image(img1);
                logoImg.value.width(logoImg.value.attrs.width);
                logoImg.value.height(logoImg.value.attrs.height);

                let widthRatio = placeWidth / logoImg.value.width();
                let heightRatio = placeHeight / logoImg.value.height();

                let ratio = widthRatio < heightRatio ? widthRatio : heightRatio;

                let imgWidth = logoImg.value.width() * ratio;
                let imgHeight = logoImg.value.height() * ratio;

                if(logoPosition.value) {
                    let scale = !changed.value ? 600/450 : 1;
                    if(!changed.value) changed.value = 1;

                    imgWidth = logoPosition.value.width * (logoPosition.value.scaleX ?? 1) * scale;
                    imgHeight = logoPosition.value.height * (logoPosition.value.scaleY ?? 1) * scale;
                    x = logoPosition.value.x * scale;
                    y = logoPosition.value.y *scale;

                    logoImg.value.setAttrs({
                        width: imgWidth,
                        height: imgHeight,
                        x: x,
                        y: y
                    });
                } else {
                    logoImg.value.setAttrs({
                        width: imgWidth,
                        height: imgHeight,
                    });
                }
                transformer.value = new Konva.Transformer({
                    nodes: [logoImg.value],
                    anchorStrokeWidth: 12,
                    anchorCornerRadius: 1,
                    borderStrokeWidth: 1,
                    rotateEnabled: true,
                    rotateAnchorOffset: 0,
                    padding:16,
                    opacity:1,
                    enabledAnchors: ['top-right'],
                    anchorFill:"#0AC35F",
                    borderStroke: '#0AC35F',
                    anchorStroke: '#0AC35F'
                });
                    const deleteButton = new Konva.Rect({
                        x: -25,
                        y: -25,
                        height: 21,
                        width: 21,
                        fill: 'red',
                        strokeWidth: 12,
                        cornerRadius: 5,
                        id: 'deleteButton',
                        draggable: false,
                        listening: true,
                    });
                const xImage = new Image();
                xImage.src = '/storage/images/bin.png';
                xImage.onload = () => {
                    const konvaXImage = new Konva.Image({
                        x: -23,
                        y: -23,
                        image: xImage,
                        width: 17, 
                        height: 17,
                        listening: false,
                    });
                    group.add(konvaXImage);
                    transformer.value.add(konvaXImage)
                }
                const rotate = new Image();
                rotate.src = '/storage/images/rotate.png';
                rotate.onload = () => {
                    const rotateImage = new Konva.Image({
                        x: logoImg.value.width()/2 - 8,
                        y: -23,
                        image: rotate,
                        fill: 'red',
                        width: 16, 
                        height: 16,
                        listening: false,
                        id: 'rotateButton'
                    });
                    group.add(rotateImage)
                    transformer.value.add(rotateImage)
                    updateRotateButtonPosition()
                }
                const scale = new Image();
                scale.src = '/storage/images/rotate.png';
                scale.onload = () => {
                    const scale = new Konva.Image({
                        x: 130,
                        y: -23,
                        image: rotate,
                        width: 16, 
                        height: 16,
                        listening: false,
                    });
                    group.add(scale);
                    transformer.value.add(scale)
                }

                group.add(deleteButton);

                deleteButton.on('click', function() {
                    removeLogo();
                });

                transformer.value.add(deleteButton)
                group.add(logoImg.value);
                group.add(transformer.value);

                layer.batchDraw();
            };

]][1]

Answer 1

有一篇关于 Konva.Transformer 的博客文章这里，其中包含一个代码笔的链接，该代码笔允许设置所有变压器参数以测试其效果 - 您可能会发现这很有用。我不能在这里发帖太长。

从中心缩放设置 Transformer.centerScaling(true):

const transformer = new Konva.Transformer({centerScaling: true})