| /* global extendPrototype, BaseElement, TransformElement, CVBaseElement,HierarchyElement, FrameElement, |
| RenderableElement, SVGShapeElement, IImageElement, createTag */ |
| |
| function CVImageElement(data, globalData, comp) { |
| this.assetData = globalData.getAssetData(data.refId); |
| this.img = globalData.imageLoader.getAsset(this.assetData); |
| this.initElement(data, globalData, comp); |
| } |
| extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVImageElement); |
| |
| CVImageElement.prototype.initElement = SVGShapeElement.prototype.initElement; |
| CVImageElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame; |
| |
| CVImageElement.prototype.createContent = function () { |
| if (this.img.width && (this.assetData.w !== this.img.width || this.assetData.h !== this.img.height)) { |
| var canvas = createTag('canvas'); |
| canvas.width = this.assetData.w; |
| canvas.height = this.assetData.h; |
| var ctx = canvas.getContext('2d'); |
| |
| var imgW = this.img.width; |
| var imgH = this.img.height; |
| var imgRel = imgW / imgH; |
| var canvasRel = this.assetData.w / this.assetData.h; |
| var widthCrop; |
| var heightCrop; |
| var par = this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio; |
| if ((imgRel > canvasRel && par === 'xMidYMid slice') || (imgRel < canvasRel && par !== 'xMidYMid slice')) { |
| heightCrop = imgH; |
| widthCrop = heightCrop * canvasRel; |
| } else { |
| widthCrop = imgW; |
| heightCrop = widthCrop / canvasRel; |
| } |
| ctx.drawImage(this.img, (imgW - widthCrop) / 2, (imgH - heightCrop) / 2, widthCrop, heightCrop, 0, 0, this.assetData.w, this.assetData.h); |
| this.img = canvas; |
| } |
| }; |
| |
| CVImageElement.prototype.renderInnerContent = function () { |
| this.canvasContext.drawImage(this.img, 0, 0); |
| }; |
| |
| CVImageElement.prototype.destroy = function () { |
| this.img = null; |
| }; |