How to use @pixi/display - 10 common examples

this._initCachedDisplayObject(renderer);

    this._cacheData.sprite.transform._worldID = this.transform._worldID;
    this._cacheData.sprite.worldAlpha = this.worldAlpha;
    this._cacheData.sprite._render(renderer);
};

/**
 * Prepares the WebGL renderer to cache the sprite
 *
 * @private
 * @function _initCachedDisplayObject
 * @memberof PIXI.DisplayObject#
 * @param {PIXI.Renderer} renderer - the WebGL renderer
 */
DisplayObject.prototype._initCachedDisplayObject = function _initCachedDisplayObject(renderer)
{
    if (this._cacheData && this._cacheData.sprite)
    {
        return;
    }

    // make sure alpha is set to 1 otherwise it will get rendered as invisible!
    const cacheAlpha = this.alpha;

    this.alpha = 1;

    // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture)
    renderer.batch.flush();
    // this.filters= [];

    // next we find the dimensions of the untransformed object

}
    else
    {
        this.updateTransform();
    }

    // map the hit test..
    this.containsPoint = cachedSprite.containsPoint.bind(cachedSprite);
};

/**
 * Calculates the bounds of the cached sprite
 *
 * @private
 */
DisplayObject.prototype._calculateCachedBounds = function _calculateCachedBounds()
{
    this._bounds.clear();
    this._cacheData.sprite.transform._worldID = this.transform._worldID;
    this._cacheData.sprite._calculateBounds();
    this._lastBoundsID = this._boundsID;
};

/**
 * Gets the bounds of the cached sprite.
 *
 * @private
 * @return {Rectangle} The local bounds.
 */
DisplayObject.prototype._getCachedLocalBounds = function _getCachedLocalBounds()
{
    return this._cacheData.sprite.getLocalBounds();

this.updateTransform();
    }

    // map the hit test..
    this.containsPoint = cachedSprite.containsPoint.bind(cachedSprite);
};

/**
 * Renders a cached version of the sprite with canvas
 *
 * @private
 * @function _renderCachedCanvas
 * @memberof PIXI.DisplayObject#
 * @param {PIXI.Renderer} renderer - the WebGL renderer
 */
DisplayObject.prototype._renderCachedCanvas = function _renderCachedCanvas(renderer)
{
    if (!this.visible || this.worldAlpha <= 0 || !this.renderable)
    {
        return;
    }

    this._initCachedDisplayObjectCanvas(renderer);

    this._cacheData.sprite.worldAlpha = this.worldAlpha;
    this._cacheData.sprite._renderCanvas(renderer);
};

// TODO this can be the same as the WebGL version.. will need to do a little tweaking first though..
/**
 * Prepares the Canvas renderer to cache the sprite
 *

import { DisplayObject } from '@pixi/display';

/**
 * Renders the object using the Canvas renderer
 * @method renderCanvas
 * @memberof PIXI.Container#
 * @param {PIXI.CanvasRenderer} renderer - The renderer
 */
DisplayObject.prototype.renderCanvas = function renderCanvas(renderer) // eslint-disable-line no-unused-vars
{
    // OVERWRITE;
};

this._initCachedDisplayObjectCanvas(renderer);

    this._cacheData.sprite.worldAlpha = this.worldAlpha;
    this._cacheData.sprite._renderCanvas(renderer);
};

// TODO this can be the same as the WebGL version.. will need to do a little tweaking first though..
/**
 * Prepares the Canvas renderer to cache the sprite
 *
 * @private
 * @function _initCachedDisplayObjectCanvas
 * @memberof PIXI.DisplayObject#
 * @param {PIXI.Renderer} renderer - the WebGL renderer
 */
DisplayObject.prototype._initCachedDisplayObjectCanvas = function _initCachedDisplayObjectCanvas(renderer)
{
    if (this._cacheData && this._cacheData.sprite)
    {
        return;
    }

    // get bounds actually transforms the object for us already!
    const bounds = this.getLocalBounds();

    const cacheAlpha = this.alpha;

    this.alpha = 1;

    const cachedRenderTarget = renderer.context;

    bounds.ceil(settings.RESOLUTION);

import { Texture, BaseTexture, RenderTexture } from '@pixi/core';
import { Sprite } from '@pixi/sprite';
import { DisplayObject } from '@pixi/display';
import { Matrix } from '@pixi/math';
import { uid } from '@pixi/utils';
import { settings } from '@pixi/settings';

const _tempMatrix = new Matrix();

DisplayObject.prototype._cacheAsBitmap = false;
DisplayObject.prototype._cacheData = false;

// figured theres no point adding ALL the extra variables to prototype.
// this model can hold the information needed. This can also be generated on demand as
// most objects are not cached as bitmaps.
/**
 * @class
 * @ignore
 */
class CacheData
{
    constructor()
    {
        this.textureCacheId = null;

        this.originalRender = null;
        this.originalRenderCanvas = null;

* The background color as a string.
         *
         * @member {string}
         * @protected
         */
        this._backgroundColorString = '#000000';

        this.backgroundColor = options.backgroundColor || this._backgroundColor; // run bg color setter

        /**
         * This temporary display object used as the parent of the currently being rendered item.
         *
         * @member {PIXI.DisplayObject}
         * @protected
         */
        this._tempDisplayObjectParent = new Container();

        /**
         * The last root object that the renderer tried to render.
         *
         * @member {PIXI.DisplayObject}
         * @protected
         */
        this._lastObjectRendered = this._tempDisplayObjectParent;

        /**
         * Collection of plugins.
         * @readonly
         * @member {object}
         */
        this.plugins = {};
    }

const { a, r, g, b } = config.backgroundColor;
		if (a > 0 && !config.transparentBackground) {
			assign(pixiOpts, {
				// eslint-disable-next-line no-bitwise
				backgroundColor: r << 16 ^ g << 8 ^ b << 0,
				transparent: a < 1
			});
		}

		const app = new PIXIApplication({
			width: resolution,
			height: resolution,
			...pixiOpts
		});

		const container = new Container();
		app.stage.addChild(container);

		const drawFn = drawPixi(this.state.drawFunction, pathContainer);
		const draw = drawFn(container, app);
		if (draw.update) {
			draw.update({
				sourceData,
				genes,
				title: config.showTitle && config.title,
				showLabels: !!config.showLabels,
				fontSize: config.labelFontSize,
				backgroundColor: {
					a: config.transparentBackground ? 0 : a,
					r,
					g,
					b

// The default options
        options = Object.assign({
            forceCanvas: false,
        }, options);

        /**
         * WebGL renderer if available, otherwise CanvasRenderer.
         * @member {PIXI.Renderer|PIXI.CanvasRenderer}
         */
        this.renderer = autoDetectRenderer(options);

        /**
         * The root display container that's rendered.
         * @member {PIXI.Container}
         */
        this.stage = new Container();

        // install plugins here
        Application._plugins.forEach((plugin) =>
        {
            plugin.init.call(this, options);
        });
    }

assign(pixiOptions, {
				view,
				context
			});
		}

		const app = this.pixiApp = new PIXIApplication({
			width: width || window.innerWidth,
			height: height || window.innerHeight,
			...pixiOptions
		});
		patchPixiContext(app.renderer.context);

		this.wrapper.appendChild(app.view);
		this.wrapper.className = this.props.className || '';
		this.container = new Container();
		app.stage.addChild(this.container);

		this.sketch = sketch(this.container, app, otherProps);

		if (this.sketch.update) {
			this.sketch.update(otherProps);
		}

		this.resize({ height, width, centerOrigin });

		window.addEventListener('resize', this.onResize);

		// render right away to prevent flash of black #12
		app.render();
	}