pixi.js
Version:
<p align="center"> <a href="https://pixijs.com" target="_blank" rel="noopener noreferrer"> <img height="150" src="https://files.pixijs.download/branding/pixijs-logo-transparent-dark.svg?v=1" alt="PixiJS logo"> </a> </p> <br/> <p align="center">
104 lines (100 loc) • 3.86 kB
JavaScript
'use strict';
var PlaneGeometry = require('../mesh-plane/PlaneGeometry.js');
"use strict";
const _NineSliceGeometry = class _NineSliceGeometry extends PlaneGeometry.PlaneGeometry {
constructor(options = {}) {
options = { ..._NineSliceGeometry.defaultOptions, ...options };
super({
width: options.width,
height: options.height,
verticesX: 4,
verticesY: 4
});
this.update(options);
}
/**
* Updates the NineSliceGeometry with the options.
* @param options - The options of the NineSliceGeometry.
*/
update(options) {
this.width = options.width ?? this.width;
this.height = options.height ?? this.height;
this._originalWidth = options.originalWidth ?? this._originalWidth;
this._originalHeight = options.originalHeight ?? this._originalHeight;
this._leftWidth = options.leftWidth ?? this._leftWidth;
this._rightWidth = options.rightWidth ?? this._rightWidth;
this._topHeight = options.topHeight ?? this._topHeight;
this._bottomHeight = options.bottomHeight ?? this._bottomHeight;
this._anchorX = options.anchor?.x;
this._anchorY = options.anchor?.y;
this.updateUvs();
this.updatePositions();
}
/** Updates the positions of the vertices. */
updatePositions() {
const p = this.positions;
const {
width,
height,
_leftWidth,
_rightWidth,
_topHeight,
_bottomHeight,
_anchorX,
_anchorY
} = this;
const w = _leftWidth + _rightWidth;
const scaleW = width > w ? 1 : width / w;
const h = _topHeight + _bottomHeight;
const scaleH = height > h ? 1 : height / h;
const scale = Math.min(scaleW, scaleH);
const anchorOffsetX = _anchorX * width;
const anchorOffsetY = _anchorY * height;
p[0] = p[8] = p[16] = p[24] = -anchorOffsetX;
p[2] = p[10] = p[18] = p[26] = _leftWidth * scale - anchorOffsetX;
p[4] = p[12] = p[20] = p[28] = width - _rightWidth * scale - anchorOffsetX;
p[6] = p[14] = p[22] = p[30] = width - anchorOffsetX;
p[1] = p[3] = p[5] = p[7] = -anchorOffsetY;
p[9] = p[11] = p[13] = p[15] = _topHeight * scale - anchorOffsetY;
p[17] = p[19] = p[21] = p[23] = height - _bottomHeight * scale - anchorOffsetY;
p[25] = p[27] = p[29] = p[31] = height - anchorOffsetY;
this.getBuffer("aPosition").update();
}
/** Updates the UVs of the vertices. */
updateUvs() {
const uvs = this.uvs;
uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0;
uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0;
uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1;
uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1;
const _uvw = 1 / this._originalWidth;
const _uvh = 1 / this._originalHeight;
uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth;
uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight;
uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - _uvw * this._rightWidth;
uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - _uvh * this._bottomHeight;
this.getBuffer("aUV").update();
}
};
/** The default options for the NineSliceGeometry. */
_NineSliceGeometry.defaultOptions = {
/** The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane. */
width: 100,
/** The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane. */
height: 100,
/** The width of the left column. */
leftWidth: 10,
/** The height of the top row. */
topHeight: 10,
/** The width of the right column. */
rightWidth: 10,
/** The height of the bottom row. */
bottomHeight: 10,
/** The original width of the texture */
originalWidth: 100,
/** The original height of the texture */
originalHeight: 100
};
let NineSliceGeometry = _NineSliceGeometry;
exports.NineSliceGeometry = NineSliceGeometry;
//# sourceMappingURL=NineSliceGeometry.js.map