@turbox3d/graphic-component-pixi
Version:
Graphic component library based on pixi
133 lines • 7.57 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _regeneratorRuntime from "@babel/runtime/regenerator";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { fail } from '@turbox3d/shared';
import * as PIXI from 'pixi.js';
var GraphicOption = /*#__PURE__*/_createClass(function GraphicOption() {
_classCallCheck(this, GraphicOption);
// 线条样式
this.lineWidth = 0;
this.lineColor = 0x0;
this.lineAlpha = 1;
this.alignment = 0;
this["native"] = false;
// 填充样式
this.fillColor = 0x0;
this.fillAlpha = 1;
// 整体透明度
this.alpha = 1;
});
var defaultOption = new GraphicOption();
/** 解析 Option */
export function parseGraphicOption(option) {
return option ? _objectSpread(_objectSpread({}, defaultOption), option) : defaultOption;
}
/** 直接设置通用的样式配置 */
export function setCommonOption(graphic, option) {
// 样式配置
var _parseGraphicOption = parseGraphicOption(option),
_parseGraphicOption$f = _parseGraphicOption.fillColor,
fillColor = _parseGraphicOption$f === void 0 ? defaultOption.fillColor : _parseGraphicOption$f,
_parseGraphicOption$f2 = _parseGraphicOption.fillAlpha,
fillAlpha = _parseGraphicOption$f2 === void 0 ? defaultOption.fillAlpha : _parseGraphicOption$f2,
_parseGraphicOption$l = _parseGraphicOption.lineWidth,
lineWidth = _parseGraphicOption$l === void 0 ? defaultOption.lineWidth : _parseGraphicOption$l,
_parseGraphicOption$l2 = _parseGraphicOption.lineColor,
lineColor = _parseGraphicOption$l2 === void 0 ? defaultOption.lineColor : _parseGraphicOption$l2,
_parseGraphicOption$l3 = _parseGraphicOption.lineAlpha,
lineAlpha = _parseGraphicOption$l3 === void 0 ? defaultOption.lineAlpha : _parseGraphicOption$l3,
_parseGraphicOption$a = _parseGraphicOption.alignment,
alignment = _parseGraphicOption$a === void 0 ? defaultOption.alignment : _parseGraphicOption$a,
_parseGraphicOption$n = _parseGraphicOption["native"],
_native = _parseGraphicOption$n === void 0 ? defaultOption["native"] : _parseGraphicOption$n,
_parseGraphicOption$a2 = _parseGraphicOption.alpha,
alpha = _parseGraphicOption$a2 === void 0 ? defaultOption.alpha : _parseGraphicOption$a2;
graphic.alpha = alpha;
graphic.beginFill(fillColor, fillAlpha);
graphic.lineStyle(lineWidth, lineColor, lineAlpha, alignment, _native);
}
var FillTextureOption = /*#__PURE__*/_createClass(function FillTextureOption() {
_classCallCheck(this, FillTextureOption);
this.fillColor = 0xffffff;
this.fillAlpha = 1;
this.fit = 'none';
this.posX = 0;
this.posY = 0;
this.width = 0;
this.height = 0;
});
var defaultFillTextureOption = new FillTextureOption();
export function parseFillTextureOption(option) {
return option ? _objectSpread(_objectSpread({}, defaultFillTextureOption), option) : defaultFillTextureOption;
}
/** 设置填充贴图 */
export function setFillTexture(_x, _x2, _x3) {
return _setFillTexture.apply(this, arguments);
}
function _setFillTexture() {
_setFillTexture = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(graphic, fillTextureUrl, option) {
var t, _parseFillTextureOpti, _parseFillTextureOpti2, fillColor, _parseFillTextureOpti3, fillAlpha, _parseFillTextureOpti4, fit, _parseFillTextureOpti5, posX, _parseFillTextureOpti6, posY, _parseFillTextureOpti7, rw, _parseFillTextureOpti8, rh, width, height, imgRatio, rectRatio, center, matrix;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return PIXI.Texture.fromURL(fillTextureUrl)["catch"](function () {
fail('Load fill texture failed.');
});
case 2:
t = _context.sent;
if (t) {
_context.next = 5;
break;
}
return _context.abrupt("return");
case 5:
_parseFillTextureOpti = parseFillTextureOption(option), _parseFillTextureOpti2 = _parseFillTextureOpti.fillColor, fillColor = _parseFillTextureOpti2 === void 0 ? defaultFillTextureOption.fillColor : _parseFillTextureOpti2, _parseFillTextureOpti3 = _parseFillTextureOpti.fillAlpha, fillAlpha = _parseFillTextureOpti3 === void 0 ? defaultFillTextureOption.fillAlpha : _parseFillTextureOpti3, _parseFillTextureOpti4 = _parseFillTextureOpti.fit, fit = _parseFillTextureOpti4 === void 0 ? defaultFillTextureOption.fit : _parseFillTextureOpti4, _parseFillTextureOpti5 = _parseFillTextureOpti.posX, posX = _parseFillTextureOpti5 === void 0 ? defaultFillTextureOption.posX : _parseFillTextureOpti5, _parseFillTextureOpti6 = _parseFillTextureOpti.posY, posY = _parseFillTextureOpti6 === void 0 ? defaultFillTextureOption.posY : _parseFillTextureOpti6, _parseFillTextureOpti7 = _parseFillTextureOpti.width, rw = _parseFillTextureOpti7 === void 0 ? defaultFillTextureOption.width : _parseFillTextureOpti7, _parseFillTextureOpti8 = _parseFillTextureOpti.height, rh = _parseFillTextureOpti8 === void 0 ? defaultFillTextureOption.height : _parseFillTextureOpti8;
width = t.width, height = t.height;
imgRatio = width / height;
rectRatio = rw / rh;
center = {
x: posX + rw / 2,
y: posY + rh / 2
};
matrix = new PIXI.Matrix();
if (fit === 'none') {
matrix.translate(center.x - width / 2, center.y - height / 2);
} else if (fit === 'fill') {
matrix.scale(rw / width, rh / height);
matrix.translate(posX, posY);
} else if (fit === 'cover') {
if (imgRatio <= rectRatio) {
matrix.scale(rw / width, rw / imgRatio / height);
matrix.translate(posX, posY + rh / 2 - rw / imgRatio / 2);
} else {
matrix.scale(rh * imgRatio / width, rh / height);
matrix.translate(posX + rw / 2 - rh * imgRatio / 2, posY);
}
} else if (fit === 'contain') {
if (imgRatio <= rectRatio) {
matrix.scale(rh * imgRatio / width, rh / height);
matrix.translate(posX + rw / 2 - rh * imgRatio / 2, posY);
} else {
matrix.scale(rw / width, rw / imgRatio / height);
matrix.translate(posX, posY + rh / 2 - rw / imgRatio / 2);
}
}
graphic.beginTextureFill({
texture: t,
color: fillColor,
alpha: fillAlpha,
matrix: matrix
});
case 13:
case "end":
return _context.stop();
}
}, _callee);
}));
return _setFillTexture.apply(this, arguments);
}