Coder Social home page Coder Social logo

fairygui-layabox's People

Contributors

asfisher avatar bingo2013 avatar geequlim avatar githubxplabs avatar lesismal avatar porky-prince avatar verketh avatar xiaoguzhu avatar xiongshihai123 avatar xlsfs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fairygui-layabox's Issues

按钮变灰问题

source/src/fairygui/utils/ToolSet.ts:152
取消变灰的时候没有重置标志, 所以在变灰过之后只要有变色操作(比如按下变暗)就会又变成灰色

[fix]laya2.0+虚拟列表赋值数据执行2次itemRenderer函数

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

在微信小游戏里面使用RichTextfield出现错误

在微信小游戏里面使用RichTextfield给text属性设置内容出现错误, 在网页中没有问题,例如:
直接初始化:
let aRichTextField = new GRichTextField();
aRichTextField.setSize(100,100);
aRichTextField.text = "Hello World";
在微信的错误是:
gameThirdScriptError VM675:1
undfined
undefind

动态创建文本不起作用

动态创建不生效
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)

一个关于旧版本测试的问题

倘若现在需要同步兼容laya的最新版本,但作为一个公共库,对于master分支当然也需要兼容2.2以上最新版本以下的旧版本,目前基于canvas的黑盒测试并没有一个成熟的方案,我想请问一下,你是如何做旧版本的兼容测试的?或许可以这样,一个分支对应laya的一个版本,当前分支只要兼容当前laya的版本即可。

移除文本时,laya的sprite的graphics将不会显示

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放在那,并且要赋值文本(一个空字符串)
QQ录屏20230312215915 00_00_02--00_00_05

QQ.20230312215915.mp4

全屏自适应位置存在错误

如图在FairyGUI 编辑器中有左上和右下两张图标,分别按左上角和右下角设置关联
image

在Layaair中创建的界面按照文档中设置尺寸为舞台尺寸, 纵坐标没有对齐

image

控制台通过 fairygui.GRoot.inst.displayObject.getChildAt(0).y 取到显示对象根节点的纵坐标是 -145, 将该值设为 0 后布局正常。

layabox2.0 类库有问题

fairygui.js:6 Uncaught TypeError: Cannot read property 'dom' of undefined
at fairygui.js:6
at fairygui.js:18045

Laya 2.2.x兼容问题

由于Laya 2.2.x改了很多代码,现在fairygui就会报错,需要也更新一下。

富文本宽度在laya中无效

编辑器中设置好富文本的宽度,在Laya一直以一个默认的宽度显示。并且不是编辑器设置的宽度。宽度只能通过HTML方式设置。例如,

xxx

内存泄漏

laya中销毁界面再打开gpu memory会不断增涨,demo中背包用例也有这个问题

fix=>GGraph组件填充颜色的透明度为0时,渲染成黑色图形

原因是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);

修复Laya下图文混排不支持动画表情的问题

无法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>`;
    }

增加UBBParser 换行及多重功能

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;
	}

}

}

How do I import a font in Layabox from FairyGUI

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最新版自带描边方式吧, 当前描边方式当描边粗细增大后问题就完全暴露出来了

as的工程怎么编译

我是用ts的,as的修改了一些bug怎么编译生成js lib,创建laya as工程加入代码编译不出来

Fairy GUI responsive in Layabox

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

image

虚列表显示图片异常

问题描述:
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库中,找到清除旧回调函数的有效方法。

GObject有bug

bug0001

版本是最新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._pivotY
this._height;
}
if(_pixelSnapping)
{
xv = Math.round(xv);
yv = Math.round(yv);
}

                //应该加上判断
		if(this._displayObject)
		{
			this._displayObject.pos(xv+this._pivotOffsetX, yv+this._pivotOffsetY);
		}
		
	}

子对象尺寸获取问题

image
component.constructorResource 获取的子对象的尺寸数据为子对象packageitem 的原始尺寸。实际拉伸过的尺寸我是在哪一步上赋值的?
image
image
image
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.