Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Implemented transformation except for translation and transformation …

…origin
  • Loading branch information...
commit 275c2ab8aaea271f13399ac9dca7bf39f5c61136 1 parent 63f0285
Hannes Papenberg authored
5 sources/Element.js
View
@@ -88,6 +88,7 @@ PIE.Element = (function() {
borderImageInfo: new PIE.BorderImageStyleInfo( el ),
borderRadiusInfo: new PIE.BorderRadiusStyleInfo( el ),
boxShadowInfo: new PIE.BoxShadowStyleInfo( el ),
+ transformInfo: new PIE.TransformStyleInfo( el ),
visibilityInfo: new PIE.VisibilityStyleInfo( el )
};
styleInfosArr = [
@@ -96,6 +97,7 @@ PIE.Element = (function() {
styleInfos.borderImageInfo,
styleInfos.borderRadiusInfo,
styleInfos.boxShadowInfo,
+ styleInfos.transformInfo,
styleInfos.visibilityInfo
];
@@ -105,7 +107,8 @@ PIE.Element = (function() {
new PIE.BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
//new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
- new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
+ new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer ),
+ new PIE.TransformRenderer( el, boundsInfo, styleInfos, rootRenderer )
];
if( el.tagName === 'IMG' ) {
childRenderers.push( new PIE.ImgRenderer( el, boundsInfo, styleInfos, rootRenderer ) );
38 sources/TransformRenderer.js
View
@@ -0,0 +1,38 @@
+/**
+ * Renderer for transform.
+ * @constructor
+ * @param {Element} el The target element
+ * @param {Object} styleInfos The StyleInfo objects
+ * @param {PIE.RootRenderer} parent
+ */
+PIE.TransformRenderer = PIE.RendererBase.newRenderer( {
+
+ isActive: function() {
+ var si = this.styleInfos;
+ return si.transformInfo.isActive();
+ },
+
+ /**
+ * Apply the transforms
+ */
+ draw: function() {
+ var el = this.targetElement,
+ props = this.styleInfos.transformInfo.getProps(),
+ matrix = props.matrix,
+ oH = el.offsetHeight,
+ oW = el.offsetWidth, m, origin;
+ /**
+ * TODO: Correct for transformation origin
+ m = [1,0,-oW/2,0,1,-oH/2,0,0,1];
+ m = this.styleInfos.transformInfo.matrixMult(m, matrix);
+ */
+ m = matrix;
+ el.style.filter = 'progid:DXImageTransform.Microsoft.Matrix( M11=' + m[0] + ', M12=' + m[1] + ', M21=' + m[3] + ', M22=' + m[4] + ', Dx=' + m[2] + ', Dy=' + m[5] + ', sizingMethod=\'auto expand\')';
+
+ el._PIE = true;
+ },
+
+ destroy: function() {
+ PIE.RendererBase.destroy.call( this );
+ }
+} );
117 sources/TransformStyleInfo.js
View
@@ -0,0 +1,117 @@
+/**
+ * Handles parsing, caching, and detecting changes to transform CSS
+ * @constructor
+ * @param {Element} el the target element
+ */
+PIE.TransformStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
+
+ cssProperty: 'transform',
+ styleProperty: 'Transform',
+
+ singleIdents: {'rotate': 1, 'matrix': 1},
+ scaleIdents: {'scale': 1, 'scaleX': 1, 'scaleY': 1},
+ skewIdents: {'skew': 1, 'skewX': 1, 'skewY': 1},
+ translateIdents: {'translate': 1, 'translateX': 1, 'translateY': 1},
+
+ deg2rad: Math.PI * 2 / 360,
+
+ parseCss: function( css ) {
+ var props = {}, property = {},
+ Type = PIE.Tokenizer.Type,
+ tokenizer, token, tokType, tokVal;
+ props.matrix = [1,0,0,0,1,0,0,0,1];
+
+ tokenizer = new PIE.Tokenizer( css );
+ while( token = tokenizer.next()) {
+ tokType = token.tokenType;
+ tokVal = token.tokenValue;
+
+ if(tokType == Type.FUNCTION) {
+ property.func = tokVal;
+ property.values = [];
+ } else if(tokType & Type.ANGLE || tokType & Type.NUMBER || tokType & Type.PERCENT || tokType & Type.LENGTH) {
+ property.values.push(tokVal);
+ } else if(tokType == Type.CHARACTER) {
+ if(property.func == 'rotate') {
+ props.matrix = this.rotateCalc(props, property);
+ } else if(property.func in this.scaleIdents) {
+ props.matrix = this.scaleCalc(props, property);
+ } else if(property.func in this.skewIdents) {
+ props.matrix = this.skewCalc(props, property);
+ } else if(property.func in this.translateIdents) {
+ props.matrix = this.translateCalc(props, property);
+ } else if(property.func == 'matrix') {
+ props.matrix = this.matrixCalc(props, property);
+ }
+ property = {};
+ }
+ }
+ return props;
+ },
+
+ rotateCalc: function(props, property) {
+ var m = [], rad, sin, cos;
+ rad = parseFloat(property.values[0]) * this.deg2rad;
+ cos = Math.cos(rad);
+ sin = Math.sin(rad);
+ return this.matrixMult(props.matrix,[cos, -sin, 0, sin, cos, 0, 0, 0, 1]);
+ },
+
+ scaleCalc: function(props, property) {
+ var m = [1,0,0,0,1,0,0,0,1];
+ if(property.func == 'scale') {
+ m[0] = parseFloat(property.values[0]);
+ if(property.values.length > 1) m[4] = parseFloat(property.values[1]);
+ else m[4] = parseFloat(property.values[0]);
+ }
+ else if(property.func == 'scaleX') m[0] = parseFloat(property.values[0]);
+ else if(property.func == 'scaleY') m[4] = parseFloat(property.values[0]);
+ return this.matrixMult(props.matrix, m);
+ },
+
+ skewCalc: function(props, property) {
+ var m = [1,0,0,0,1,0,0,0,1],
+ val = Math.tan(parseFloat(property.values[0]) * this.deg2rad);
+ if(property.func == 'skew') {
+ m[1] = val;
+ if(property.values.length > 1) m[3] = Math.tan(parseFloat(property.values[1]) * this.deg2rad);
+ }
+ else if(property.func == 'skewX') m[1] = val;
+ else if(property.func == 'skewY') m[3] = val;
+ return this.matrixMult(props.matrix, m);
+ },
+
+ translateCalc: function(props, property) {
+ var m = [1,0,0,0,1,0,0,0,1];
+ m[2] = parseInt(property.values[0]);
+ if(property.func == 'translateY') {
+ m[2] = 0;
+ m[5] = parseInt(property.values[0]);
+ }
+ if(property.values.length > 1) m[5] = parseInt(property.values[1]);
+
+ return this.matrixMult(props.matrix, m);
+ },
+
+ matrixCalc: function(props, property) {
+ var m = [property.values[0], property.values[2], property.values[4],
+ property.values[1], property.values[3], property.values[5],
+ 0, 0, 1 ];
+ return this.matrixMult(props.matrix, m);
+ },
+
+ matrixMult: function(matrix1, matrix2) {
+ var result = [], i = 0, j, k, x;
+ for(; i < 3; i++) {
+ for(j = 0; j < 3; j++) {
+ x = 0;
+ for(k = 0; k < 3; k++) {
+ x += matrix1[(i*3)+k] * matrix2[(k*3) + j];
+ }
+ result[(i*3)+j] = x;
+ }
+ }
+ return result;
+ }
+
+} );
Please sign in to comment.
Something went wrong with that request. Please try again.