12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- import {
- extendPrototype,
- } from '../../utils/functionExtensions';
- import createTag from '../../utils/helpers/html_elements';
- import RenderableElement from '../helpers/RenderableElement';
- import BaseElement from '../BaseElement';
- import TransformElement from '../helpers/TransformElement';
- import HierarchyElement from '../helpers/HierarchyElement';
- import FrameElement from '../helpers/FrameElement';
- import CVBaseElement from './CVBaseElement';
- import IImageElement from '../ImageElement';
- import SVGShapeElement from '../svgElements/SVGShapeElement';
- 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;
- };
- export default CVImageElement;
|