Panzoom用于svg grapic中的特定位置

编程问答 2022-06-03

问题描述

我正在使用panzoom来缩放和移动svg图像。

如果用户单击svg的某个组件，我希望svg缩放到图像中的特定位置。

我使用angualr和Type-Script：

我通过以下方法初始化全景镜头：

ngAfterViewInit() {
  var options = {
    smoothScroll: false,transformOrigin: { x: 0.5,y: 0.5 },};

  this.zoomable = panzoom(document.getElementById('zoomable'),options);
}

目前，我将此圆圈作为图片的一部分

<circle (click)="clicked('outerCircle')"
   [attr.fill]="fillColor['outerCircle']"
   r="100"
   cy="427.33057"
   cx="375.05875"
   id="outerCircle"
   style="opacity:1;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />

和clicked函数如下所示

clicked(str: string) {
  if (str == "outerCircle") {
    var x = 427.33057;
    var y = 427.33057;
    this.zoomable.smoothZoomAbs(x,y,2.44);
  }
}

但是，如果我单击圆圈，它不会缩放到圆圈，而是缩放到其他地方。在我看来，smoothZoomAbs的前两个参数是根据屏幕坐标而不是svg坐标。

任何想法都可以通过panzoom缩放到svg中的特定位置吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularpanzoomsvgsvgsvgsvgpanzoomzoomzoom