player/js/mask.js

function MaskElement(globalData) {
    this.data = null;
    this.element = null;
    this.globalData = globalData;
    this.paths = [];
}

MaskElement.prototype.init = function () {
    this.registeredEffects = [];
    this.masksProperties = this.data.masksProperties;
    this.totalMasks = this.masksProperties.length;
    var maskedElement = this.element.maskedElement;
    var defs = this.globalData.defs;
    var i=0, len = this.masksProperties.length;

    this.layerSize = this.element.getLayerSize();

    this.maskElement = document.createElementNS(svgNS, 'clipPath');
    var path, properties = this.data.masksProperties;
    for (i = 0; i < len; i++) {
        if(properties[i].inv && !this.solidPath){
            this.solidPath = this.createLayerSolidPath();
        }
        path = document.createElementNS(svgNS, 'path');
        if (properties[i].cl) {
            path.setAttribute('fill', '#ffffff');
        } else {
            path.setAttribute('fill', 'none');
            path.setAttribute('stroke', '#ffffff');
            path.setAttribute('stroke-width', '1');
            path.setAttribute('stroke-miterlimit', '10');
        }
        path.setAttribute('clip-rule','nonezero');
        this.maskElement.appendChild(path);
        properties[i].elem = path;
        properties[i].lastPath = '';
    }

    var layerId = randomString(10);

    this.maskElement.setAttribute('id', layerId);
    maskedElement.setAttribute("clip-path", "url(#" + layerId + ")");

    defs.appendChild(this.maskElement);
};

MaskElement.prototype.renderFrame = function (num) {
    var i, len = this.data.masksProperties.length;
    for (i = 0; i < len; i++) {
        this.drawPath(this.data.masksProperties[i],this.data.masksProperties[i].paths[num].pathString);
    }
};

MaskElement.prototype.processMaskFromEffects = function (num, masks) {
    var i, len = this.registeredEffects.length;
    for (i = 0; i < len; i++) {
        this.registeredEffects[i].renderMask(num, masks);
    }
};

MaskElement.prototype.registerEffect = function (effect) {
    this.registeredEffects.push(effect);
};

MaskElement.prototype.getMaskelement = function () {
    return this.maskElement;
};

MaskElement.prototype.createLayerSolidPath = function(){
    var path = 'M0,0 ';
    path += 'h' + this.layerSize.w;
    path += 'v' + this.layerSize.h;
    path += 'h' + -this.layerSize.w;
    path += 'v' + -this.layerSize.h;
    return path;
};

MaskElement.prototype.drawPath = function(pathData,pathString){
    if(pathData.lastPath !== pathString){
        if(pathData.inv){
            pathData.elem.setAttribute('d',this.solidPath+pathString);
        }else{
            pathData.elem.setAttribute('d',pathString);
        }
        pathData.lastPath = pathString;
    }
};