Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Implemented transformation except for translation and transformation …

…origin
  • Loading branch information...
commit 275c2ab8aaea271f13399ac9dca7bf39f5c61136 1 parent 63f0285
Hannes Papenberg authored
5 sources/Element.js
@@ -88,6 +88,7 @@ PIE.Element = (function() {
88 88 borderImageInfo: new PIE.BorderImageStyleInfo( el ),
89 89 borderRadiusInfo: new PIE.BorderRadiusStyleInfo( el ),
90 90 boxShadowInfo: new PIE.BoxShadowStyleInfo( el ),
  91 + transformInfo: new PIE.TransformStyleInfo( el ),
91 92 visibilityInfo: new PIE.VisibilityStyleInfo( el )
92 93 };
93 94 styleInfosArr = [
@@ -96,6 +97,7 @@ PIE.Element = (function() {
96 97 styleInfos.borderImageInfo,
97 98 styleInfos.borderRadiusInfo,
98 99 styleInfos.boxShadowInfo,
  100 + styleInfos.transformInfo,
99 101 styleInfos.visibilityInfo
100 102 ];
101 103
@@ -105,7 +107,8 @@ PIE.Element = (function() {
105 107 new PIE.BackgroundRenderer( el, boundsInfo, styleInfos, rootRenderer ),
106 108 //new PIE.BoxShadowInsetRenderer( el, boundsInfo, styleInfos, rootRenderer ),
107 109 new PIE.BorderRenderer( el, boundsInfo, styleInfos, rootRenderer ),
108   - new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer )
  110 + new PIE.BorderImageRenderer( el, boundsInfo, styleInfos, rootRenderer ),
  111 + new PIE.TransformRenderer( el, boundsInfo, styleInfos, rootRenderer )
109 112 ];
110 113 if( el.tagName === 'IMG' ) {
111 114 childRenderers.push( new PIE.ImgRenderer( el, boundsInfo, styleInfos, rootRenderer ) );
38 sources/TransformRenderer.js
... ... @@ -0,0 +1,38 @@
  1 +/**
  2 + * Renderer for transform.
  3 + * @constructor
  4 + * @param {Element} el The target element
  5 + * @param {Object} styleInfos The StyleInfo objects
  6 + * @param {PIE.RootRenderer} parent
  7 + */
  8 +PIE.TransformRenderer = PIE.RendererBase.newRenderer( {
  9 +
  10 + isActive: function() {
  11 + var si = this.styleInfos;
  12 + return si.transformInfo.isActive();
  13 + },
  14 +
  15 + /**
  16 + * Apply the transforms
  17 + */
  18 + draw: function() {
  19 + var el = this.targetElement,
  20 + props = this.styleInfos.transformInfo.getProps(),
  21 + matrix = props.matrix,
  22 + oH = el.offsetHeight,
  23 + oW = el.offsetWidth, m, origin;
  24 + /**
  25 + * TODO: Correct for transformation origin
  26 + m = [1,0,-oW/2,0,1,-oH/2,0,0,1];
  27 + m = this.styleInfos.transformInfo.matrixMult(m, matrix);
  28 + */
  29 + m = matrix;
  30 + 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\')';
  31 +
  32 + el._PIE = true;
  33 + },
  34 +
  35 + destroy: function() {
  36 + PIE.RendererBase.destroy.call( this );
  37 + }
  38 +} );
117 sources/TransformStyleInfo.js
... ... @@ -0,0 +1,117 @@
  1 +/**
  2 + * Handles parsing, caching, and detecting changes to transform CSS
  3 + * @constructor
  4 + * @param {Element} el the target element
  5 + */
  6 +PIE.TransformStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
  7 +
  8 + cssProperty: 'transform',
  9 + styleProperty: 'Transform',
  10 +
  11 + singleIdents: {'rotate': 1, 'matrix': 1},
  12 + scaleIdents: {'scale': 1, 'scaleX': 1, 'scaleY': 1},
  13 + skewIdents: {'skew': 1, 'skewX': 1, 'skewY': 1},
  14 + translateIdents: {'translate': 1, 'translateX': 1, 'translateY': 1},
  15 +
  16 + deg2rad: Math.PI * 2 / 360,
  17 +
  18 + parseCss: function( css ) {
  19 + var props = {}, property = {},
  20 + Type = PIE.Tokenizer.Type,
  21 + tokenizer, token, tokType, tokVal;
  22 + props.matrix = [1,0,0,0,1,0,0,0,1];
  23 +
  24 + tokenizer = new PIE.Tokenizer( css );
  25 + while( token = tokenizer.next()) {
  26 + tokType = token.tokenType;
  27 + tokVal = token.tokenValue;
  28 +
  29 + if(tokType == Type.FUNCTION) {
  30 + property.func = tokVal;
  31 + property.values = [];
  32 + } else if(tokType & Type.ANGLE || tokType & Type.NUMBER || tokType & Type.PERCENT || tokType & Type.LENGTH) {
  33 + property.values.push(tokVal);
  34 + } else if(tokType == Type.CHARACTER) {
  35 + if(property.func == 'rotate') {
  36 + props.matrix = this.rotateCalc(props, property);
  37 + } else if(property.func in this.scaleIdents) {
  38 + props.matrix = this.scaleCalc(props, property);
  39 + } else if(property.func in this.skewIdents) {
  40 + props.matrix = this.skewCalc(props, property);
  41 + } else if(property.func in this.translateIdents) {
  42 + props.matrix = this.translateCalc(props, property);
  43 + } else if(property.func == 'matrix') {
  44 + props.matrix = this.matrixCalc(props, property);
  45 + }
  46 + property = {};
  47 + }
  48 + }
  49 + return props;
  50 + },
  51 +
  52 + rotateCalc: function(props, property) {
  53 + var m = [], rad, sin, cos;
  54 + rad = parseFloat(property.values[0]) * this.deg2rad;
  55 + cos = Math.cos(rad);
  56 + sin = Math.sin(rad);
  57 + return this.matrixMult(props.matrix,[cos, -sin, 0, sin, cos, 0, 0, 0, 1]);
  58 + },
  59 +
  60 + scaleCalc: function(props, property) {
  61 + var m = [1,0,0,0,1,0,0,0,1];
  62 + if(property.func == 'scale') {
  63 + m[0] = parseFloat(property.values[0]);
  64 + if(property.values.length > 1) m[4] = parseFloat(property.values[1]);
  65 + else m[4] = parseFloat(property.values[0]);
  66 + }
  67 + else if(property.func == 'scaleX') m[0] = parseFloat(property.values[0]);
  68 + else if(property.func == 'scaleY') m[4] = parseFloat(property.values[0]);
  69 + return this.matrixMult(props.matrix, m);
  70 + },
  71 +
  72 + skewCalc: function(props, property) {
  73 + var m = [1,0,0,0,1,0,0,0,1],
  74 + val = Math.tan(parseFloat(property.values[0]) * this.deg2rad);
  75 + if(property.func == 'skew') {
  76 + m[1] = val;
  77 + if(property.values.length > 1) m[3] = Math.tan(parseFloat(property.values[1]) * this.deg2rad);
  78 + }
  79 + else if(property.func == 'skewX') m[1] = val;
  80 + else if(property.func == 'skewY') m[3] = val;
  81 + return this.matrixMult(props.matrix, m);
  82 + },
  83 +
  84 + translateCalc: function(props, property) {
  85 + var m = [1,0,0,0,1,0,0,0,1];
  86 + m[2] = parseInt(property.values[0]);
  87 + if(property.func == 'translateY') {
  88 + m[2] = 0;
  89 + m[5] = parseInt(property.values[0]);
  90 + }
  91 + if(property.values.length > 1) m[5] = parseInt(property.values[1]);
  92 +
  93 + return this.matrixMult(props.matrix, m);
  94 + },
  95 +
  96 + matrixCalc: function(props, property) {
  97 + var m = [property.values[0], property.values[2], property.values[4],
  98 + property.values[1], property.values[3], property.values[5],
  99 + 0, 0, 1 ];
  100 + return this.matrixMult(props.matrix, m);
  101 + },
  102 +
  103 + matrixMult: function(matrix1, matrix2) {
  104 + var result = [], i = 0, j, k, x;
  105 + for(; i < 3; i++) {
  106 + for(j = 0; j < 3; j++) {
  107 + x = 0;
  108 + for(k = 0; k < 3; k++) {
  109 + x += matrix1[(i*3)+k] * matrix2[(k*3) + j];
  110 + }
  111 + result[(i*3)+j] = x;
  112 + }
  113 + }
  114 + return result;
  115 + }
  116 +
  117 +} );

0 comments on commit 275c2ab

Please sign in to comment.
Something went wrong with that request. Please try again.