How to use @pixi/mesh-extras - 6 common examples
To help you get started, we’ve selected a few @pixi/mesh-extras examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
pixijs / pixi.js / packages / canvas / canvas-mesh / src / NineSlicePlane.js View on Github 
* Temporary storage for canvas source coords
* @memberof PIXI.NineSlicePlane#
* @member {number[]} _canvasUvs
* @private
*/
NineSlicePlane.prototype._canvasUvs = null;
/**
* Renders the object using the Canvas renderer
*
* @private
* @method _renderCanvas
* @memberof PIXI.NineSlicePlane#
* @param {PIXI.CanvasRenderer} renderer - The canvas renderer to render with.
*/
NineSlicePlane.prototype._renderCanvas = function _renderCanvas(renderer)
{
const context = renderer.context;
const transform = this.worldTransform;
const res = renderer.resolution;
const isTinted = this.tint !== 0xFFFFFF;
const texture = this.texture;
// Work out tinting
if (isTinted)
{
if (this._cachedTint !== this.tint)
{
// Tint has changed, need to update the tinted texture and use that instead
this._cachedTint = this.tint;/**
* Cached tinted texture.
* @memberof PIXI.NineSlicePlane#
* @member {HTMLCanvasElement} _tintedCanvas
* @protected
*/
NineSlicePlane.prototype._tintedCanvas = null;
/**
* Temporary storage for canvas source coords
* @memberof PIXI.NineSlicePlane#
* @member {number[]} _canvasUvs
* @private
*/
NineSlicePlane.prototype._canvasUvs = null;
/**
* Renders the object using the Canvas renderer
*
* @private
* @method _renderCanvas
* @memberof PIXI.NineSlicePlane#
* @param {PIXI.CanvasRenderer} renderer - The canvas renderer to render with.
*/
NineSlicePlane.prototype._renderCanvas = function _renderCanvas(renderer)
{
const context = renderer.context;
const transform = this.worldTransform;
const res = renderer.resolution;
const isTinted = this.tint !== 0xFFFFFF;
const texture = this.texture;import { canvasUtils } from '@pixi/canvas-renderer';
import { NineSlicePlane } from '@pixi/mesh-extras';
/**
* Cached tint value so we can tell when the tint is changed.
* @memberof PIXI.NineSlicePlane#
* @member {number} _cachedTint
* @protected
*/
NineSlicePlane.prototype._cachedTint = 0xFFFFFF;
/**
* Cached tinted texture.
* @memberof PIXI.NineSlicePlane#
* @member {HTMLCanvasElement} _tintedCanvas
* @protected
*/
NineSlicePlane.prototype._tintedCanvas = null;
/**
* Temporary storage for canvas source coords
* @memberof PIXI.NineSlicePlane#
* @member {number[]} _canvasUvs
* @private
*/
NineSlicePlane.prototype._canvasUvs = null;/**
* Cached tint value so we can tell when the tint is changed.
* @memberof PIXI.NineSlicePlane#
* @member {number} _cachedTint
* @protected
*/
NineSlicePlane.prototype._cachedTint = 0xFFFFFF;
/**
* Cached tinted texture.
* @memberof PIXI.NineSlicePlane#
* @member {HTMLCanvasElement} _tintedCanvas
* @protected
*/
NineSlicePlane.prototype._tintedCanvas = null;
/**
* Temporary storage for canvas source coords
* @memberof PIXI.NineSlicePlane#
* @member {number[]} _canvasUvs
* @private
*/
NineSlicePlane.prototype._canvasUvs = null;
/**
* Renders the object using the Canvas renderer
*
* @private
* @method _renderCanvas
* @memberof PIXI.NineSlicePlane#
* @param {PIXI.CanvasRenderer} renderer - The canvas renderer to render with.import { SimpleMesh } from '@pixi/mesh-extras';
/**
* Renders the object using the Canvas renderer
*
* @private
* @method _renderCanvas
* @memberof PIXI.Mesh#
* @param {PIXI.CanvasRenderer} renderer - The canvas renderer.
*/
SimpleMesh.prototype._renderCanvas = function _renderCanvas(renderer)
{
if (this.autoUpdate)
{
this.geometry.getBuffer('aVertexPosition').update();
}
if (this.shader.update)
{
this.shader.update();
}
this.calculateUvs();
this.material._renderCanvas(renderer, this);
};import { SimpleRope } from '@pixi/mesh-extras';
/**
* Renders the object using the Canvas renderer
*
* @protected
* @method _renderCanvas
* @memberof PIXI.Mesh#
* @param {PIXI.CanvasRenderer} renderer - The canvas renderer.
*/
SimpleRope.prototype._renderCanvas = function _renderCanvas(renderer)
{
if (this.autoUpdate
|| this.geometry.width !== this.shader.texture.height)
{
this.geometry.width = this.shader.texture.height;
this.geometry.update();
}
if (this.shader.update)
{
this.shader.update();
}
this.calculateUvs();
this.material._renderCanvas(renderer, this);@pixi/mesh-extras
Custom Mesh display objects, like Rope and SimplePlane
