Skip to content

F
fyge_for_tb
Commit ee50a4cd authored by wangjianfeng.yz's avatar wangjianfeng.yz
Browse files
Options

2.0.53

parent 7508d1cc
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 210 additions and 59 deletions
build/FYGE.d.ts
View file @ ee50a4cd
declare namespace FYGE{export const VERSION = "2.0.52";
declare namespace FYGE{export const VERSION = "2.0.53";
export function cos(angle: number): number;
......@@ -1498,7 +1498,7 @@ export class BaseTexture extends EventDispatcher {
scaleMode: SCALE_MODES;
/**
* 加载完成会设置为true
* 加载失败或没有贴图数据则为false，
* 加载失败或没有贴图数据则为false，或者宽高为0等都为false
* 通常用于标记基础纹理是否可用
*/
hasLoaded: boolean;
......@@ -1565,9 +1565,9 @@ export class BaseTexture extends EventDispatcher {
*/
update(): void;
/**
*
* 原先的_sourceChange改成了_sourceLoaded，且变成私有
*/
_sourceChange(source: any): void;
private _sourceLoaded;
/**
* 销毁 base texture
* 基本不会销毁纹理
......
build/fyge.esm.js
View file @ ee50a4cd
This diff is collapsed.
build/fyge.esm.js.map
View file @ ee50a4cd
This diff is collapsed.
build/fyge.min.js
View file @ ee50a4cd
This diff is collapsed.
build/fyge.min.js.map
View file @ ee50a4cd
This diff is collapsed.
build/types.d.ts
View file @ ee50a4cd
export const VERSION = "2.0.52";
export const VERSION = "2.0.53";
export function cos(angle: number): number;
......@@ -1498,7 +1498,7 @@ export class BaseTexture extends EventDispatcher {
scaleMode: SCALE_MODES;
/**
* 加载完成会设置为true
* 加载失败或没有贴图数据则为false，
* 加载失败或没有贴图数据则为false，或者宽高为0等都为false
* 通常用于标记基础纹理是否可用
*/
hasLoaded: boolean;
......@@ -1565,9 +1565,9 @@ export class BaseTexture extends EventDispatcher {
*/
update(): void;
/**
*
* 原先的_sourceChange改成了_sourceLoaded，且变成私有
*/
_sourceChange(source: any): void;
private _sourceLoaded;
/**
* 销毁 base texture
* 基本不会销毁纹理
......
examples/2d.html
View file @ ee50a4cd
......@@ -201,7 +201,9 @@
//svga动画
SvgaParser.loadSvga("./res/小贱成年常态.svga", (v) => {
stage.addChild(new FYGE.SvgaAni(v)).y -= 600
var s = stage.addChild(new FYGE.SvgaAni(v))
s.x += 200;
s.y -= 600;
})
//lottie动画（文件全）
FYGE.GlobalLoader.loadJson((s, json) => {
......@@ -249,11 +251,11 @@
//测试下shape的椭圆
var s = stage.addChild(new FYGE.Shape())
s.beginFill(0xffff00)
s.drawEllipse(100, 180, 40, 30,0, Math.PI * 2)
s.drawEllipse(100, 180, 40, 30, 0, Math.PI * 2)
s.endFill()
var s = stage.addChild(new FYGE.Graphics())
s.beginFill(0x00ff00)
s.drawEllipse(100, 245, 40, 30,0, Math.PI * 2)
s.drawEllipse(100, 245, 40, 30, 0, Math.PI * 2)
s.endFill()
//测试svga蒙版
......@@ -261,12 +263,12 @@
stage.addChild(new FYGE.SvgaAni(v)).y -= 100
})
// var ss = stage.addChild(new FYGE.EditableText())
// ss.size = 40;
// ss.prompt = "啊实打实大苏打"
// ss.addEventListener("onInput",(e)=>{
// console.log(e)
// })
// var ss = stage.addChild(new FYGE.EditableText())
// ss.size = 40;
// ss.prompt = "啊实打实大苏打"
// ss.addEventListener("onInput",(e)=>{
// console.log(e)
// })
// console.log( FYGE.toDisplayDataURL(stage,null,{type: "jpeg"}))
}, this);
......
package.json
View file @ ee50a4cd
{
"name": "fyge",
"version": "2.0.52",
"version": "2.0.53",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"module": "./build/fyge.esm.js",
......
record.txt
View file @ ee50a4cd
......@@ -502,9 +502,19 @@
loadSpine抽象出parseSpineData方法
Spine的createMesh方法去掉了判断canvasPadding，直接赋值
2.0.53 Container的update方法里不再判断自己的visible
Sprite的_onTextureUpdate内新增逻辑this._boundsID++;
Sprite的texture的set方法较大改动，原纹理移除update监听的判断，当前纹理始终监听，纹理赋值null时updateLocalBoundsSelf改成_onTextureUpdate（区别在注释里）
Shape的updateShape方法里注释visible判断，注释_boundsID++，注释所有_localBoundsSelf处理，注释_onTextureUpdate，后三个s.texture.update()里都会处理
TextField的updateText方法里注释_boundsID++，注释_localBoundsSelf处理，注释_onTextureUpdate，理由同上
BaseTexture的_sourceChange方法改成了_sourceLoaded,且私有，相关地方替换修改，且注释两个this.dispatchEvent("loaded")（_sourceLoaded内会执行）
Texture文件里的removeAllHandlers函数里新增removeEventListener置空
Sprite添加像素检测还需从长计议，涉及图集的trim和rotate，还有数据格式的图片不用绘制的方式
使用多纹理通道时需要着色器做if判断，所以性能会变差，但是使用单通道在有多纹理时需要断批一样影响性能，具体权衡暂时不改
......
src/2d/const.ts
View file @ ee50a4cd
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.52";
export const VERSION = "2.0.53";
/**
......
src/2d/display/Container.ts
View file @ ee50a4cd
......@@ -335,7 +335,7 @@ export default class Container extends DisplayObject {
//children遍历计算
for (let i = 0, j = this.children.length; i < j; ++i) {
const child = this.children[i];
if (child.visible) {//为了优化性能，但是会出现，不显示的对象，获取到的位置等信息是错误的
if (child.visible) {//为了优化性能，但是会出现，不显示的对象，获取到的位置等信息是错误的，但是可以自行调用updateTransform
child.updateTransform();
}
}
......@@ -550,7 +550,7 @@ export default class Container extends DisplayObject {
* 节点每帧更新方法，注意别覆盖，否则每帧监听将失效，子类可继承修改
*/
update() {
if (!this.visible) return;
// if (!this.visible) return;//从root往下时block（比如下面子级的visible判断），自身不进行判断
//更新自己的
super.update()
//更新儿子们的
......
src/2d/display/Sprite.ts
View file @ ee50a4cd
......@@ -161,6 +161,9 @@ export default class Sprite extends Container {
//修改_localBoundsSelf
this.updateLocalBoundsSelf();
//包围盒id
this._boundsID++;
}
/**
......@@ -476,9 +479,15 @@ export default class Sprite extends Container {
return;
}
//如果存在原贴图，且还没加载好，移除监听_onTextureUpdate；
if (this._texture != Texture.EMPTY &&
this._texture != null &&
!this._texture.baseTexture.hasLoaded) this._texture.removeEventListener('update', this._onTextureUpdate, this);
// if (this._texture != Texture.EMPTY &&
// this._texture != null &&
// !this._texture.baseTexture.hasLoaded) this._texture.removeEventListener('update', this._onTextureUpdate, this);
//原来的纹理，其实直接全都要移除，
if (this._texture) {
this._texture.removeEventListener('update', this._onTextureUpdate, this);
}
//赋值
this._texture = value || Texture.EMPTY;
......@@ -490,12 +499,16 @@ export default class Sprite extends Container {
if (value.baseTexture.hasLoaded) {
this._onTextureUpdate();
}
else {
value.once('update', this._onTextureUpdate, this);//只会监听一次
}
// else {
// value.once('update', this._onTextureUpdate, this);//只会监听一次
// }
//都监听下，其实没加载的纹理图片纹理确实只需要监听一次，这里先不管了，后续有性能问题再考虑
value.addEventListener('update', this._onTextureUpdate, this);
} else {
//624修改。如果置空纹理，_localBoundsSelf置空
this.updateLocalBoundsSelf();
// this.updateLocalBoundsSelf();
//20211201修改，这样修改如果设置过width和height的，内部会通过设置scale保留，从而依旧能点击到
this._onTextureUpdate()
}
}
/**
......
src/2d/graphics/Shape.ts
View file @ ee50a4cd
......@@ -533,10 +533,10 @@ export class Shape extends Sprite {
*/
public updateShape(): void {
let s: Shape = this;
if (!s.visible) return;
// if (!s.visible) return;//这里不阻止
if (!s.dirty) return;
s.dirty = false;
s._boundsID++;//为了Container里calculateBounds的判断;
// s._boundsID++;//为了Container里calculateBounds的判断;//20211201注释下面s.texture.update()里会执行
//更新缓存
let cLen: number = s._command.length;
let leftX: number;
......@@ -651,10 +651,10 @@ export class Shape extends Sprite {
let h = buttonRightY - leftY;
s.offsetX = leftX;
s.offsetY = leftY;
s._localBoundsSelf.x = leftX + 10;
s._localBoundsSelf.y = leftY + 10;
s._localBoundsSelf.width = w - 20;
s._localBoundsSelf.height = h - 20;
// s._localBoundsSelf.x = leftX + 10;//下面anchorTexture的设置会更新（且还是原来的错误的纹理尺寸），s.texture.update()里也会更新了
// s._localBoundsSelf.y = leftY + 10;
// s._localBoundsSelf.width = w - 20;
// s._localBoundsSelf.height = h - 20;
let _canvas: any = s.canvas;
let ctx = s.context;
_canvas.width = w;
......@@ -669,13 +669,13 @@ export class Shape extends Sprite {
s.canvas.height = 0;
s.offsetX = 0;
s.offsetY = 0;
s._localBoundsSelf.clear();
// s._localBoundsSelf.clear();//下面anchorTexture的设置会更新（且还是原来的错误的纹理尺寸），s.texture.update()里也会更新了
s.anchorTexture.set(0, 0) //= { x: 0, y: 0 };
}
//更新贴图
s.texture.update();
//这个先不管,上面的_localBoundsSelf等都已计算
s._onTextureUpdate();//更新回去anchorTexture修改时更新了用的时原先的canvas尺寸
// s._onTextureUpdate();//更新回去anchorTexture修改时更新了用的时原先的canvas尺寸，20211201注释（texture.update()内会执行（监听一直在））
}
/**
......@@ -802,7 +802,7 @@ export class Shape extends Sprite {
// this.updateShape();
// super._calculateBounds();
// }
//为了updateShape里的_boundId++不会影响calculateBounds里的判断，用不带_的继承，TODO待测试
//因为updateShape里的_boundId++不会影响calculateBounds里的判断，用不带_的继承，TODO待测试
calculateBounds() {
this.updateShape();
//在舞台上，且渲染方式是webgl，且用过遮罩的，注意，临时解决webgl，shape的遮罩移动时不生效，待考虑更优雅的方式TODO
......
src/2d/text/TextField.ts
View file @ ee50a4cd
......@@ -501,7 +501,7 @@ export class TextField extends Sprite {
return;
}
s.dirty = false;
s._boundsID++;//为了Container里calculateBounds的判断;
// s._boundsID++;//为了Container里calculateBounds的判断;//下面s.texture.update()内会执行监听内容_onTextureUpdate
//强转字符
s._text += "";
//如果没有文本
......@@ -513,7 +513,7 @@ export class TextField extends Sprite {
// s.texture.baseTexture.source.width = 0;
// s.texture.baseTexture.source.height = 0;
// }
s._localBoundsSelf.clear();
// s._localBoundsSelf.clear();//下面s.texture.update()内会执行监听内容_onTextureUpdate
s.anchorTexture = { x: 0, y: 0 };
s.texture.update()
return
......@@ -643,7 +643,7 @@ export class TextField extends Sprite {
this.anchorTexture = { x: (padding + 0.5) / canWidth, y: padding / canHeight }
// if (osType == "ios") {
s.texture.update();
s._onTextureUpdate();
// s._onTextureUpdate();//上面s.texture.update()会执行，监听一直在
// document.body.appendChild(s.canvas)
// } else {
// var imgData = ctx.getImageData(0, 0, canWidth, canHeight)
......
src/2d/texture/BaseTexture.ts
View file @ ee50a4cd
......@@ -35,7 +35,7 @@ export default class BaseTexture extends EventDispatcher {
scaleMode: SCALE_MODES;
/**
* 加载完成会设置为true
* 加载失败或没有贴图数据则为false，
* 加载失败或没有贴图数据则为false，或者宽高为0等都为false
* 通常用于标记基础纹理是否可用
*/
hasLoaded: boolean;
......@@ -118,22 +118,22 @@ export default class BaseTexture extends EventDispatcher {
if (source) {
//是imageData
if (source._data) {
this._sourceChange(source);
this._sourceLoaded(source);
}
//是canvas
else if (source.getContext) {
this._sourceChange(source);
this._sourceLoaded(source);
}
else {
if (source.complete) {
this._sourceChange(source);
this.dispatchEvent("loaded");
this._sourceLoaded(source);
// this.dispatchEvent("loaded");//上面的方法会执行loaded
} else {
var self = this;
//会覆盖onload方法
source.onload = function () {
self._sourceChange(source);
self.dispatchEvent("loaded");
self._sourceLoaded(source);
// self.dispatchEvent("loaded");//上面的方法会执行loaded
};
//失败的
source.onerror = function () {
......@@ -162,9 +162,9 @@ export default class BaseTexture extends EventDispatcher {
}
/**
*
* 原先的_sourceChange改成了_sourceLoaded，且变成私有
*/
_sourceChange(source) {
private _sourceLoaded(source) {
//赋值
this.source = source;
//路径，暂时没用，需要时再处理，先找src 再path（基本没有）
......@@ -213,7 +213,7 @@ export default class BaseTexture extends EventDispatcher {
let baseTexture = new BaseTexture();
GlobalLoader.loadImage((s, res) => {
if (s) {
baseTexture._sourceChange(res);
baseTexture._sourceLoaded(res);
//添加进缓存
if (url.indexOf('data:') !== 0) BaseTexture.addToCache(baseTexture, url);
} else {
......
src/2d/texture/Texture.ts
View file @ ee50a4cd
......@@ -160,8 +160,8 @@ export default class Texture extends EventDispatcher {
this.orig = orig || frame;// new Rectangle(0, 0, 1, 1);
this._rotate = Number(rotate || 0);
if (baseTexture.hasLoaded || (baseTexture.source && baseTexture.source.getContext)) {//对于canvas形式的判断hasLoaded有问题，导致不能监听update，到时改
//对于canvas形式的判断hasLoaded有问题，导致不能监听update，hasLoaded还用于判断纹理是否可用（canvas宽高为0不可用），所以这里判断吧
if (baseTexture.hasLoaded || (baseTexture.source && baseTexture.source.getContext)) {
if (this.noFrame) {
frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height);
// if there is no frame we should monitor for any base texture changes..
......@@ -488,6 +488,7 @@ function removeAllHandlers(tex) {
tex.addEventListener = function _emptyOn() { /* empty */ };
tex.once = function _emptyOnce() { /* empty */ };
tex.dispatchEvent = function _emptyEmit() { /* empty */ };
tex.removeEventListener = function _emptyOff() { /* empty */ };
}
/**
......
test/testFilter.html 0 → 100644
View file @ ee50a4cd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="true" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
<!-- 小程序分享得用这个 -->
<!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> -->
<!-- 易盾js -->
<!-- <script type="text/javascript" src="//cstaticdun.126.net/load.min.js"></script> -->
<!-- <script src="libs/zepto.min.js"></script> -->
<!-- <script src="libs/p2.js"></script> -->
<script src="../build/fyge.min.js"></script>
<style>
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-color: #eeeeee;
}
</style>
</head>
<body>
<div id="cusEngine" style="line-height:0;font-size:0">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<!-- 帧率检测 -->
<script src="//yun.duiba.com.cn/db_games/libs0924/stats.js"></script>
</body>
<script>
// window.devicePixelRatio=2
window.addEventListener("load", async function () {
//获取canvas
var canvas = document.getElementById("canvas");
// canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
// canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
canvas.width = 750;
canvas.height = 1624;
//建舞台
var stage = new FYGE.Stage(
canvas,
750,//设计宽度，按设计搞给的就行
1624,//设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL
);
//鼠标事件
var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener('touchmove', mouseEvent, false);
canvas.addEventListener('touchend', mouseEvent, false);
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
//添加个背景
var a = stage.addChild(new FYGE.Graphics())
.beginFill(0x000000, 0.7)
.drawRect(0, 0, 750, 1624)
.endFill()
var sp = stage.addChild(FYGE.Sprite.fromUrl("https://img.alicdn.com/imgextra/i4/2275046294/O1CN01avEmL01wMhS5Wxd63_!!2275046294-2-miniprogram.png"))
sp.position.set(300, 700)
sp.width=sp.height=200;
sp.addEventListener("onMouseClick",()=>{console.log(111)},this)
var ff = new FYGE.ColorMatrixFilter();
ff.contrast(2);
sp.filters = [
ff
]
setTimeout(()=>{
sp.texture=null;
console.log(sp.scaleX)
},3000)
// sp.texture
// new FYGE.Texture()
// sp.texture=FYGE.Texture.fromUrl("https://img.alicdn.com/imgextra/i4/2275046294/O1CN01avEmL01wMhS5Wxd63_!!2275046294-2-miniprogram.png")
// const src = "//yun.duiba.com.cn/aurora/assets/abe23575ef1f27286df1a6364b8d3968d5f2fc78.png";
// const sprite = new FYGE.Sprite(FYGE.Texture.fromUrl(src));
// stage.addChild(sprite);
// sprite.anchorTexture.set(0.5, 0.5);
// sprite.position.set(375, 375);
// const colorMatrix = [
// 0.3, 0.3, 0.3, 0, 0,
// 0.3, 0.3, 0.3, 0, 0,
// 0.3, 0.3, 0.3, 0, 0,
// 0, 0, 0, 1, 0
// ];
// const colorFilter = new FYGE.ColorMatrixFilter(colorMatrix);
// sprite.filters = [colorFilter];
}, this)
//循环
loop();
function loop() {
if (!window.paused) {
stage.flush();
}
FYGE.Tween.flush()
requestAnimationFrame(loop);
}
})
</script>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment