@turbox3d/graphic-component-pixi
Version:
Graphic component library based on pixi
145 lines (144 loc) • 8.87 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.parseFillTextureOption = parseFillTextureOption;
exports.parseGraphicOption = parseGraphicOption;
exports.setCommonOption = setCommonOption;
exports.setFillTexture = setFillTexture;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _shared = require("@turbox3d/shared");
var PIXI = _interopRequireWildcard(require("pixi.js"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2["default"])(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; }
var GraphicOption = /*#__PURE__*/(0, _createClass2["default"])(function GraphicOption() {
(0, _classCallCheck2["default"])(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 */
function parseGraphicOption(option) {
return option ? _objectSpread(_objectSpread({}, defaultOption), option) : defaultOption;
}
/** 直接设置通用的样式配置 */
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__*/(0, _createClass2["default"])(function FillTextureOption() {
(0, _classCallCheck2["default"])(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();
function parseFillTextureOption(option) {
return option ? _objectSpread(_objectSpread({}, defaultFillTextureOption), option) : defaultFillTextureOption;
}
/** 设置填充贴图 */
function setFillTexture(_x, _x2, _x3) {
return _setFillTexture.apply(this, arguments);
}
function _setFillTexture() {
_setFillTexture = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].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 _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return PIXI.Texture.fromURL(fillTextureUrl)["catch"](function () {
(0, _shared.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);
}