fixbug: 页面有zoom放大缩小时，自动定位位置不符合预期 yiminghe#55

README.md

@@ -84,13 +84,13 @@ domAlign(sourceNode, targetNode, alignConfig);
       <tr>
           <td>offset</td>
           <td>Number[2]</td>
-          <td>offset source node by offset[0] in x and offset[1] in y. 
+          <td>offset source node by offset[0] in x and offset[1] in y.
           If offset contains percentage string value, it is relative to sourceNode region.</td>
       </tr>
       <tr>
           <td>targetOffset</td>
           <td>Number[2]</td>
-          <td>offset target node by offset[0] in x and offset[1] in y. 
+          <td>offset target node by offset[0] in x and offset[1] in y.
           If targetOffset contains percentage string value, it is relative to targetNode region.</td>
       </tr>
       <tr>

examples/point.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { alignPoint } from '../src';
 import ReactDOM from 'react-dom';
-import createReactClass from 'create-react-class';
 
 class Demo extends React.Component {
   state = {
@@ -99,5 +98,6 @@ class Demo extends React.Component {
     );
   }
 }
-
+document.body.style.transform = 'scale(0.8)'
+document.body.style.transformOrigin = 'top left'
 ReactDOM.render(<Demo />, document.getElementById('__react-content'));

examples/simple.js

@@ -110,6 +110,7 @@ const div = (
         style={{
           width: 400,
           height: 400,
+          marginLeft: 100,
           overflow: 'auto',
           border: '1px solid green',
           position: 'relative',
@@ -154,3 +155,6 @@ const div = (
 );
 
 ReactDOM.render(div, $id('__react-content'));
+
+document.body.style.transform = 'scale(0.9)'
+document.body.style.transformOrigin = 'top left'

src/propertyUtils.js

@@ -57,6 +57,7 @@ export function getTransitionProperty(node) {
   return node.style.transitionProperty || node.style[getTransitionName()];
 }
 
+// 获取偏移量
 export function getTransformXY(node) {
   const style = window.getComputedStyle(node, null);
   const transform =

src/utils.js

@@ -295,11 +295,15 @@ function setTransform(elem, offset) {
   const originalOffset = getOffset(elem);
   const originalXY = getTransformXY(elem);
   const resultXY = { x: originalXY.x, y: originalXY.y };
+
+  // https://github.com/yiminghe/dom-align/issues/55
+  // 当元素的 scale 不为 1 就距离会等比例缩放
+  const scale = elem.getBoundingClientRect().width / elem.clientWidth;
   if ('left' in offset) {
-    resultXY.x = originalXY.x + offset.left - originalOffset.left;
+    resultXY.x = originalXY.x + (offset.left - originalOffset.left) / scale;
   }
   if ('top' in offset) {
-    resultXY.y = originalXY.y + offset.top - originalOffset.top;
+    resultXY.y = originalXY.y + (offset.top - originalOffset.top ) / scale;
   }
   setTransformXY(elem, resultXY);
 }