fairygui / fairygui-layabox Goto Github PK
View Code? Open in Web Editor NEWA flexible UI framework for LayaAir
License: MIT License
A flexible UI framework for LayaAir
License: MIT License
倘若现在需要同步兼容laya的最新版本,但作为一个公共库,对于master分支当然也需要兼容2.2以上最新版本以下的旧版本,目前基于canvas的黑盒测试并没有一个成熟的方案,我想请问一下,你是如何做旧版本的兼容测试的?或许可以这样,一个分支对应laya的一个版本,当前分支只要兼容当前laya的版本即可。
Hi,
I am having a few issues with layabox and fairy GUI with responsiveness.
The UI doesn't seem to scale properly when resized. The game is currently in "fixedHeight' mode, so a lot of the time, the game scales properly, but when the aspect ratio changes, the UI elements go out of the window.
Is it possible to force FairyGUI to update the height or the aspect ratio when the game rescales?
I am very limited by the fact that a lot of documentation/resources are in chinese and I sadly cannot read or understand the language so it makes it very difficult for me to know about these things if they happen to be obvious
source/src/fairygui/utils/ToolSet.ts:152
取消变灰的时候没有重置标志, 所以在变灰过之后只要有变色操作(比如按下变暗)就会又变成灰色
我是用ts的,as的修改了一些bug怎么编译生成js lib,创建laya as工程加入代码编译不出来
可以对比一下laya自带的list的滑动体验和快速滑动效果,有考虑进行体验方面的改进吗?
laya中销毁界面再打开gpu memory会不断增涨,demo中背包用例也有这个问题
如题
看官方文档是说由滤镜实现.
实际我看代码updateGear(n)根本没运行.
不知道什么情况..求解惑
版本是最新layaair1.x
protected function handleXYChanged(): void {
var xv:Number = this._x;
var yv:Number = this._y+_yOffset;
if(this._pivotAsAnchor)
{
xv -= this._pivotXthis._width;
yv -= this._pivotYthis._height;
}
if(_pixelSnapping)
{
xv = Math.round(xv);
yv = Math.round(yv);
}
//应该加上判断
if(this._displayObject)
{
this._displayObject.pos(xv+this._pivotOffsetX, yv+this._pivotOffsetY);
}
}
由于Laya 2.2.x改了很多代码,现在fairygui就会报错,需要也更新一下。
package fairygui.utils {
public class UBBParser {
private var _text: String;
private var _readPos: Number = 0;
protected var _handlers: Object;
public var smallFontSize: Number = 12;
public var normalFontSize: Number = 14;
public var largeFontSize: Number = 16;
public var defaultImgWidth: Number = 0;
public var defaultImgHeight: Number = 0;
public static var inst: UBBParser = new UBBParser();
public function UBBParser() {
this._handlers = {};
this._handlers["url"] = this.onTag_URL;
this._handlers["img"] = this.onTag_IMG;
this._handlers["b"] = this.onTag_Simple;
this._handlers["i"] = this.onTag_Simple;
this._handlers["u"] = this.onTag_Simple;
this._handlers["sup"] = this.onTag_Simple;
this._handlers["sub"] = this.onTag_Simple;
this._handlers["color"] = this.onTag_COLOR;
this._handlers["font"] = this.onTag_FONT;
this._handlers["size"] = this.onTag_SIZE;
this._handlers["br"] = this.onTag_Simple;
}
protected function onTag_URL(tagName: String, end: Boolean, attr: String): String {
if (!end) {
if (attr != null)
return "<a href=\"" + attr + "\" target=\"_blank\">";
else {
var href: String = this.getTagText();
return "<a href=\"" + href + "\" target=\"_blank\">";
}
}
else
return "</a>";
}
protected function onTag_IMG(tagName: String, end: Boolean, attr: String): String {
if (!end) {
var src: String = this.getTagText(true);
if (!src)
return null;
if (this.defaultImgWidth)
return "<img src=\"" + src + "\" width=\"" + this.defaultImgWidth + "\" height=\"" + this.defaultImgHeight + "\"/>";
else
return "<img src=\"" + src + "\"/>";
}
else
return null;
}
protected function onTag_Simple(tagName: String, end: Boolean, attr: String): String {
return end ? ("</" + tagName + ">") : ("<" + tagName + ">");
}
protected function onTag_COLOR(tagName: String, end: Boolean, attr: String): String {
if (!end)
return "<font color=\"" + attr + "\">";
else
return "</font>";
}
protected function onTag_FONT(tagName: String, end: Boolean, attr: String): String {
if (!end)
return "<font face=\"" + attr + "\">";
else
return "</font>";
}
protected function onTag_SIZE(tagName: String, end: Boolean, attr: String): String {
if (!end) {
if (attr == "normal")
attr = "" + this.normalFontSize;
else if (attr == "small")
attr = "" + this.smallFontSize;
else if (attr == "large")
attr = "" + this.largeFontSize;
else if (attr.length && attr.charAt(0) == "+")
attr = "" + (this.smallFontSize + parseInt(attr.substr(1)));
else if (attr.length && attr.charAt(0) == "-")
attr = "" + (this.smallFontSize - parseInt(attr.substr(1)));
return "<font size=\"" + attr + "\">";
}
else
return "</font>";
}
protected function getTagText(remove: Boolean= false): String {
var pos: Number = this._text.indexOf("[", this._readPos);
if (pos == -1)
return null;
var ret: String = this._text.substring(this._readPos, pos);
if (remove)
this._readPos = pos;
return ret;
}
public function parse(text: String, remove:Boolean=false): String {
this._text = text;
var pos1: Number = 0, pos2: Number, pos3: Number = 0;
var end: Boolean;
var tag: String, attr: String;
var repl: String;
var func: Function;
var tempStr:String;
var tempPos:Number;
while ((pos2 = this._text.indexOf("[", pos1)) != -1) {
pos1 = pos2;
pos2 = this._text.indexOf("]", pos1);
if (pos2 == -1)
break;
end = this._text.charAt(pos1 + 1) == '/';
tempStr = this._text.substring(end ? pos1 + 2 : pos1 + 1, pos2);
tempPos = tempStr.lastIndexOf("[");
if( tempPos != -1)
{
pos1 += tempPos+1;
}
tag = this._text.substring(end ? pos1 + 2 : pos1 + 1, pos2);
pos2++;
this._readPos = pos2;
attr = null;
repl = null;
pos3 = tag.indexOf("=");
if (pos3 != -1) {
attr = tag.substring(pos3 + 1);
tag = tag.substring(0, pos3);
}
tag = tag.toLowerCase();
func = this._handlers[tag];
if (func != null) {
if(!remove) {
repl = func.call(this, tag, end, attr);
if (repl == null)
repl = "";
}
else
repl = "";
}
else {
pos1 = pos2;
continue;
}
this._text = this._text.substring(0, pos1) + repl + this._text.substring(this._readPos);
}
return this._text;
}
}
}
Laya版本:2.13.1
代码如下:
Laya.stage.addChild(fairygui.GRoot.inst.displayObject);
let tf = new fairygui.GBasicTextField();
tf.x = 400;
tf.y = 200;
tf.fontSize = 30;
tf.color = "#ffff00";
tf.text = "2222222222";
fairygui.GRoot.inst.addChild(tf);
let sp = new Laya.Sprite();
sp.graphics.drawRect(0, 0, 200, 300, "#ff0000");
Laya.stage.addChild(sp);
Laya.timer.once(1000, this, () => {
// tf.removeFromParent();
tf.visible = false;
});
首先保证是一个空项目
这个项目中只有一个fairygui的textfield实例,还有一个源生laya的Sprite,这个sprite是个红色矩形
两个都添加到舞台上,延时一秒移除textfield,或者将其visible设为false
大概再一秒过后这个红色矩形就会消失,从内存里看,sp还在,只是无法绘制出来
目录如果想让红色矩形存在,就需要new一个textfield放在那,并且要赋值文本(一个空字符串)
无法Fork2.13的分支,只能在这里提了,3.0的修复方法理论一样
新建 ChatAni.ts 类
export class ChatAni extends Laya.HTMLImageElement {
private _srcc: string;
private frames: Array<fairygui.Frame> = [];
constructor() {
super();
this.width = 72;
}
public set emoji(id: string) {
this._srcc = id;
this.frames = []
let movie = fgui.UIPackage.createObjectFromURL(id).asMovieClip;
let clip: fgui.MovieClip = movie.displayObject as fgui.MovieClip
for (let i: number = 0; i < clip.frames.length; i++) {
this.frames.push(clip.frames[i])
}
this.onloadHandler();
}
public get emoji() {
return this._srcc;
}
private onloadHandler() {
if (this.frames) {
Laya.timer.loop(120, this, this.loopHandler);
this.loopHandler();
} else {
Laya.timer.clear(this, this.loopHandler);
}
}
private _count: number = 0;
private loopHandler() {
let frames = this.frames;
let _count = this._count;
let frame = frames[_count];
this.width = frame.texture.width;
this.height = frame.texture.height;
this["_tex"] = frame.texture
this.repaint()
_count++;
if (_count > frames.length - 1) {
_count = 0;
}
this._count = _count;
}
public destroy() {
super.destroy();
Laya.timer.clear(this, this.loopHandler);
}
private isListener: boolean;
public renderSelfToGraphic(graphic: Laya.Graphics, gX: number, gY: number, recList: any[]): void {
let isListener = this.isListener;
if (!isListener) {
let _sp: Laya.Node = graphic["_sp"];
if (_sp) {
_sp.on(Laya.Event.DISPLAY, this, this.onDisplay);
_sp.on(Laya.Event.UNDISPLAY, this, this.onUnDisplay);
this.isListener = isListener = true;
}
}
super.renderSelfToGraphic(graphic, gX, gY, recList);
}
private onDisplay(): void {
this.onloadHandler();
}
private onUnDisplay(): void {
Laya.timer.clear(this, this.loopHandler);
}
}
在Main.ts的onConfigLoaded函数中添加
Laya.ClassUtils.regClass("femoji", ChatAni);
EmojiParser.ts 类中 onTag_Emoji 方法修改为
private onTag_Emoji(tagName: string, end: boolean, attr: string): string {
return `<femoji emoji="${fgui.UIPackage.getItemURL("Chat", tagName.substring(1).toLowerCase())}"></femoji>`;
}
创建一个图形,20%透明度填充,图形设置alpha=0,不能隐藏,动画改变透明度的时候填充透明度不生效
Master分支没找到min.js文件
动态创建不生效
demo如下
let text = new fgui.GTextField()
text.text = "nihahahhahaha"
text.setSize(200, 50)
text.setXY(300, 500)
text.sortingOrder = 1000000;
fgui.GRoot.inst.addChild(text)
文本自动缩放不起作用.我是button下面的title设置自动缩放不起作用...
比如圆形的头像,头像图片使用加载器显示,有时还是会显示为方形,出现几率很大
求加变色支持,egret都支持了,laya也支持下吧
fairygui.js:6 Uncaught TypeError: Cannot read property 'dom' of undefined
at fairygui.js:6
at fairygui.js:18045
编辑器中设置好富文本的宽度,在Laya一直以一个默认的宽度显示。并且不是编辑器设置的宽度。宽度只能通过HTML方式设置。例如,
如題
在微信小游戏里面使用RichTextfield给text属性设置内容出现错误, 在网页中没有问题,例如:
直接初始化:
let aRichTextField = new GRichTextField();
aRichTextField.setSize(100,100);
aRichTextField.text = "Hello World";
在微信的错误是:
gameThirdScriptError VM675:1
undfined
undefind
原因是GGraph的updateGraph方法调用drawPath方法其中一个brush参数设置错误导致的(当透明度为0时,fillColor = null;)
gr.drawPath(0, 0, paths, { fillStyle: fillColor }, this._lineSize > 0 ? { strokeStyle: lineColor, lineWidth: this._lineSize } : null);
drawPath填充色为透明时,brush参数为null即可;
gr.drawPath(0, 0, paths, fillColor ? { fillStyle: fillColor } : null, this._lineSize > 0 ? { strokeStyle: lineColor, lineWidth: this._lineSize } : null);
I have a FairyGUI project that uses a font (Changa One). I have it in both .ttf and .woff formats.
When I publish to Laya, the font isn't published with it and so the layabox project doesn't contain the font and fallsback to system default on other devices.
I tried dynamically importing the font in Laya, but it did not work :/
async function loadFont(name, url) {
return new Promise((resolve, reject) => {
var font = new (self as any).FontFace(name, `url(${url})`);
font.load().then(function(loaded_face) {
(document as any).fonts.ready.fonts.add(loaded_face);
document.body.style.fontFamily = `"${name}, Arial`;
console.log(`Font ${name} has been loaded`);
resolve()
}).catch(function(error) {
console.error(error);
reject();
});
});
}
loadFont("Changa One", "fonts/Changa-Bold.woff").then(()=> {
new Main();
});
Any idea of how to make this work? I'm kinda lost and all the (accurate and detailed) documentation for laya is in chinese, and I can't make an account on the laya forum because wechat won't let me.
laya虚拟列表赋值数据执行2次itemRenderer函数
遇到和论坛的同样问题,研究发现Laya2.0引擎内部升级导致的
Laya 2.0以上对Timer中的callLater的逻辑进行了解耦合,而在Laya 1.7中,是将callater的时钟处理放在Timer中,所以Timer.clear无法清理这个Laya.timer.callLater定时器
源代码【Glist中有两处的Laya.timer.clear是清理_refreshVirtualList不了的】
if (this._virtualListChanged != 0) Laya.timer.clear(this, this._refreshVirtualList); this._refreshVirtualList();
调整为:
if (this._virtualListChanged != 0) Laya.CallLater.I._laters.forEach((element, index) => { if (element.method.name == "_refreshVirtualList") { Laya.CallLater.I._laters.splice(index, 1); } }); this._refreshVirtualList();
已向引擎组提相关的issue
发平台后手机会出现文字 显示不全问题
'width' is defined as an accessor in class 'Sprite', but is overridden here in 'Image' as an instance property.ts(2610)
问题描述:
1.虚列表中的item是GLoader;
2.GLoader需要从网络中加载不同的图片;
3.虚列表的列表布局为竖向流动,溢出处理为水平滚动,且列表元素数量超过一屏;
4.在图片被加载之前(网络原因导致图片下载较慢),滚动虚列表多次,则会出现这个现象:存在一部分item,他们的GLoader的url不同,却显示相同的图片。
5.滑动虚列表后,原来图片显示异常的item恢复正常。
原因分析:
在网络图片被加载之前,多次滑动虚列表,会给同一个item,添加多个回调函数,而这些回调函数带来的texture,其url是不同的。所以出现上述问题。
解决办法:
修改farirygui源码,在GLoader.onExternalLoadSuccess(texture)的开始处,判断GLoader的url与传入的texture的url是否相同,如果不同,则直接跳出该方法。
可以使用更优雅的解决办法,在执行GLoader.loadExternal()时,先清除旧的回调函数,然后再添加新的回调。但经过跟踪调试,未在对应的laya库中,找到清除旧回调函数的有效方法。
求大神将文字描边可改为Laya最新版自带描边方式吧, 当前描边方式当描边粗细增大后问题就完全暴露出来了
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.