@turbox3d/graphic-component-pixi
Version:
Graphic component library based on pixi
295 lines • 13.1 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _regeneratorRuntime from "@babel/runtime/regenerator";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import * as PIXI from 'pixi.js';
import { Mesh2D } from '@turbox3d/renderer-pixi';
import { fail, cropImage } from '@turbox3d/shared';
import DrawUtils from '../draw-utils';
/** UI组件-图片 */
var Image2d = /*#__PURE__*/function (_Mesh2D) {
function Image2d() {
var _this;
_classCallCheck(this, Image2d);
_this = _callSuper(this, Image2d, arguments);
_this.reactivePipeLine = [_this.updateGeometry, _this.updateMaterial, _this.updatePosition, _this.updateRotation, _this.updateScale];
_this.g = new PIXI.Graphics();
_this.s = new PIXI.Sprite();
return _this;
}
_inherits(Image2d, _Mesh2D);
return _createClass(Image2d, [{
key: "componentDidMount",
value: function componentDidMount() {
this.g.zIndex = -1;
this.s.zIndex = -1;
this.view.addChild(this.g);
this.view.addChild(this.s);
}
}, {
key: "loadTextureResource",
value: function () {
var _loadTextureResource = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var backgroundImage, t;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
backgroundImage = this.props.backgroundImage;
if (backgroundImage) {
_context.next = 3;
break;
}
return _context.abrupt("return");
case 3:
if (!(backgroundImage instanceof HTMLImageElement)) {
_context.next = 9;
break;
}
_context.next = 6;
return PIXI.Texture.fromLoader(backgroundImage, backgroundImage.src)["catch"](function () {
fail('Load Image2d backgroundImage texture failed.');
});
case 6:
t = _context.sent;
_context.next = 12;
break;
case 9:
_context.next = 11;
return PIXI.Texture.fromURL(backgroundImage)["catch"](function () {
fail('Load Image2d backgroundImage texture failed.');
});
case 11:
t = _context.sent;
case 12:
return _context.abrupt("return", t);
case 13:
case "end":
return _context.stop();
}
}, _callee, this);
}));
function loadTextureResource() {
return _loadTextureResource.apply(this, arguments);
}
return loadTextureResource;
}()
}, {
key: "updateGeometry",
value: function () {
var _updateGeometry = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var _this$props, width, height, _this$props$radius, radius, _this$props$lineWidth, lineWidth, _this$props$lineColor, lineColor, _this$props$lineAlpha, lineAlpha, _this$props$alignment, alignment, _native, _this$props$fillColor, fillColor, _this$props$fillAlpha, fillAlpha, _this$props$alpha, alpha, _this$props$backgroun, backgroundImage, _this$props$fit, fit, alignParam, fillPos, rw, rh, t, _this$s$texture, tw, th, imgRatio, rectRatio, center, ratio, _yield$cropImage, element, _ratio, _yield$cropImage2, _element;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
this.g.clear();
this.s.visible = false;
_this$props = this.props, width = _this$props.width, height = _this$props.height, _this$props$radius = _this$props.radius, radius = _this$props$radius === void 0 ? 0 : _this$props$radius, _this$props$lineWidth = _this$props.lineWidth, lineWidth = _this$props$lineWidth === void 0 ? 0 : _this$props$lineWidth, _this$props$lineColor = _this$props.lineColor, lineColor = _this$props$lineColor === void 0 ? 0x0 : _this$props$lineColor, _this$props$lineAlpha = _this$props.lineAlpha, lineAlpha = _this$props$lineAlpha === void 0 ? 1 : _this$props$lineAlpha, _this$props$alignment = _this$props.alignment, alignment = _this$props$alignment === void 0 ? 0 : _this$props$alignment, _native = _this$props["native"], _this$props$fillColor = _this$props.fillColor, fillColor = _this$props$fillColor === void 0 ? 0x0 : _this$props$fillColor, _this$props$fillAlpha = _this$props.fillAlpha, fillAlpha = _this$props$fillAlpha === void 0 ? 0 : _this$props$fillAlpha, _this$props$alpha = _this$props.alpha, alpha = _this$props$alpha === void 0 ? 1 : _this$props$alpha, _this$props$backgroun = _this$props.backgroundImage, backgroundImage = _this$props$backgroun === void 0 ? '' : _this$props$backgroun, _this$props$fit = _this$props.fit, fit = _this$props$fit === void 0 ? 'none' : _this$props$fit;
alignParam = alignment;
if (alignment === 0) {
alignParam = 1;
} else if (alignment === 1) {
alignParam = 0;
}
fillPos = {
x: lineWidth * alignParam,
y: lineWidth * alignParam
};
rw = width - lineWidth * 2 * alignParam;
rh = height - lineWidth * 2 * alignParam;
DrawUtils.drawRect(this.g, {
x: 0,
y: 0,
width: width,
height: height,
central: false,
radius: radius,
lineWidth: lineWidth,
lineColor: lineColor,
lineAlpha: lineAlpha,
alignment: alignment,
"native": _native,
fillColor: fillColor,
fillAlpha: fillAlpha,
alpha: alpha
});
_context2.next = 11;
return this.loadTextureResource();
case 11:
t = _context2.sent;
if (t) {
_context2.next = 14;
break;
}
return _context2.abrupt("return");
case 14:
this.s.texture = t;
_this$s$texture = this.s.texture, tw = _this$s$texture.width, th = _this$s$texture.height;
imgRatio = tw / th;
rectRatio = width / height;
center = {
x: width / 2,
y: height / 2
};
if (!(fit === 'none')) {
_context2.next = 24;
break;
}
if (rectRatio > 1) {
this.s.width = rw;
this.s.height = rw / imgRatio;
} else {
this.s.width = rh * imgRatio;
this.s.height = rh;
}
this.s.position.set(center.x - this.s.width / 2, center.y - this.s.height / 2);
_context2.next = 54;
break;
case 24:
if (!(fit === 'fill')) {
_context2.next = 30;
break;
}
this.s.width = rw;
this.s.height = rh;
this.s.position.set(fillPos.x, fillPos.y);
_context2.next = 54;
break;
case 30:
if (!(fit === 'cover')) {
_context2.next = 53;
break;
}
if (!(imgRatio <= rectRatio)) {
_context2.next = 42;
break;
}
ratio = rw / tw;
_context2.next = 35;
return cropImage(backgroundImage, {
start: {
x: 0,
y: th / 2 - rh / ratio / 2
},
end: {
x: tw,
y: th / 2 + rh / ratio / 2
}
});
case 35:
_yield$cropImage = _context2.sent;
element = _yield$cropImage.element;
if (element) {
this.s.texture = PIXI.Texture.from(element);
}
this.s.width = rw;
this.s.height = rh;
_context2.next = 50;
break;
case 42:
_ratio = rh / th;
_context2.next = 45;
return cropImage(backgroundImage, {
start: {
x: tw / 2 - rw / _ratio / 2,
y: 0
},
end: {
x: tw / 2 + rw / _ratio / 2,
y: th
}
});
case 45:
_yield$cropImage2 = _context2.sent;
_element = _yield$cropImage2.element;
if (_element) {
this.s.texture = PIXI.Texture.from(_element);
}
this.s.width = rw;
this.s.height = rh;
case 50:
this.s.position.set(fillPos.x, fillPos.y);
_context2.next = 54;
break;
case 53:
if (fit === 'contain') {
if (imgRatio <= rectRatio) {
this.s.width = rh * imgRatio;
this.s.height = rh;
this.s.position.set(fillPos.x + rw / 2 - rh * imgRatio / 2, fillPos.y);
} else {
this.s.width = rw;
this.s.height = rw / imgRatio;
this.s.position.set(fillPos.x, fillPos.y + rh / 2 - rw / imgRatio / 2);
}
}
case 54:
// 方便做贴图的镜像翻转
this.s.anchor.set(0.5, 0.5);
// anchor 设置为 0.5 后，此处需要将贴图调整回去
this.s.position.set(this.s.position.x + this.s.width / 2, this.s.position.y + this.s.height / 2);
this.s.visible = true;
case 57:
case "end":
return _context2.stop();
}
}, _callee2, this);
}));
function updateGeometry() {
return _updateGeometry.apply(this, arguments);
}
return updateGeometry;
}()
}, {
key: "updateMaterial",
value: function updateMaterial() {
var _this$props2 = this.props,
_this$props2$zIndex = _this$props2.zIndex,
zIndex = _this$props2$zIndex === void 0 ? 0 : _this$props2$zIndex,
_this$props2$material = _this$props2.materialDirection,
materialDirection = _this$props2$material === void 0 ? {
x: 1,
y: 1
} : _this$props2$material;
this.view.zIndex = zIndex;
this.s.scale.set(materialDirection.x > 0 ? Math.abs(this.s.scale.x) : -Math.abs(this.s.scale.x), materialDirection.y > 0 ? Math.abs(this.s.scale.y) : -Math.abs(this.s.scale.y));
}
}, {
key: "updatePosition",
value: function updatePosition() {
var _this$props3 = this.props,
_this$props3$x = _this$props3.x,
x = _this$props3$x === void 0 ? 0 : _this$props3$x,
_this$props3$y = _this$props3.y,
y = _this$props3$y === void 0 ? 0 : _this$props3$y,
_this$props3$central = _this$props3.central,
central = _this$props3$central === void 0 ? false : _this$props3$central,
width = _this$props3.width,
height = _this$props3.height;
var _ref = central ? [x - width / 2, y - height / 2] : [x, y],
_ref2 = _slicedToArray(_ref, 2),
posX = _ref2[0],
posY = _ref2[1];
this.view.position.x = posX;
this.view.position.y = posY;
}
}, {
key: "updateRotation",
value: function updateRotation() {
var _a;
this.view.rotation = (_a = this.props.rotation) !== null && _a !== void 0 ? _a : 0;
}
}, {
key: "updateScale",
value: function updateScale() {
var _a, _b, _c, _d;
this.view.scale.set((_b = (_a = this.props.scale) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 1, (_d = (_c = this.props.scale) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 1);
}
}]);
}(Mesh2D);
export { Image2d as default };