Skip to content

Commit

Permalink
feat: 发布小游戏插件1.0.8
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuanzm
yuanzm committed Mar 14, 2024
1 parent 3e91adc commit f301452
Show file tree
Hide file tree
Showing 23 changed files with 530 additions and 211 deletions.
5 changes: 3 additions & 2 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
#### 2024.3.12
#### 2024.3.14
1. `U` 文字支持textStrokeWidth和textStrokeColor实现描边功能;
2. `U` 小游戏插件发布1.0.8版本；
2. `U` 文字支持textShadow实现阴影功能;
3. `U` 小游戏插件发布1.0.8版本；

#### 2023.1.03
1. `U` 小游戏插件发布1.0.7版本；
Expand Down
59 changes: 55 additions & 4 deletions demos/noengine/engine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -631,6 +631,9 @@ var repaintAffectedStyles = [
'borderColor',
'opacity',
'transform',
'textStrokeColor',
'textStrokeWidth',
'textShadow',
];
var allStyles = reflowAffectedStyles.concat(repaintAffectedStyles);

Expand Down Expand Up @@ -957,6 +960,7 @@ module.exports.TinyEmitter = E;
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ backgroundImageParser: () => (/* binding */ backgroundImageParser),
/* harmony export */ isValidTextShadow: () => (/* binding */ isValidTextShadow),
/* harmony export */ rotateParser: () => (/* binding */ rotateParser)
/* harmony export */ });
function degreesToRadians(degrees) {
Expand Down Expand Up @@ -986,6 +990,10 @@ function backgroundImageParser(val) {
console.error("[Layout]: ".concat(val, " is not a valid backgroundImage"));
return null;
}
var textShadowReg = /^(\d+px\s){2}\d+px\s[a-zA-Z]+(,\s*(\d+px\s){2}\d+px\s[a-zA-Z]+)*$/;
function isValidTextShadow(textShadow) {
return textShadowReg.test(textShadow);
}


/***/ }),
Expand Down Expand Up @@ -3708,8 +3716,8 @@ function parseText(style, value) {
var Text = /** @class */ (function (_super) {
__extends(Text, _super);
function Text(_a) {
var _b = _a.style, style = _b === void 0 ? {} : _b, _c = _a.idName, idName = _c === void 0 ? '' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.value, value = _e === void 0 ? '' : _e, dataset = _a.dataset;
var _this = this;
var _b = _a.style, style = _b === void 0 ? {} : _b, _c = _a.idName, idName = _c === void 0 ? '' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.value, value = _e === void 0 ? '' : _e, dataset = _a.dataset;
var originStyleWidth = style.width;
// 没有设置宽度的时候通过canvas计算出文字宽度
if (originStyleWidth === undefined) {
Expand All @@ -3736,8 +3744,31 @@ var Text = /** @class */ (function (_super) {
_this.ctx = null;
_this.valuesrc = value;
_this.originStyleWidth = originStyleWidth;
if (style.textShadow) {
_this.parseTextShadow(style.textShadow);
}
return _this;
}
Text.prototype.styleChangeHandler = function (prop, val) {
if (prop === 'textShadow') {
this.parseTextShadow(val);
}
};
Text.prototype.parseTextShadow = function (textShadow) {
// if (!isValidTextShadow(textShadow)) {
// console.error(`[Layout]: ${textShadow} is not a valid textShadow`);
// } else {
// 解析 text-shadow 字符串
this.textShadows = textShadow.split(',').map(function (shadow) {
var parts = shadow.trim().split(/\s+/);
var offsetX = parseFloat(parts[0]);
var offsetY = parseFloat(parts[1]);
var blurRadius = parseFloat(parts[2]);
var color = parts[3];
return { offsetX: offsetX, offsetY: offsetY, blurRadius: blurRadius, color: color };
});
// }
};
Object.defineProperty(Text.prototype, "value", {
get: function () {
return this.valuesrc;
Expand Down Expand Up @@ -3785,6 +3816,7 @@ var Text = /** @class */ (function (_super) {
}
};
Text.prototype.render = function () {
var _this = this;
var style = this.style;
var ctx = this.ctx;
ctx.save();
Expand All @@ -3806,7 +3838,26 @@ var Text = /** @class */ (function (_super) {
ctx.textBaseline = 'middle';
drawY += style.lineHeight / 2;
}
ctx.fillText(this.value, drawX - originX, drawY - originY);
// 纹理文字描边
if (style.textStrokeColor) {
ctx.lineWidth = style.textStrokeWidth || 1;
ctx.strokeStyle = style.textStrokeColor;
ctx.strokeText(this.value, drawX - originX, drawY - originY);
}
// 处理文字阴影
if (this.textShadows) {
this.textShadows.forEach(function (_a) {
var offsetX = _a.offsetX, offsetY = _a.offsetY, blurRadius = _a.blurRadius, color = _a.color;
ctx.shadowOffsetX = offsetX;
ctx.shadowOffsetY = offsetY;
ctx.shadowBlur = blurRadius;
ctx.shadowColor = color;
ctx.fillText(_this.value, drawX - originX, drawY - originY);
});
}
else {
ctx.fillText(this.value, drawX - originX, drawY - originY);
}
ctx.translate(-originX, -originY);
ctx.restore();
};
Expand Down Expand Up @@ -5338,8 +5389,8 @@ function checkNeedHideScrollBar(direction, dimensions) {
var ScrollBar = /** @class */ (function (_super) {
__extends(ScrollBar, _super);
function ScrollBar(_a) {
var direction = _a.direction, dimensions = _a.dimensions, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'rgba(162, 162, 162, 1)' : _b, _c = _a.width, width = _c === void 0 ? 16 : _c;
var _this = this;
var direction = _a.direction, dimensions = _a.dimensions, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'rgba(162, 162, 162, 1)' : _b, _c = _a.width, width = _c === void 0 ? 16 : _c;
var style = Object.assign({
backgroundColor: backgroundColor,
position: 'absolute',
Expand Down Expand Up @@ -5911,7 +5962,7 @@ var Layout = /** @class */ (function (_super) {
/**
* 当前 Layout 版本，一般跟小游戏插件版本对齐
*/
_this.version = '1.0.7';
_this.version = '1.0.8';
_this.env = _env__WEBPACK_IMPORTED_MODULE_0__["default"];
/**
* Layout 渲染的目标画布对应的 2d context
Expand Down
1 change: 1 addition & 0 deletions demos/noengine/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ let style = {
fontSize: 50,
textAlign: 'center',
marginTop: 20,
// textShadow: '2px 2px 2px red',
},

rank: {
Expand Down
59 changes: 55 additions & 4 deletions demos/noengine/sub/engine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -631,6 +631,9 @@ var repaintAffectedStyles = [
'borderColor',
'opacity',
'transform',
'textStrokeColor',
'textStrokeWidth',
'textShadow',
];
var allStyles = reflowAffectedStyles.concat(repaintAffectedStyles);

Expand Down Expand Up @@ -957,6 +960,7 @@ module.exports.TinyEmitter = E;
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ backgroundImageParser: () => (/* binding */ backgroundImageParser),
/* harmony export */ isValidTextShadow: () => (/* binding */ isValidTextShadow),
/* harmony export */ rotateParser: () => (/* binding */ rotateParser)
/* harmony export */ });
function degreesToRadians(degrees) {
Expand Down Expand Up @@ -986,6 +990,10 @@ function backgroundImageParser(val) {
console.error("[Layout]: ".concat(val, " is not a valid backgroundImage"));
return null;
}
var textShadowReg = /^(\d+px\s){2}\d+px\s[a-zA-Z]+(,\s*(\d+px\s){2}\d+px\s[a-zA-Z]+)*$/;
function isValidTextShadow(textShadow) {
return textShadowReg.test(textShadow);
}


/***/ }),
Expand Down Expand Up @@ -3708,8 +3716,8 @@ function parseText(style, value) {
var Text = /** @class */ (function (_super) {
__extends(Text, _super);
function Text(_a) {
var _b = _a.style, style = _b === void 0 ? {} : _b, _c = _a.idName, idName = _c === void 0 ? '' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.value, value = _e === void 0 ? '' : _e, dataset = _a.dataset;
var _this = this;
var _b = _a.style, style = _b === void 0 ? {} : _b, _c = _a.idName, idName = _c === void 0 ? '' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.value, value = _e === void 0 ? '' : _e, dataset = _a.dataset;
var originStyleWidth = style.width;
// 没有设置宽度的时候通过canvas计算出文字宽度
if (originStyleWidth === undefined) {
Expand All @@ -3736,8 +3744,31 @@ var Text = /** @class */ (function (_super) {
_this.ctx = null;
_this.valuesrc = value;
_this.originStyleWidth = originStyleWidth;
if (style.textShadow) {
_this.parseTextShadow(style.textShadow);
}
return _this;
}
Text.prototype.styleChangeHandler = function (prop, val) {
if (prop === 'textShadow') {
this.parseTextShadow(val);
}
};
Text.prototype.parseTextShadow = function (textShadow) {
// if (!isValidTextShadow(textShadow)) {
// console.error(`[Layout]: ${textShadow} is not a valid textShadow`);
// } else {
// 解析 text-shadow 字符串
this.textShadows = textShadow.split(',').map(function (shadow) {
var parts = shadow.trim().split(/\s+/);
var offsetX = parseFloat(parts[0]);
var offsetY = parseFloat(parts[1]);
var blurRadius = parseFloat(parts[2]);
var color = parts[3];
return { offsetX: offsetX, offsetY: offsetY, blurRadius: blurRadius, color: color };
});
// }
};
Object.defineProperty(Text.prototype, "value", {
get: function () {
return this.valuesrc;
Expand Down Expand Up @@ -3785,6 +3816,7 @@ var Text = /** @class */ (function (_super) {
}
};
Text.prototype.render = function () {
var _this = this;
var style = this.style;
var ctx = this.ctx;
ctx.save();
Expand All @@ -3806,7 +3838,26 @@ var Text = /** @class */ (function (_super) {
ctx.textBaseline = 'middle';
drawY += style.lineHeight / 2;
}
ctx.fillText(this.value, drawX - originX, drawY - originY);
// 纹理文字描边
if (style.textStrokeColor) {
ctx.lineWidth = style.textStrokeWidth || 1;
ctx.strokeStyle = style.textStrokeColor;
ctx.strokeText(this.value, drawX - originX, drawY - originY);
}
// 处理文字阴影
if (this.textShadows) {
this.textShadows.forEach(function (_a) {
var offsetX = _a.offsetX, offsetY = _a.offsetY, blurRadius = _a.blurRadius, color = _a.color;
ctx.shadowOffsetX = offsetX;
ctx.shadowOffsetY = offsetY;
ctx.shadowBlur = blurRadius;
ctx.shadowColor = color;
ctx.fillText(_this.value, drawX - originX, drawY - originY);
});
}
else {
ctx.fillText(this.value, drawX - originX, drawY - originY);
}
ctx.translate(-originX, -originY);
ctx.restore();
};
Expand Down Expand Up @@ -5338,8 +5389,8 @@ function checkNeedHideScrollBar(direction, dimensions) {
var ScrollBar = /** @class */ (function (_super) {
__extends(ScrollBar, _super);
function ScrollBar(_a) {
var direction = _a.direction, dimensions = _a.dimensions, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'rgba(162, 162, 162, 1)' : _b, _c = _a.width, width = _c === void 0 ? 16 : _c;
var _this = this;
var direction = _a.direction, dimensions = _a.dimensions, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'rgba(162, 162, 162, 1)' : _b, _c = _a.width, width = _c === void 0 ? 16 : _c;
var style = Object.assign({
backgroundColor: backgroundColor,
position: 'absolute',
Expand Down Expand Up @@ -5911,7 +5962,7 @@ var Layout = /** @class */ (function (_super) {
/**
* 当前 Layout 版本，一般跟小游戏插件版本对齐
*/
_this.version = '1.0.7';
_this.version = '1.0.8';
_this.env = _env__WEBPACK_IMPORTED_MODULE_0__["default"];
/**
* Layout 渲染的目标画布对应的 2d context
Expand Down
8 changes: 7 additions & 1 deletion demos/noengine/sub/render/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,19 @@ export default {
},

title: {
fontFamily: '猫啃什锦黑',
width: 144,
fontSize: 48,
fontSize: 60,
height: 120,
lineHeight: 120,
textAlign: "center",
fontWeight: "bold",
borderBottomWidth: 6,
borderColor: "#000000",
color: '#ffffff',
textStrokeWidth: 2,
textStrokeColor: '#000000',
textShadow: '1px 1px 2px #0000ff',
},

rankList: {
Expand Down Expand Up @@ -91,6 +96,7 @@ export default {
width: 350,
marginLeft: 30,
fontFamily: '"Lucida Console", "Courier New", monospace',
textShadow: '2px 2px 2px red',
},

listScoreUnit: {
Expand Down
2 changes: 1 addition & 1 deletion demos/noengine/sub/render/template.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const template = `
<view class="container" id="main">
<view class="header">
<text class="title" value="排行榜"></text>
<text class="title" value="ranklist"></text>
</view>
<view class="rankList">
<scrollview class="list" scrollY="true">
Expand Down
18 changes: 18 additions & 0 deletions dist/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,15 @@ interface IStyle {
fontWeight?: string;
fontFamily?: string;
transform?: string;
textStrokeWidth?: number;
textStrokeColor?: string;
/**
* 文字阴影效果，textShadow的格式并不是严格的CSS格式，仅支持两种格式
* textShadow: 1px 1px 2px pink
* textShadow: 1px 1px 2px red, 0 0 1px blue, 0 0 1px blue, 1px 1px 2px red
* 也就是支持任意数量的阴影效果，每个阴影效果由四个值指定，分别是 shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
*/
textShadow?: string;
}

declare class Rect {
Expand Down Expand Up @@ -381,6 +390,12 @@ declare class Image extends Element {
interface ITextProps extends IElementOptions {
value?: string;
}
interface ITextShadow {
offsetX: number;
offsetY: number;
blurRadius: number;
color: string;
}
declare class Text extends Element {
private valuesrc;
private originStyleWidth;
Expand All @@ -389,7 +404,10 @@ declare class Text extends Element {
font: string;
textAlign: CanvasTextAlign;
fillStyle: string;
textShadows: null | ITextShadow[];
constructor({ style, idName, className, value, dataset, }: ITextProps);
styleChangeHandler(prop: string, val: any): void;
private parseTextShadow;
get value(): string;
set value(newValue: string);
toCanvasData(): void;
Expand Down
Loading

0 comments on commit f301452

Please sign in to comment.