关于使用transform: scale()属性导致html2canvas截图缺失的解决办法

[gorkys]

按理说关于html2canvas的问题不应该写在这里，但是呢，目前此组件提供了对scale的修复功能。

我自己在项目中使用此组件的时候有场景遇到了此问题，就在这里记录一下。

<div  id="editArea" :style="templateStyle" class="editArea">
            <vdr
              v-for="(item,index) in elements"
              :key="item.id"
              :parent="true"
              :x="item.x"
              :y="item.y"
              :w="item.width"
              :h="item.height"
              :z="item.zIndex"
            ></vdr>
</div>
/*--------------*/
  computed: {
    templateStyle: function() {
      return {
        width: `${this.templateWidth}px`,
        height: `${this.templateHeight}px`,
        transform: `scale(${this.proportion})`
      }
    }
/*--------------*/
 .editArea{
    background-color: white;
    flex-shrink: 0;
  }

最开始的代码大致如上(缩写了很多属性)，在页面上显示正常，但是就是截图的时候，left与top会缺失一部分。当时使用了html2canvas的x,y属性进行偏移矫正，也是没办法完全恢复。

因为以前用过html2canvas，这次除了增加了transform:scale()其它都基本一样。所以把出现问题的重点放在它的身上。百度完又googel，google完又在github里翻issuse。各种五花八门的答案都有，不过百度上的基本是copy来copy去。

最终是调出devTools，把transform注释掉后发现里面的内容超出了#editArea的有效范围。
恍然大悟。

 .editArea{
    background-color: white;
    flex-shrink: 0;
    position: relative;
  }

加上relative后完全正常。本来布局上就出现了问题，只是缩放后问题就此被遮盖住了。

[ccyzz]

<vue-draggable-resizable v-for="item in allData" :key="item.id" :x="item.x" :y="item.y" :w="item.width" :h="item.height" :isActive="true" :is-conflict-check="true" @dragging="onDrag()" @resizing="onResize()"> </vue-draggable-resizable>
下面是定义的数组
allData: [ { id: 1, x: 200, y: 200, width: 400, height; 400 }, { id: 1, x: 300, y: 300, width: 400, height: 400 }, { id: 1, x: 400, y: 400, width: 400, height: 400 }, ]
请问我这样循环，多个可进行拖拽的div，但是resizing和dragging事件中的参数，x、y、width、height是undefined，这是什么原因
onResize (x, y, width, height) { console.log(x); console.log(y); console.log(width); console.log(height); },

[gorkys]

@ccyzz 方法上面不需要括号()，@dragging="onDrag" @resizing="onResize"

[ccyzz]

感谢！之前一直没注意到我加了一个括号，这下知道问题了，谢谢啊！