Question

好的，所以这个问题的原因是我试图一次处理多个konva形状。在原始项目中，通过在要选择的形状周围绘制一个瞬时矩形（矩形选择）来选择形状。我已经看过其他有关此内容的帖子，但是它们似乎只涉及选择本身，我可以使用。

这是一个说明问题的Codepen示例。 link
说明：

点击选择按钮，将两个形状放在一起并应用一个变形器
旋转并缩放选定的形状。
单击取消选择按钮，将形状移回图层。

最有趣的部分是在第92行之后，我正在探索将形状移回图层的不同方法。

children.toArray().forEach(e => {
      // Need to apply transformations correctly before putting back on layer

      //Method 1
      if (method === 1) {
        let newTransforms = e.getAbsoluteTransform();
        let localTransforms = e.getTransform();
        let m = newTransforms.getMatrix();
        let matrices = getMatrix(e);

        console.log("matrix before : ");
        console.log(matrices); 

        e.rotation(selectionGroupRotation);
        e.skew({ x: m[1], y: m[2] });
        e.scale({ x: m[0], y: m[3] });
        e.position({ x: m[4], y: m[5] })

        m = newTransforms.getMatrix();
        matrices = getMatrix(e);

        console.log("matrix after : ");
        // console.log(m); 
        console.log(matrices);
      }

      //Method 2
       if (method === 2) {
        let groupPos = selectionGroup.position();
        let point = { x: groupPos.x, y: groupPos.y };
        let groupScale = selectionGroup.scale();
        let groupRotation = selectionGroup.rotation();
        let configGroupMatrix = selectionGroup.getTransform(); 
        let newpos = configGroupMatrix.point(point);

        e.rotation(selectionGroupRotation + e.rotation());
        e.scaleX(groupScale.x * e.scaleX());
        e.scaleY(groupScale.y * e.scaleY());
        let finalpos = {
          x: groupPos.x + e.x(),
          y: groupPos.y + e.y()
                       }
        e.x(finalpos.x);
        e.y(finalpos.y);

      }

      e.moveTo(layer);
    })

令人沮丧的是，函数getAbsoluteTransform（）似乎提供了一个转换矩阵，但是您不能直接设置形状的转换矩阵。但是解决方案可能很简单，只需将形状矩阵设置为从getAbsoluteTransform（）返回的形状矩阵即可。

Answer 1

当前，Konva内核中没有方法可以从矩阵计算属性。但是您可以在网上轻松找到它们。

https://math.stackexchange.com/questions/13150/extracting-rotation-scale-values-from-2d-transformation-matrix

extract rotation, scale values from 2d transformation matrix

从答案中，我创建了此函数以获取attrs：

function decompose(mat) {
  var a = mat[0];
  var b = mat[1];
  var c = mat[2];
  var d = mat[3];
  var e = mat[4];
  var f = mat[5];

  var delta = a * d - b * c;

  let result = {
    x: e,
    y: f,
    rotation: 0,
    scaleX: 0,
    scaleY: 0,
    skewX: 0,
    skewY: 0,
  };

  // Apply the QR-like decomposition.
  if (a != 0 || b != 0) {
    var r = Math.sqrt(a * a + b * b);
    result.rotation = b > 0 ? Math.acos(a / r) : -Math.acos(a / r);
    result.scaleX = r;
    result.scaleY = delta / r;
    result.skewX = Math.atan((a * c + b * d) / (r * r));
    result.scleY = 0;
  } else if (c != 0 || d != 0) {
    var s = Math.sqrt(c * c + d * d);
    result.rotation =
      Math.PI / 2 - (d > 0 ? Math.acos(-c / s) : -Math.acos(c / s));
    result.scaleX = delta / s
    result.scaleY = s;
    result.skewX = 0
    result.skewY = Math.atan((a * c + b * d) / (s * s));
  } else {
    // a = b = c = d = 0
  }

  result.rotation *= 180 / Math.PI;
  return result;
}

然后，您可以使用该函数从绝对变换中计算属性。

演示：https://codepen.io/lavrton/pen/dwGPBz?editors=1010

将形状从组中移出到层时正确应用变换

1 个答案: