'use strict';
exports.__esModule = true;
var _SystemRenderer2 = require('../SystemRenderer');
var _SystemRenderer3 = _interopRequireDefault(_SystemRenderer2);
var _CanvasMaskManager = require('./utils/CanvasMaskManager');
var _CanvasMaskManager2 = _interopRequireDefault(_CanvasMaskManager);
var _CanvasRenderTarget = require('./utils/CanvasRenderTarget');
var _CanvasRenderTarget2 = _interopRequireDefault(_CanvasRenderTarget);
var _mapCanvasBlendModesToPixi = require('./utils/mapCanvasBlendModesToPixi');
var _mapCanvasBlendModesToPixi2 = _interopRequireDefault(_mapCanvasBlendModesToPixi);
var _utils = require('../../utils');
var _const = require('../../const');
var _settings = require('../../settings');
var _settings2 = _interopRequireDefault(_settings);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**
* The CanvasRenderer draws the scene and all its content onto a 2d canvas. This renderer should
* be used for browsers that do not support WebGL. Don't forget to add the CanvasRenderer.view to
* your DOM or you will not see anything :)
*
* @class
* @memberof PIXI
* @extends PIXI.SystemRenderer
*/
var CanvasRenderer = function (_SystemRenderer) {
_inherits(CanvasRenderer, _SystemRenderer);
/**
* @param {number} [width=800] - the width of the canvas view
* @param {number} [height=600] - the height of the canvas view
* @param {object} [options] - The optional renderer parameters
* @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
* @param {boolean} [options.transparent=false] - If the render view is transparent, default false
* @param {boolean} [options.autoResize=false] - If the render view is automatically resized, default false
* @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment)
* @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The
* resolution of the renderer retina would be 2.
* @param {boolean} [options.clearBeforeRender=true] - This sets if the CanvasRenderer will clear the canvas or
* not before the new render pass.
* @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area
* (shown if not transparent).
* @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering,
* stopping pixel interpolation.
*/
function CanvasRenderer(width, height) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
_classCallCheck(this, CanvasRenderer);
var _this = _possibleConstructorReturn(this, _SystemRenderer.call(this, 'Canvas', width, height, options));
_this.type = _const.RENDERER_TYPE.CANVAS;
/**
* The canvas 2d context that everything is drawn with.
*
* @member {CanvasRenderingContext2D}
*/
_this.rootContext = _this.view.getContext('2d', { alpha: _this.transparent });
/**
* Boolean flag controlling canvas refresh.
*
* @member {boolean}
*/
_this.refresh = true;
/**
* Instance of a CanvasMaskManager, handles masking when using the canvas renderer.
*
* @member {PIXI.CanvasMaskManager}
*/
_this.maskManager = new _CanvasMaskManager2.default(_this);
/**
* The canvas property used to set the canvas smoothing property.
*
* @member {string}
*/
_this.smoothProperty = 'imageSmoothingEnabled';
if (!_this.rootContext.imageSmoothingEnabled) {
if (_this.rootContext.webkitImageSmoothingEnabled) {
_this.smoothProperty = 'webkitImageSmoothingEnabled';
} else if (_this.rootContext.mozImageSmoothingEnabled) {
_this.smoothProperty = 'mozImageSmoothingEnabled';
} else if (_this.rootContext.oImageSmoothingEnabled) {
_this.smoothProperty = 'oImageSmoothingEnabled';
} else if (_this.rootContext.msImageSmoothingEnabled) {
_this.smoothProperty = 'msImageSmoothingEnabled';
}
}
_this.initPlugins();
_this.blendModes = (0, _mapCanvasBlendModesToPixi2.default)();
_this._activeBlendMode = null;
_this.context = null;
_this.renderingToScreen = false;
_this.resize(width, height);
return _this;
}
/**
* Renders the object to this canvas view
*
* @param {PIXI.DisplayObject} displayObject - The object to be rendered
* @param {PIXI.RenderTexture} [renderTexture] - A render texture to be rendered to.
* If unset, it will render to the root context.
* @param {boolean} [clear=false] - Whether to clear the canvas before drawing
* @param {PIXI.Transform} [transform] - A transformation to be applied
* @param {boolean} [skipUpdateTransform=false] - Whether to skip the update transform
*/
CanvasRenderer.prototype.render = function render(displayObject, renderTexture, clear, transform, skipUpdateTransform) {
if (!this.view) {
return;
}
// can be handy to know!
this.renderingToScreen = !renderTexture;
this.emit('prerender');
var rootResolution = this.resolution;
if (renderTexture) {
renderTexture = renderTexture.baseTexture || renderTexture;
if (!renderTexture._canvasRenderTarget) {
renderTexture._canvasRenderTarget = new _CanvasRenderTarget2.default(renderTexture.width, renderTexture.height, renderTexture.resolution);
renderTexture.source = renderTexture._canvasRenderTarget.canvas;
renderTexture.valid = true;
}
this.context = renderTexture._canvasRenderTarget.context;
this.resolution = renderTexture._canvasRenderTarget.resolution;
} else {
this.context = this.rootContext;
}
var context = this.context;
if (!renderTexture) {
this._lastObjectRendered = displayObject;
}
if (!skipUpdateTransform) {
// update the scene graph
var cacheParent = displayObject.parent;
var tempWt = this._tempDisplayObjectParent.transform.worldTransform;
if (transform) {
transform.copy(tempWt);
} else {
tempWt.identity();
}
displayObject.parent = this._tempDisplayObjectParent;
displayObject.updateTransform();
displayObject.parent = cacheParent;
// displayObject.hitArea = //TODO add a temp hit area
}
context.setTransform(1, 0, 0, 1, 0, 0);
context.globalAlpha = 1;
context.globalCompositeOperation = this.blendModes[_const.BLEND_MODES.NORMAL];
if (navigator.isCocoonJS && this.view.screencanvas) {
context.fillStyle = 'black';
context.clear();
}
if (clear !== undefined ? clear : this.clearBeforeRender) {
if (this.renderingToScreen) {
if (this.transparent) {
context.clearRect(0, 0, this.width, this.height);
} else {
context.fillStyle = this._backgroundColorString;
context.fillRect(0, 0, this.width, this.height);
}
} // else {
// TODO: implement background for CanvasRenderTarget or RenderTexture?
// }
}
// TODO RENDER TARGET STUFF HERE..
var tempContext = this.context;
this.context = context;
displayObject.renderCanvas(this);
this.context = tempContext;
this.resolution = rootResolution;
this.emit('postrender');
};
/**
* Clear the canvas of renderer.
*
* @param {string} [clearColor] - Clear the canvas with this color, except the canvas is transparent.
*/
CanvasRenderer.prototype.clear = function clear(clearColor) {
var context = this.context;
clearColor = clearColor || this._backgroundColorString;
if (!this.transparent && clearColor) {
context.fillStyle = clearColor;
context.fillRect(0, 0, this.width, this.height);
} else {
context.clearRect(0, 0, this.width, this.height);
}
};
/**
* Sets the blend mode of the renderer.
*
* @param {number} blendMode - See {@link PIXI.BLEND_MODES} for valid values.
*/
CanvasRenderer.prototype.setBlendMode = function setBlendMode(blendMode) {
if (this._activeBlendMode === blendMode) {
return;
}
this._activeBlendMode = blendMode;
this.context.globalCompositeOperation = this.blendModes[blendMode];
};
/**
* Removes everything from the renderer and optionally removes the Canvas DOM element.
*
* @param {boolean} [removeView=false] - Removes the Canvas element from the DOM.
*/
CanvasRenderer.prototype.destroy = function destroy(removeView) {
this.destroyPlugins();
// call the base destroy
_SystemRenderer.prototype.destroy.call(this, removeView);
this.context = null;
this.refresh = true;
this.maskManager.destroy();
this.maskManager = null;
this.smoothProperty = null;
};
/**
* Resizes the canvas view to the specified width and height.
*
* @extends PIXI.SystemRenderer#resize
*
* @param {number} width - The new width of the canvas view
* @param {number} height - The new height of the canvas view
*/
CanvasRenderer.prototype.resize = function resize(width, height) {
_SystemRenderer.prototype.resize.call(this, width, height);
// reset the scale mode.. oddly this seems to be reset when the canvas is resized.
// surely a browser bug?? Let pixi fix that for you..
if (this.smoothProperty) {
this.rootContext[this.smoothProperty] = _settings2.default.SCALE_MODE === _const.SCALE_MODES.LINEAR;
}
};
return CanvasRenderer;
}(_SystemRenderer3.default);
exports.default = CanvasRenderer;
_utils.pluginTarget.mixin(CanvasRenderer);
//# sourceMappingURL=CanvasRenderer.js.map
