CanvasRenderer.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import {
  2. extendPrototype,
  3. } from '../utils/functionExtensions';
  4. import Matrix from '../3rd_party/transformation-matrix';
  5. import CanvasRendererBase from './CanvasRendererBase';
  6. import CVContextData from '../elements/canvasElements/CVContextData';
  7. import CVCompElement from '../elements/canvasElements/CVCompElement';
  8. function CanvasRenderer(animationItem, config) {
  9. this.animationItem = animationItem;
  10. this.renderConfig = {
  11. clearCanvas: (config && config.clearCanvas !== undefined) ? config.clearCanvas : true,
  12. context: (config && config.context) || null,
  13. progressiveLoad: (config && config.progressiveLoad) || false,
  14. preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
  15. imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
  16. contentVisibility: (config && config.contentVisibility) || 'visible',
  17. className: (config && config.className) || '',
  18. id: (config && config.id) || '',
  19. runExpressions: !config || config.runExpressions === undefined || config.runExpressions,
  20. };
  21. this.renderConfig.dpr = (config && config.dpr) || 1;
  22. if (this.animationItem.wrapper) {
  23. this.renderConfig.dpr = (config && config.dpr) || window.devicePixelRatio || 1;
  24. }
  25. this.renderedFrame = -1;
  26. this.globalData = {
  27. frameNum: -1,
  28. _mdf: false,
  29. renderConfig: this.renderConfig,
  30. currentGlobalAlpha: -1,
  31. };
  32. this.contextData = new CVContextData();
  33. this.elements = [];
  34. this.pendingElements = [];
  35. this.transformMat = new Matrix();
  36. this.completeLayers = false;
  37. this.rendererType = 'canvas';
  38. if (this.renderConfig.clearCanvas) {
  39. this.ctxTransform = this.contextData.transform.bind(this.contextData);
  40. this.ctxOpacity = this.contextData.opacity.bind(this.contextData);
  41. this.ctxFillStyle = this.contextData.fillStyle.bind(this.contextData);
  42. this.ctxStrokeStyle = this.contextData.strokeStyle.bind(this.contextData);
  43. this.ctxLineWidth = this.contextData.lineWidth.bind(this.contextData);
  44. this.ctxLineCap = this.contextData.lineCap.bind(this.contextData);
  45. this.ctxLineJoin = this.contextData.lineJoin.bind(this.contextData);
  46. this.ctxMiterLimit = this.contextData.miterLimit.bind(this.contextData);
  47. this.ctxFill = this.contextData.fill.bind(this.contextData);
  48. this.ctxFillRect = this.contextData.fillRect.bind(this.contextData);
  49. this.ctxStroke = this.contextData.stroke.bind(this.contextData);
  50. this.save = this.contextData.save.bind(this.contextData);
  51. }
  52. }
  53. extendPrototype([CanvasRendererBase], CanvasRenderer);
  54. CanvasRenderer.prototype.createComp = function (data) {
  55. return new CVCompElement(data, this.globalData, this);
  56. };
  57. export default CanvasRenderer;