import * as core from '../core';import CanvasTinter from '../core/sprites/canvas/CanvasTinter';const tempPoint = new core.Point();/** * A tiling sprite is a fast way of rendering a tiling image * * @class * @extends PIXI.Sprite * @memberof PIXI.extras */export default class TilingSprite extends core.Sprite{ /** * @param {PIXI.Texture} texture - the texture of the tiling sprite * @param {number} [width=100] - the width of the tiling sprite * @param {number} [height=100] - the height of the tiling sprite */ constructor(texture, width = 100, height = 100) { super(texture); /** * Tile transform * * @member {PIXI.TransformStatic} */ this.tileTransform = new core.TransformStatic(); // /// private /** * The with of the tiling sprite * * @member {number} * @private */ this._width = width; /** * The height of the tiling sprite * * @member {number} * @private */ this._height = height; /** * Canvas pattern * * @type {CanvasPattern} * @private */ this._canvasPattern = null; /** * transform that is applied to UV to get the texture coords * * @member {PIXI.TextureMatrix} */ this.uvTransform = texture.transform || new core.TextureMatrix(texture); /** * Plugin that is responsible for rendering this element. * Allows to customize the rendering process without overriding '_renderWebGL' method. * * @member {string} * @default 'tilingSprite' */ this.pluginName = 'tilingSprite'; /** * Whether or not anchor affects uvs * * @member {boolean} * @default false */ this.uvRespectAnchor = false; } /** * Changes frame clamping in corresponding textureTransform, shortcut * Change to -0.5 to add a pixel to the edge, recommended for transparent trimmed textures in atlas * * @default 0.5 * @member {number} */ get clampMargin() { return this.uvTransform.clampMargin; } set clampMargin(value) // eslint-disable-line require-jsdoc { this.uvTransform.clampMargin = value; this.uvTransform.update(true); } /** * The scaling of the image that is being tiled * * @member {PIXI.ObservablePoint} */ get tileScale() { return this.tileTransform.scale; } set tileScale(value) // eslint-disable-line require-jsdoc { this.tileTransform.scale.copy(value); } /** * The offset of the image that is being tiled * * @member {PIXI.ObservablePoint} */ get tilePosition() { return this.tileTransform.position; } set tilePosition(value) // eslint-disable-line require-jsdoc { this.tileTransform.position.copy(value); } /** * @private */ _onTextureUpdate() { if (this.uvTransform) { this.uvTransform.texture = this._texture; } this.cachedTint = 0xFFFFFF; } /** * Renders the object using the WebGL renderer * * @private * @param {PIXI.WebGLRenderer} renderer - The renderer */ _renderWebGL(renderer) { // tweak our texture temporarily.. const texture = this._texture; if (!texture || !texture.valid) { return; } this.tileTransform.updateLocalTransform(); this.uvTransform.update(); renderer.setObjectRenderer(renderer.plugins[this.pluginName]); renderer.plugins[this.pluginName].render(this); } /** * Renders the object using the Canvas renderer * * @private * @param {PIXI.CanvasRenderer} renderer - a reference to the canvas renderer */ _renderCanvas(renderer) { const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } const context = renderer.context; const transform = this.worldTransform; const resolution = renderer.resolution; const isTextureRotated = texture.rotate === 2; const baseTexture = texture.baseTexture; const baseTextureResolution = baseTexture.resolution; const modX = ((this.tilePosition.x / this.tileScale.x) % texture.orig.width) * baseTextureResolution; const modY = ((this.tilePosition.y / this.tileScale.y) % texture.orig.height) * baseTextureResolution; // create a nice shiny pattern! if (this._textureID !== this._texture._updateID || this.cachedTint !== this.tint) { this._textureID = this._texture._updateID; // cut an object from a spritesheet.. const tempCanvas = new core.CanvasRenderTarget(texture.orig.width, texture.orig.height, baseTextureResolution); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) { this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint); tempCanvas.context.drawImage(this.tintedTexture, 0, 0); } else { const sx = texture._frame.x * baseTextureResolution; const sy = texture._frame.y * baseTextureResolution; const sWidth = texture._frame.width * baseTextureResolution; const sHeight = texture._frame.height * baseTextureResolution; const dWidth = (texture.trim ? texture.trim.width : texture.orig.width) * baseTextureResolution; const dHeight = (texture.trim ? texture.trim.height : texture.orig.height) * baseTextureResolution; const dx = (texture.trim ? texture.trim.x : 0) * baseTextureResolution; const dy = (texture.trim ? texture.trim.y : 0) * baseTextureResolution; if (isTextureRotated) { // Apply rotation and transform tempCanvas.context.rotate(-Math.PI / 2); tempCanvas.context.translate(-dHeight, 0); tempCanvas.context.drawImage(baseTexture.source, sx, sy, sWidth, sHeight, -dy, dx, dHeight, dWidth); } else { tempCanvas.context.drawImage(baseTexture.source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); } } this.cachedTint = this.tint; this._canvasPattern = tempCanvas.context.createPattern(tempCanvas.canvas, 'repeat'); } // set context state.. context.globalAlpha = this.worldAlpha; context.setTransform(transform.a * resolution, transform.b * resolution, transform.c * resolution, transform.d * resolution, transform.tx * resolution, transform.ty * resolution); renderer.setBlendMode(this.blendMode); // fill the pattern! context.fillStyle = this._canvasPattern; // TODO - this should be rolled into the setTransform above.. context.scale(this.tileScale.x / baseTextureResolution, this.tileScale.y / baseTextureResolution); const anchorX = this.anchor.x * -this._width * baseTextureResolution; const anchorY = this.anchor.y * -this._height * baseTextureResolution; if (this.uvRespectAnchor) { context.translate(modX, modY); context.fillRect(-modX + anchorX, -modY + anchorY, this._width / this.tileScale.x * baseTextureResolution, this._height / this.tileScale.y * baseTextureResolution); } else { context.translate(modX + anchorX, modY + anchorY); context.fillRect(-modX, -modY, this._width / this.tileScale.x * baseTextureResolution, this._height / this.tileScale.y * baseTextureResolution); } } /** * Updates the bounds of the tiling sprite. * * @private */ _calculateBounds() { const minX = this._width * -this._anchor._x; const minY = this._height * -this._anchor._y; const maxX = this._width * (1 - this._anchor._x); const maxY = this._height * (1 - this._anchor._y); this._bounds.addFrame(this.transform, minX, minY, maxX, maxY); } /** * Gets the local bounds of the sprite object. * * @param {PIXI.Rectangle} rect - The output rectangle. * @return {PIXI.Rectangle} The bounds. */ getLocalBounds(rect) { // we can do a fast local bounds if the sprite has no children! if (this.children.length === 0) { this._bounds.minX = this._width * -this._anchor._x; this._bounds.minY = this._height * -this._anchor._y; this._bounds.maxX = this._width * (1 - this._anchor._x); this._bounds.maxY = this._height * (1 - this._anchor._y); if (!rect) { if (!this._localBoundsRect) { this._localBoundsRect = new core.Rectangle(); } rect = this._localBoundsRect; } return this._bounds.getRectangle(rect); } return super.getLocalBounds.call(this, rect); } /** * Checks if a point is inside this tiling sprite. * * @param {PIXI.Point} point - the point to check * @return {boolean} Whether or not the sprite contains the point. */ containsPoint(point) { this.worldTransform.applyInverse(point, tempPoint); const width = this._width; const height = this._height; const x1 = -width * this.anchor._x; if (tempPoint.x >= x1 && tempPoint.x < x1 + width) { const y1 = -height * this.anchor._y; if (tempPoint.y >= y1 && tempPoint.y < y1 + height) { return true; } } return false; } /** * Destroys this sprite and optionally its texture and children * * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options * have been set to that value * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy * method called as well. 'options' will be passed on to those calls. * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well */ destroy(options) { super.destroy(options); this.tileTransform = null; this.uvTransform = null; } /** * Helper function that creates a new tiling sprite based on the source you provide. * The source can be - frame id, image url, video url, canvas element, video element, base texture * * @static * @param {number|string|PIXI.BaseTexture|HTMLCanvasElement|HTMLVideoElement} source - Source to create texture from * @param {number} width - the width of the tiling sprite * @param {number} height - the height of the tiling sprite * @return {PIXI.Texture} The newly created texture */ static from(source, width, height) { return new TilingSprite(core.Texture.from(source), width, height); } /** * Helper function that creates a tiling sprite that will use a texture from the TextureCache based on the frameId * The frame ids are created when a Texture packer file has been loaded * * @static * @param {string} frameId - The frame Id of the texture in the cache * @param {number} width - the width of the tiling sprite * @param {number} height - the height of the tiling sprite * @return {PIXI.extras.TilingSprite} A new TilingSprite using a texture from the texture cache matching the frameId */ static fromFrame(frameId, width, height) { const texture = core.utils.TextureCache[frameId]; if (!texture) { throw new Error(`The frameId "${frameId}" does not exist in the texture cache ${this}`); } return new TilingSprite(texture, width, height); } /** * Helper function that creates a sprite that will contain a texture based on an image url * If the image is not in the texture cache it will be loaded * * @static * @param {string} imageId - The image url of the texture * @param {number} width - the width of the tiling sprite * @param {number} height - the height of the tiling sprite * @param {boolean} [crossorigin] - if you want to specify the cross-origin parameter * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - if you want to specify the scale mode, * see {@link PIXI.SCALE_MODES} for possible values * @return {PIXI.extras.TilingSprite} A new TilingSprite using a texture from the texture cache matching the image id */ static fromImage(imageId, width, height, crossorigin, scaleMode) { return new TilingSprite(core.Texture.fromImage(imageId, crossorigin, scaleMode), width, height); } /** * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} */ get width() { return this._width; } set width(value) // eslint-disable-line require-jsdoc { this._width = value; } /** * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set * * @member {number} */ get height() { return this._height; } set height(value) // eslint-disable-line require-jsdoc { this._height = value; }}