第一个变换很容易实现:
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
可能会有所不同。有没有公式可以将具有不同变换中心点的变换组合起来?