javascript - 如何组合元素变换？

Question

在 HTML5 中，我想对 canvas 元素实现变换功能，这样用户就可以translate(移动)，scale(放大/缩小)和rotate Canvas 元素。每个这样的变换都可以用不同的变换起点来完成。

第一次转换很简单:

function transform(el, value, origin) {
  el.style.Transform = value;
  el.style.MozTransform = value;
  el.style.msTransform = value;
  el.style.OTransform = value;
  el.style.webkitTransform = value;
  el.style.TransformOrigin = origin;
  el.style.MozTransformOrigin = origin;
  el.style.msTransformOrigin = origin;
  el.style.OTransformOrigin = origin;
  el.style.webkitTransformOrigin = origin;
}

transform(myCanvas, 'translate('+ dx +'px, ' + dy + 'px) ' +
                    'scale(' + zoom + ', ' + zoom + ') ' +
                    'rotate(' + angle + 'deg)',
                    cx + 'px ' + cy + 'px');

用户将移动、缩放或旋转元素，而不是同时移动所有元素，因此一些转换参数将保持默认(dx = 0, dy = 0, zoom = 1, angle = 0) .

在这样的转换之后，如果用户想要进行另一个转换(以及另一个转换，另一个...)，我如何将 (dx1, dy1, zoom1, angle1, cx1, cy1) 与(dx2, dy2, zoom2, angle2, cx2, cy2) 以获得可以稍后与新的转换参数组合的最终值？我无法将另一个转换附加到 transform 参数，因为 tranform-origin 可能不同。是否有一个公式可以将变换与不同的变换起点结合起来？

Answer 1

您不必学习矩阵数学。根据the CSS Transform specification

1. Start with the identity matrix.
2. Translate by the computed X, Y and Z values of ‘transform-origin’.
3. Multiply by each of the transform functions in ‘transform’ property in turn
4. Translate by the negated computed X, Y and Z values of ‘transform-origin’

换句话说，transform-origin: A; transform: B 与 transform: translate(-A) B translate(A) 相同。 (转换从右到左应用，因此您想要发生的第一件事发生在最后。)

因此，使用上述规则消除 transform-origin，现在您只有可以连接的普通转换。

例子:

1. transform-origin: 5px 5px;变换:平移(10px，40px)
2. transform-origin: 25px 30px;变换:缩放(2)
3. transform-origin: 10px 10px;变换:旋转(30度)

成为

1. 转换:平移(-5px, -5px) 平移(10px, 40px) 平移(5px, 5px)
2. 变换:平移(-25px, -30px) 缩放(2) 平移(25px, 30px)
3. 变换:平移(-10px, -10px) 旋转(30deg) 平移(10px, 10px)

现在您可以将它们组合起来，因为它们都同意原点(即没有原点)

转换:平移(-5px，-5px)平移(10px，40px)平移(5px，5px)平移(-25px，-30px)缩放(2)平移(25px，30px)平移(-10px , -10px) 旋转(30deg) 平移(10px, 10px)

当然，如果你愿意，你可以折叠连续的翻译

变换:平移(-15px, 10px) 缩放(2) 平移(15px, 20px) 旋转(30deg) 平移(10px, 10px)

或者你可以翻出你的数学课本和compute the final transformation matrix .

编辑:转换从右到左应用。