@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
137 lines (136 loc) • 6.28 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import Utils from '../utils';
import { BaseButton } from './BaseButton';
import { Text } from './Text';
var RoundedButton = /** @class */ (function (_super) {
__extends(RoundedButton, _super);
function RoundedButton(scene, config) {
var _this = this;
config.geomType = 'Circle';
_this = _super.call(this, scene, config, 'RoundedButton') || this;
_this.Type = "RoundedButton";
_this._config = config;
_this.reDraw(_this._config);
return _this;
}
RoundedButton.prototype.reDraw = function (config) {
var _a, _b, _c, _d, _e, _f, _g;
this._config = config;
this.updateConfig(config);
var radius = (_a = config.radius) !== null && _a !== void 0 ? _a : 0;
var borderWidth = (_b = config.borderWidth) !== null && _b !== void 0 ? _b : 0;
var btnRadius = radius + borderWidth;
var borderColor = (_c = config.borderColor) !== null && _c !== void 0 ? _c : 0xFFD700;
var backgroundColor = (_d = config.backgroundColor) !== null && _d !== void 0 ? _d : 0x32CD32;
var backgroundAlpha = (_e = config.backgroundAlpha) !== null && _e !== void 0 ? _e : 1;
if (!this.maskShape)
this.maskShape = this.scene.add.graphics();
if (!this.image)
this.image = this.scene.make.image({});
this.reDrawBg(btnRadius, btnRadius, btnRadius, borderWidth, borderColor, backgroundColor, backgroundAlpha);
var visible = true;
if (!config.texture) {
visible = false;
}
//即使是隐藏图片也要绘制大小出来，因为至少给一个宽高给container，不然触摸区域会出问题
this.reDrawImage(config.texture, borderWidth, borderWidth, radius * 2, radius * 2, visible);
var color = 0xffffff;
this.reDrawMaskShap(radius, color);
this.RefreshBounds();
this._config.width = this.RealWidth;
this._config.height = this.RealHeight;
this.setDepth((_g = (_f = this._config) === null || _f === void 0 ? void 0 : _f.depth) !== null && _g !== void 0 ? _g : 1);
this.setScrollFactor(this._config.isScrollFactor ? 0 : 1);
};
RoundedButton.prototype.reDrawBg = function (x, y, radius, borderWidth, borderColor, fillColor, backgroundAlpha) {
if (this.bg) {
this.bg.destroy();
}
this.bg = Utils.drawCircleRenderTexture(this.scene, x, y, radius, borderWidth, borderColor, fillColor).setAlpha(backgroundAlpha);
this.image.setVisible(false);
this.addChildAt(this.bg, 1);
};
RoundedButton.prototype.reDrawText = function () {
var _a, _b, _c;
var config = this._config;
var radius = (_a = config.radius) !== null && _a !== void 0 ? _a : 0;
var borderWidth = (_b = config.borderWidth) !== null && _b !== void 0 ? _b : 0;
var btnRadius = radius + borderWidth;
var FSize = (_c = config.fontSize) !== null && _c !== void 0 ? _c : 18;
if (!config.text)
return;
// 绘制文字
var text = new Text(this.scene, {
y: btnRadius - FSize / 2,
width: btnRadius * 2,
text: config.text,
textStyle: {
color: config.fontColor, // 颜色
fontSize: FSize + 'px'
},
textAlign: 'center',
});
this.addChildAt(text, 3);
};
RoundedButton.prototype.reDrawImage = function (textureKey, x, y, w, h, visible) {
var _a, _b, _c, _d;
if (visible === void 0) { visible = true; }
(_a = this.image) === null || _a === void 0 ? void 0 : _a.setTexture(textureKey);
(_b = this.image) === null || _b === void 0 ? void 0 : _b.setPosition(x, y);
(_c = this.image) === null || _c === void 0 ? void 0 : _c.setDisplaySize(w, h);
(_d = this.image) === null || _d === void 0 ? void 0 : _d.setOrigin(0);
this.image.setVisible(visible);
this.addChildAt(this.image, 2);
this.reDrawText();
};
RoundedButton.prototype.reDrawMaskShap = function (radius, fillColor) {
this.maskShape.clear();
this.maskShape.fillStyle(fillColor);
this.maskShape.fillCircle(0, 0, radius);
var mask = this.maskShape.createGeometryMask();
this.maskShape.setVisible(false);
this.image.setMask(mask);
this.addChildAt(this.maskShape, 0);
this.updateMaskShapePos();
};
//根据按钮的位置来更新mask的位置但不重绘
RoundedButton.prototype.updateMaskShapePos = function () {
var _a, _b;
var radius = (_a = this._config.radius) !== null && _a !== void 0 ? _a : 0;
var borderWidth = (_b = this._config.borderWidth) !== null && _b !== void 0 ? _b : 0;
var btnRadius = radius + borderWidth;
var bgLeftTopPos = Utils.getWorldPosition(this.bg);
this.maskShape.setPosition(bgLeftTopPos.x + btnRadius, bgLeftTopPos.y + btnRadius);
};
RoundedButton.prototype.destroy = function (fromScene) {
if (this.bg) {
this.bg.destroy();
this.bg = undefined;
}
if (this.image) {
this.image.destroy();
this.image = undefined;
}
if (this.maskShape) {
this.maskShape.destroy();
this.maskShape = undefined;
}
_super.prototype.destroy.call(this, fromScene);
};
return RoundedButton;
}(BaseButton));
export { RoundedButton };