| function CVMaskElement(data, element) { |
| this.data = data; |
| this.element = element; |
| this.masksProperties = this.data.masksProperties || []; |
| this.viewData = createSizedArray(this.masksProperties.length); |
| var i, |
| len = this.masksProperties.length, |
| hasMasks = false; |
| for (i = 0; i < len; i++) { |
| if (this.masksProperties[i].mode !== 'n') { |
| hasMasks = true; |
| } |
| this.viewData[i] = ShapePropertyFactory.getShapeProp(this.element, this.masksProperties[i], 3); |
| } |
| this.hasMasks = hasMasks; |
| if (hasMasks) { |
| this.element.addRenderableComponent(this); |
| } |
| } |
| |
| CVMaskElement.prototype.renderFrame = function () { |
| if (!this.hasMasks) { |
| return; |
| } |
| var transform = this.element.finalTransform.mat; |
| var ctx = this.element.canvasContext; |
| var i, |
| len = this.masksProperties.length; |
| var pt, |
| pts, |
| data; |
| ctx.beginPath(); |
| for (i = 0; i < len; i++) { |
| if (this.masksProperties[i].mode !== 'n') { |
| if (this.masksProperties[i].inv) { |
| ctx.moveTo(0, 0); |
| ctx.lineTo(this.element.globalData.compSize.w, 0); |
| ctx.lineTo(this.element.globalData.compSize.w, this.element.globalData.compSize.h); |
| ctx.lineTo(0, this.element.globalData.compSize.h); |
| ctx.lineTo(0, 0); |
| } |
| data = this.viewData[i].v; |
| pt = transform.applyToPointArray(data.v[0][0], data.v[0][1], 0); |
| ctx.moveTo(pt[0], pt[1]); |
| var j, |
| jLen = data._length; |
| for (j = 1; j < jLen; j++) { |
| pts = transform.applyToTriplePoints(data.o[j - 1], data.i[j], data.v[j]); |
| ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]); |
| } |
| pts = transform.applyToTriplePoints(data.o[j - 1], data.i[0], data.v[0]); |
| ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]); |
| } |
| } |
| this.element.globalData.renderer.save(true); |
| ctx.clip(); |
| }; |
| |
| CVMaskElement.prototype.getMaskProperty = MaskElement.prototype.getMaskProperty; |
| |
| CVMaskElement.prototype.destroy = function () { |
| this.element = null; |
| }; |