| var SVGElementsRenderer = (function() { |
| var _identityMatrix = new Matrix(); |
| var _matrixHelper = new Matrix(); |
| |
| var ob = { |
| createRenderFunction: createRenderFunction |
| } |
| |
| function createRenderFunction(data) { |
| var ty = data.ty; |
| switch(data.ty) { |
| case 'fl': |
| return renderFill; |
| case 'gf': |
| return renderGradient; |
| case 'gs': |
| return renderGradientStroke; |
| case 'st': |
| return renderStroke; |
| case 'sh': |
| case 'el': |
| case 'rc': |
| case 'sr': |
| return renderPath; |
| case 'tr': |
| return renderContentTransform; |
| } |
| } |
| |
| function renderContentTransform(styleData, itemData, isFirstFrame) { |
| if(isFirstFrame || itemData.transform.op._mdf){ |
| itemData.transform.container.setAttribute('opacity',itemData.transform.op.v); |
| } |
| if(isFirstFrame || itemData.transform.mProps._mdf){ |
| itemData.transform.container.setAttribute('transform',itemData.transform.mProps.v.to2dCSS()); |
| } |
| } |
| |
| function renderPath(styleData, itemData, isFirstFrame) { |
| var j, jLen,pathStringTransformed,redraw,pathNodes,l, lLen = itemData.styles.length; |
| var lvl = itemData.lvl; |
| var paths, mat, props, iterations, k; |
| for(l=0;l<lLen;l+=1){ |
| redraw = itemData.sh._mdf || isFirstFrame; |
| if(itemData.styles[l].lvl < lvl){ |
| mat = _matrixHelper.reset(); |
| iterations = lvl - itemData.styles[l].lvl; |
| k = itemData.transformers.length-1; |
| while(!redraw && iterations > 0) { |
| redraw = itemData.transformers[k].mProps._mdf || redraw; |
| iterations --; |
| k --; |
| } |
| if(redraw) { |
| iterations = lvl - itemData.styles[l].lvl; |
| k = itemData.transformers.length-1; |
| while(iterations > 0) { |
| props = itemData.transformers[k].mProps.v.props; |
| mat.transform(props[0],props[1],props[2],props[3],props[4],props[5],props[6],props[7],props[8],props[9],props[10],props[11],props[12],props[13],props[14],props[15]); |
| iterations --; |
| k --; |
| } |
| } |
| } else { |
| mat = _identityMatrix; |
| } |
| paths = itemData.sh.paths; |
| jLen = paths._length; |
| if(redraw){ |
| pathStringTransformed = ''; |
| for(j=0;j<jLen;j+=1){ |
| pathNodes = paths.shapes[j]; |
| if(pathNodes && pathNodes._length){ |
| pathStringTransformed += buildShapeString(pathNodes, pathNodes._length, pathNodes.c, mat); |
| } |
| } |
| itemData.caches[l] = pathStringTransformed; |
| } else { |
| pathStringTransformed = itemData.caches[l]; |
| } |
| itemData.styles[l].d += styleData.hd === true ? '' : pathStringTransformed; |
| itemData.styles[l]._mdf = redraw || itemData.styles[l]._mdf; |
| } |
| } |
| |
| function renderFill (styleData,itemData, isFirstFrame){ |
| var styleElem = itemData.style; |
| |
| if(itemData.c._mdf || isFirstFrame){ |
| styleElem.pElem.setAttribute('fill','rgb('+bm_floor(itemData.c.v[0])+','+bm_floor(itemData.c.v[1])+','+bm_floor(itemData.c.v[2])+')'); |
| } |
| if(itemData.o._mdf || isFirstFrame){ |
| styleElem.pElem.setAttribute('fill-opacity',itemData.o.v); |
| } |
| }; |
| |
| function renderGradientStroke (styleData, itemData, isFirstFrame) { |
| renderGradient(styleData, itemData, isFirstFrame); |
| renderStroke(styleData, itemData, isFirstFrame); |
| } |
| |
| function renderGradient(styleData, itemData, isFirstFrame) { |
| var gfill = itemData.gf; |
| var hasOpacity = itemData.g._hasOpacity; |
| var pt1 = itemData.s.v, pt2 = itemData.e.v; |
| |
| if (itemData.o._mdf || isFirstFrame) { |
| var attr = styleData.ty === 'gf' ? 'fill-opacity' : 'stroke-opacity'; |
| itemData.style.pElem.setAttribute(attr, itemData.o.v); |
| } |
| if (itemData.s._mdf || isFirstFrame) { |
| var attr1 = styleData.t === 1 ? 'x1' : 'cx'; |
| var attr2 = attr1 === 'x1' ? 'y1' : 'cy'; |
| gfill.setAttribute(attr1, pt1[0]); |
| gfill.setAttribute(attr2, pt1[1]); |
| if (hasOpacity && !itemData.g._collapsable) { |
| itemData.of.setAttribute(attr1, pt1[0]); |
| itemData.of.setAttribute(attr2, pt1[1]); |
| } |
| } |
| var stops, i, len, stop; |
| if (itemData.g._cmdf || isFirstFrame) { |
| stops = itemData.cst; |
| var cValues = itemData.g.c; |
| len = stops.length; |
| for (i = 0; i < len; i += 1){ |
| stop = stops[i]; |
| stop.setAttribute('offset', cValues[i * 4] + '%'); |
| stop.setAttribute('stop-color','rgb('+ cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ','+cValues[i * 4 + 3] + ')'); |
| } |
| } |
| if (hasOpacity && (itemData.g._omdf || isFirstFrame)) { |
| var oValues = itemData.g.o; |
| if(itemData.g._collapsable) { |
| stops = itemData.cst; |
| } else { |
| stops = itemData.ost; |
| } |
| len = stops.length; |
| for (i = 0; i < len; i += 1) { |
| stop = stops[i]; |
| if(!itemData.g._collapsable) { |
| stop.setAttribute('offset', oValues[i * 2] + '%'); |
| } |
| stop.setAttribute('stop-opacity', oValues[i * 2 + 1]); |
| } |
| } |
| if (styleData.t === 1) { |
| if (itemData.e._mdf || isFirstFrame) { |
| gfill.setAttribute('x2', pt2[0]); |
| gfill.setAttribute('y2', pt2[1]); |
| if (hasOpacity && !itemData.g._collapsable) { |
| itemData.of.setAttribute('x2', pt2[0]); |
| itemData.of.setAttribute('y2', pt2[1]); |
| } |
| } |
| } else { |
| var rad; |
| if (itemData.s._mdf || itemData.e._mdf || isFirstFrame) { |
| rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2)); |
| gfill.setAttribute('r', rad); |
| if(hasOpacity && !itemData.g._collapsable){ |
| itemData.of.setAttribute('r', rad); |
| } |
| } |
| if (itemData.e._mdf || itemData.h._mdf || itemData.a._mdf || isFirstFrame) { |
| if (!rad) { |
| rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2)); |
| } |
| var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]); |
| |
| var percent = itemData.h.v >= 1 ? 0.99 : itemData.h.v <= -1 ? -0.99: itemData.h.v; |
| var dist = rad * percent; |
| var x = Math.cos(ang + itemData.a.v) * dist + pt1[0]; |
| var y = Math.sin(ang + itemData.a.v) * dist + pt1[1]; |
| gfill.setAttribute('fx', x); |
| gfill.setAttribute('fy', y); |
| if (hasOpacity && !itemData.g._collapsable) { |
| itemData.of.setAttribute('fx', x); |
| itemData.of.setAttribute('fy', y); |
| } |
| } |
| //gfill.setAttribute('fy','200'); |
| } |
| }; |
| |
| function renderStroke(styleData, itemData, isFirstFrame) { |
| var styleElem = itemData.style; |
| var d = itemData.d; |
| if (d && (d._mdf || isFirstFrame) && d.dashStr) { |
| styleElem.pElem.setAttribute('stroke-dasharray', d.dashStr); |
| styleElem.pElem.setAttribute('stroke-dashoffset', d.dashoffset[0]); |
| } |
| if(itemData.c && (itemData.c._mdf || isFirstFrame)){ |
| styleElem.pElem.setAttribute('stroke','rgb(' + bm_floor(itemData.c.v[0]) + ',' + bm_floor(itemData.c.v[1]) + ',' + bm_floor(itemData.c.v[2]) + ')'); |
| } |
| if(itemData.o._mdf || isFirstFrame){ |
| styleElem.pElem.setAttribute('stroke-opacity', itemData.o.v); |
| } |
| if(itemData.w._mdf || isFirstFrame){ |
| styleElem.pElem.setAttribute('stroke-width', itemData.w.v); |
| if(styleElem.msElem){ |
| styleElem.msElem.setAttribute('stroke-width', itemData.w.v); |
| } |
| } |
| }; |
| |
| return ob; |
| }()) |
