html - SVG 包围矩形上的 MoveableJS 错位

Question

我正在使用 MoveableJS在 Angular 元素中操作(平移、缩放、旋转……)SVG 元素(路径、文本、矩形……)

问题是moveableJS提供的包围矩形错位了(错误的宽度、高度和起点)。

下面是我尝试做的:

HTML

<div id='canvas' class="canvas mt-4 text-center align-self-center" (click)="canvasClicked($event)"
                    style="background-color: white; background-image: url(../../assets/svgs/canva-background.svg);">

    <svg version="1.2" baseProfile="tiny" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" xml:space="preserve">
        <text id="text" transform="matrix(1 0 0 1 31.1271 199.1222)" fill="#561010" font-family="'Roboto-Regular'" font-size="25.3945px">Nom d’entreprise</text>
        <g>
            <path transform="matrix(1 0 0 1 0 0)" fill="#000" d="M51.75,55.77c-0.27-0.39,3.97-5.2,10.38-7.74c1.79-0.71,11.97-4.75,21.31,0.8 c8.61,5.12,11.99,15.71,10.53,24.27c-2.38,13.95-17.76,23.37-22.24,20.72c-0.97-0.57-1.32-2.75-1.99-7.09 c-1.81-11.84-1.68-20.54-1.68-20.54c0.05-3.05,0.19-4.38-0.61-6.25c-1.42-3.32-4.9-6.23-8.62-6.47 C54.84,53.21,51.97,56.08,51.75,55.77z"></path>
        </g>
    </svg>
</div>
    <div class="label" style="z-index: 9999999;" #label></div>
    <ngx-moveable
        #moveable
        [target]="target"
        [draggable]="true"
        [scalable]="true"
        [origin]="true"
        [snappable]="true"
        [throttleResize]="0"
        [keepRatio]="true"
        (dragStart)="onDragStart($event)"
        (drag)="onDrag($event)"
        (scaleStart)="onScaleStart($event)"
        (scale)="onScale($event)"
        (scaleEnd)="onScaleEnd($event)"
    >
    </ngx-moveable>

typescript

@ViewChild("target", { static: false }) target;
@ViewChild("label", { static: false }) label: ElementRef;
@ViewChild("moveable", { static: false }) moveable: NgxMoveableComponent;

frame = {
    translate: [0, 0],
    scale: [1, 1],
};

onWindowReisze = () => {
    this.moveable.updateRect();
};

onDragStart({ set }) {
    let matrix = this.menuService.getElementMatrix(this.target);
    this.frame.translate = [Number(matrix.x) * this.alignmentService.rapport, Number(matrix.y) * this.alignmentService.rapport]
    set(this.frame.translate);
}
onDrag({ target, beforeTranslate, clientX, clientY }) {
    this.frame.translate = beforeTranslate;
    target.style.transform
        = `translate(${(beforeTranslate[0]/this.alignmentService.rapport)}px, ${(beforeTranslate[1]/this.alignmentService.rapport)}px)`;
}
onDragEnd({ target, isDrag}) {
    console.log("onDragEnd", target, isDrag);
}

onScaleStart({ set, dragStart }) {
    set(this.frame.scale);

    // If a drag event has already occurred, there is no dragStart.
    dragStart && dragStart.set(this.frame.translate);
}
onScale({ target, scale, drag }) {
  this.frame.scale = scale;
  // get drag event
      this.frame.translate = drag.beforeTranslate;
      target.style.transform
          = `translate(${drag.beforeTranslate[0]}px, ${drag.beforeTranslate[1]}px)`
          + `scale(${scale[0]}, ${scale[1]})`;
  }
onScaleEnd({ target, isDrag, clientX, clientY }) {
    console.log("onScaleEnd", target, isDrag);
}
async ngOnInit() {
    window.addEventListener("resize", this.onWindowReisze);
}

下图是问题的演示(我点击了叶子)

Answer 1

我只是通过更新 viewBox 值以获得容器 div 大小的 100% 来解决这个问题。在我的示例中，我将其更改为 viewBox="0 0 550 550"。其中容器 div 的高度和宽度为 550px

下图就是结果