缩放图像会导致pageX/pageY到SVG转换的问题 [英] zooming an image results in issues with pageX/pageY to SVG conversions

问题描述

我正在尝试移动位于HTML图像中心的SVG圆.如果您将鼠标悬停在图像上并拖动圆圈，则效果很好.

I am trying to move a SVG circle that sits in the center of an HTML image. If you mouse down on the image and drag the circle it works great.

但是，如果我放大图像(在数字笔上点按+按钮)，则pageX和pageY到SVG的坐标转换会变得混乱.

However, if I zoom the image (tap on + button in the codepen), pageX and pageY to SVG co-ordinate translation messes up.

我应该如何正确处理呢? (我的完整代码可以处理SVG的触摸和鼠标事件-在此示例中，我将其简化为仅鼠标)

How should I be handling this correctly ? (My complete code handles both touch and mouse events for SVG - I've simplified it to just mouse for this example)

我的代码笔: http://codepen.io/pliablepixels/pen/EZxyRN

这是我获取坐标的方式(请参见codepen中的可运行示例):

Here is how I am getting co-ordinates (please see codepen for a runnable example):

 // map to SVG view so I can move the circle
  function recompute(ax,ay)
  {
   // alert ("Here");
        var svg=document.getElementById('zsvg');
        var pt = svg.createSVGPoint();
        pt.x = ax;
        pt.y = ay;
        var svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
        $scope.cx = Math.round(svgP.x);
        $scope.cy = Math.round(svgP.y);


  }

  function moveit(event)
  {

     if (!isDrag) return;
     var status = "Dragging with X="+event.pageX+" Y="+event.pageY;

    $timeout (function(){$scope.status = status; recompute(event.pageX, event.pageY)});
  }

相关的SVG:

<svg   id = "zsvg" class="zonelayer" viewBox="0 0 400 200" width="400" height="300" >
  <circle id="c1" ng-attr-cx="{{cx}}" ng-attr-cy="{{cy}}" r="20" stroke="blue" fill="purple"  />
</svg>

推荐答案

首先，通常使用clientX和clientY而不是pageX和pageY.

Firstly, you would normally use clientX and clientY rather than pageX and pageY.

第二，您正在使用的Ionic(?)zoomTo()函数将3D变换应用于容器div.即.

Secondly, the Ionic(?) zoomTo() function you are using is applying a 3D transform to the container div. Ie.

style="transform: translate3d(-791.5px, -173px, 0px) scale(2);"

我不希望getScreenCTM()处理3D变换.即使是有效二维的，因为它们在Z轴上什么也不做.

I don't expect getScreenCTM() handles 3D transforms. Even ones that are effectively 2D because they do nothing in the Z axis.

您需要:

1. 以不同的方式进行缩放. IOW可以自行处理它，因此您可以以getScreenCTM()友好的方式进行处理.或直接将放大倍数乘以. 或
2. 找到一种方法来获取Ionic已应用的变换的详细信息，并适当地更新变换后的鼠标坐标.

1. do the zoom a different way. IOW handle it yourself so you can do it in a getScreenCTM()-friendly way. Or multiply the zoom factor in directly. or
2. find a way of getting the details of the transform that Ionic has applied and updating your transformed mouse coords appropriately.

更新:

getScreenCTM()的定义在SVG 2中已更改.在SVG 1.1中，它是定义得很松散.在SVG 2中，定义已更新以明确定义如何计算结果.尽管它没有指定应如何处理祖先元素的3D变换.

The definition of getScreenCTM() has changed in SVG 2. In SVG 1.1 it was fairly loosely defined. In SVG 2 the definition has been updated to explicitly define how the result is calculated. Although it does not specify how 3D transforms on ancestor elements should be handled.

我已经在Chrome和Firefox上进行了一些实验. Chrome似乎实现了SVG2定义，但是有一个错误.它没有返回正确的变换矩阵.但是Firefox尚未更新.它不包括对祖先元素的任何转换.

I have experimented a little on Chrome and Firefox. It appears that Chrome has implemented the SVG2 definition, but it has a bug. It is not returning the correct transform matrix. However Firefox has not yet been updated. It is not including any transforms on ancestor elements.

我现在认为Chrome中的错误是您的示例无法在其中运行的原因.但是，如果您想成为跨浏览器，我的建议是自己处理缩放-并调整变换(或坐标)-仍然有效.

I now believe the bug in Chrome is the reason your sample is not working there. However if you want to be cross-browser, my advice to handle zoom yourself - and adjust the transform (or coords) - still holds.

这篇关于缩放图像会导致pageX/pageY到SVG转换的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！