Javascript Angular 4中的Interactjs可调整大小功能（ts文件）

我在Angular 4中使用interact

我的可拖动功能工作得很好

在我的可调整大小方法中，事件不能向我提供除

currentTarget

和

target

之外的任何对象属性

在以下示例中：

无法访问

event.rect

和

event.deltaRect

。它表示

属性event.rect

和

事件.deltaRect

不是

交互事件的类型。

问题 为什么会这样

---

整个守则是：

let msgFrontX,
  msgFrontY,
  imgFrontX,
  imgFrontY,
  msgBackX,
  msgBackY,
  imgBackX,
  imgBackY;
interact('.resize-drag')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: {
        top: 0,
        left: 0,
        bottom: 1,
        right: 1
      }
    },
    // enable autoScroll
    autoScroll: true,
    onstart: function (event) {},
    // call this function on every dragmove event
    onmove: dragMoveListener,
    // call this function on every dragend event
    onend: function (event) {
      const parentContainer = event.currentTarget.offsetParent;
      const elem = event.currentTarget;

      function percentageCalc(direction) {
        if (direction === 'horizontal') {
          return event.clientX0 / event.clientX 100;
        } else {
          return event.clientY0 / event.clientY 100;
        }
      }
      if (parentContainer.classList.contains('front')) {
        if (elem.classList.contains('msg-container')) {
          msgFrontX = percentageCalc('horizontal');
          msgFrontY = percentageCalc('vertical');
        } else {
          imgFrontX = percentageCalc('horizontal');
          imgFrontY = percentageCalc('vertical');
        }
      } else {
        if (elem.classList.contains('msg-container')) {
          msgBackX = percentageCalc('horizontal');
          msgBackY = percentageCalc('vertical');
        } else {
          imgBackX = percentageCalc('horizontal');
          imgBackY = percentageCalc('vertical');
        }
      }
      that.setPositions(msgFrontX, msgFrontY, imgFrontX, imgFrontY,
        msgBackX, msgBackY, imgBackX, imgBackY);
    }
  }).resizable({
    edges: {
      left: true,
      right: true,
      bottom: true,
      top: true
    },
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: {
        top: 0,
        left: 0,
        bottom: 1,
        right: 1
      }
    }
  }).on('resizeend', function (event) {
    console.log(event.resizeRects);
    var target = event.target,
      x = (parseFloat(target.getAttribute('data-x')) || 0),
      y = (parseFloat(target.getAttribute('data-y')) || 0);

    // update the element's style
    target.style.width = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
      'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);

  });

function dragMoveListener(event) {
  const target = event.target,
    // keep the dragged position in the data-x/data-y attributes
    x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
    y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
  // translate the element
  target.style.webkitTransform =
    target.style.transform =
    'translate(' + x + 'px, ' + y + 'px)';
  // update the position attributes
  target.setAttribute('data-x', x);
  target.setAttribute('data-y', y);
}

控制台中出现错误

ERROR in C:/Users/usuario/Documents/sitios/tshirtCustom/src/app/customizer/customizer.component.ts (325,34): Property 'rect' does not exist on type 'InteractEvent'.
ERROR in C:/Users/usuario/Documents/sitios/tshirtCustom/src/app/customizer/customizer.component.ts (326,35): Property 'rect' does not exist on type 'InteractEvent'.
ERROR in C:/Users/usuario/Documents/sitios/tshirtCustom/src/app/customizer/customizer.component.ts (329,18): Property 'deltaRect' does not exist on type 'InteractEvent'.
ERROR in C:/Users/usuario/Documents/sitios/tshirtCustom/src/app/customizer/customizer.component.ts (330,18): Property 'deltaRect' does not exist on type 'InteractEvent'.

---

InteractEvent接口没有rect和deltaRect。您可以在..\node\u modules\interacticjs\index.d.ts中进行检查

这可能是因为产品和示例代码的版本不同

但是有一个解决办法

.on('resizeend', function (ev) {
   const event = <any> ev;
   console.log(event.resizeRects);
   var target = event.target,
   x = (parseFloat(target.getAttribute('data-x')) || 0),
   y = (parseFloat(target.getAttribute('data-y')) || 0);

   //......
}

.on（'resizeend'，函数（ev）{
常数事件=ev；
console.log（event.resizeRects）；
var target=event.target，
x=（parseFloat（target.getAttribute（'data-x'））| | 0），
y=（parseFloat（target.getAttribute（'data-y'））| | 0）；
//......
}

正如Aatish之前提到的，../node\u modules\interacticjs\index.d.ts上存在一个问题，ts没有正确的公开属性，因此我的一位同事建议将其添加到ts中，问题得到了解决

非常感谢，但它不起作用。src/app/customizer/customizer.component.ts中的错误（318,9）：错误TS2345:类型为{edges:{left:boolean；right:boolean；bottom:boolean；top:boolean；}的参数；restrictEdges:{oute…'不可分配给'Resizebleoptions'类型的参数。对象文字只能指定已知属性，并且'RestrictEdge'不存在于'Resizebleoptions'类型中。这是另一个问题，您可以删除边和RestrictEdge

.on('resizeend', function (ev) {
   const event = <any> ev;
   console.log(event.resizeRects);
   var target = event.target,
   x = (parseFloat(target.getAttribute('data-x')) || 0),
   y = (parseFloat(target.getAttribute('data-y')) || 0);

   //......
}