Skip to content

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

2.0.56

parent fc4461c8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 7892 additions and 115 deletions
build/FYGE.d.ts
View file @ abc1ac69
declare namespace FYGE{export const VERSION = "2.0.55";
declare namespace FYGE{export const VERSION = "2.0.56";
export function cos(angle: number): number;
......@@ -5517,21 +5517,6 @@ export class Stage extends Container {
* @default null
*/
renderObj: SystemRenderer;
/**
* 直接获取stage的引用，避免总是从Event.ADD_TO_STAGE 事件中去获取stage引用
* @property getStage
* @param {string} stageName
* @return {any}
* @since 2.0.0
*/
static getStage(stageName?: string): Stage;
/**
* @property _stageList
* @static
* @type {Object}
* @private
*/
private static _stageList;
/**
* 舞台在设备里截取后的可见区域,有些时候知道可见区域是非常重要的,因为这样你就可以根据舞台的可见区域做自适应了。
* @property viewRect
......@@ -5617,6 +5602,15 @@ export class Stage extends Container {
private canvasOffsetTb;
get stageWidth(): number;
get stageHeight(): number;
/**
* 是否自动转向，一般对于需要手机横屏自动更新内容朝向的设置为true，自动对齐设计尺寸和屏幕显示尺寸
* 默认false
* @property autoSteering
* @public
* @type {boolean}
* @default false
*/
autoSteering: boolean;
/**
* 缩放模式
*/
......@@ -6903,6 +6897,13 @@ export class TextField extends Sprite {
* @since 1.0.0
*/
private _getMeasuredWidth;
/**
* 根据宽度截取文本，
* 注意调用前需要_prepContext，保证文本属性，否则测量文本宽度有误
* @param str 需要截取的文本
* @param textWidth 截取宽度，不传默认使用本身设置的文本宽度，如未设置不处理
*/
private _cutLines;
private realLines;
private callback;
/**
......
build/fyge.esm.js
View file @ abc1ac69
This diff is collapsed.
build/fyge.esm.js.map
View file @ abc1ac69
This diff is collapsed.
build/fyge.min.js
View file @ abc1ac69
This diff is collapsed.
build/fyge.min.js.map
View file @ abc1ac69
This diff is collapsed.
build/types.d.ts
View file @ abc1ac69
export const VERSION = "2.0.55";
export const VERSION = "2.0.56";
export function cos(angle: number): number;
......@@ -5517,21 +5517,6 @@ export class Stage extends Container {
* @default null
*/
renderObj: SystemRenderer;
/**
* 直接获取stage的引用，避免总是从Event.ADD_TO_STAGE 事件中去获取stage引用
* @property getStage
* @param {string} stageName
* @return {any}
* @since 2.0.0
*/
static getStage(stageName?: string): Stage;
/**
* @property _stageList
* @static
* @type {Object}
* @private
*/
private static _stageList;
/**
* 舞台在设备里截取后的可见区域,有些时候知道可见区域是非常重要的,因为这样你就可以根据舞台的可见区域做自适应了。
* @property viewRect
......@@ -5617,6 +5602,15 @@ export class Stage extends Container {
private canvasOffsetTb;
get stageWidth(): number;
get stageHeight(): number;
/**
* 是否自动转向，一般对于需要手机横屏自动更新内容朝向的设置为true，自动对齐设计尺寸和屏幕显示尺寸
* 默认false
* @property autoSteering
* @public
* @type {boolean}
* @default false
*/
autoSteering: boolean;
/**
* 缩放模式
*/
......@@ -6903,6 +6897,13 @@ export class TextField extends Sprite {
* @since 1.0.0
*/
private _getMeasuredWidth;
/**
* 根据宽度截取文本，
* 注意调用前需要_prepContext，保证文本属性，否则测量文本宽度有误
* @param str 需要截取的文本
* @param textWidth 截取宽度，不传默认使用本身设置的文本宽度，如未设置不处理
*/
private _cutLines;
private realLines;
private callback;
/**
......
examples/2d.html
View file @ abc1ac69
......@@ -74,6 +74,7 @@
false,
sysInfo && sysInfo.pixelRatio || window.devicePixelRatio || 1//分辨率
);
window.stage = stage;
//监听窗口缩放,按需,一般移动端的不需要
window.addEventListener('resize', () => { stage.resize() });
//鼠标事件
......
package.json
View file @ abc1ac69
{
"name": "fyge",
"version": "2.0.55",
"version": "2.0.56",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"module": "./build/fyge.esm.js",
......
record.txt
View file @ abc1ac69
......@@ -541,12 +541,21 @@
TextField的canvas、context、dirty都变私有
TextField去掉offsetX和offsetY，相关使用删除，待测试，暂时感觉没啥用，和Shape一样，原先为了CanvasSpriteRenderer里，现在这俩都用anchorTexture了
2.0.56 Container文件里新增judgeMaskEnable函数，用于renderWebGL和renderCanvas里判断遮罩数据是否可用
Stage删除getStage静态方法，以及相关_stageList静态属性及构造内的赋值
Stage新增属性autoSteering，用于自动旋转舞台内容，相应方法_setAlign改动较大
BatchRenderer的flush方法里首次赋值currentGroup.blend = blendMode，打开注释
TextField的_prepContext方法新增执行ctx.lineJoin = "round";为了描边样式
TextField新增私有方法_cutLines，用于测量连续字符串宽度，并截取，取代原先单字符测量方式
TextField的updateText方法内多行文本内，对于未设置文本宽度textWidth，不执行下面的测量，用else连接，realLines单独处理
ScrollPage的scrollTo方法内缓动前增加执行移除先前缓动
需要一个矢量单独的2d绘制着色器了（顶点，颜色，纹理，），还是直接用统一的，到底哪种性能好，
Graphics，解决几何纹理的问题（图集，重复，变换，canvas绘制等）
texture的rotate属性设置修改纹理旋转会有大问题。尤其是45度角（groupD8里系数偏大）等，自身包围盒会有问题，且webgl模式下顶点计算有问题导致显示不全和纹理拉伸
在未解决前注释rotate的set方法
......
src/2d/const.ts
View file @ abc1ac69
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.55";
export const VERSION = "2.0.56";
/**
......
src/2d/display/Container.ts
View file @ abc1ac69
......@@ -429,16 +429,17 @@ export default class Container extends DisplayObject {
}
//如果有遮罩，但是遮罩无数据，直接return
if (this.mask) {
//Shape遮罩，或者Sprite遮罩
// if (this.mask.texture && this.mask.texture.valid) return//不能这么判断，因为此时valid肯定false
if (this.mask.texture) {
this.mask.updateShape && this.mask.updateShape();//更新一下
if (!this.mask.texture.valid) return;
}
//Graphics遮罩，其实这个判断也包括了Sprite的纹理为空的情况
else if (!this.mask.graphicsData || !this.mask.graphicsData.length) {
return;
}
// //Shape遮罩，或者Sprite遮罩
// if (this.mask.texture) {
// this.mask.updateShape && this.mask.updateShape();//更新一下
// if (!this.mask.texture.valid) return;
// }
// //Graphics遮罩，其实这个判断也包括了Sprite的纹理为空的情况
// else if (!this.mask.graphicsData || !this.mask.graphicsData.length) {
// return;
// }
if (!judgeMaskEnable(this.mask)) return;
}
//是否有遮罩。到时如果有滤镜，
if (this.mask || (this.filters && this.filters.length)) {
......@@ -524,6 +525,8 @@ export default class Container extends DisplayObject {
}
if (this.mask) {
//遮罩不可用无数据，return
if (!judgeMaskEnable(this.mask)) return;
renderer.maskManager.pushMask(this.mask);
}
......@@ -674,3 +677,17 @@ export default class Container extends DisplayObject {
}
Container.prototype.containerUpdateTransform = Container.prototype.updateTransform;
function judgeMaskEnable(mask): boolean {
if (!mask) return false;
//Shape遮罩，或者Sprite遮罩
if (mask.texture) {
mask.updateShape && mask.updateShape();//更新一下
if (!mask.texture.valid) return false;
}
//Graphics遮罩，其实这个判断也包括了Sprite的纹理为空的情况
else if (!mask.graphicsData || !mask.graphicsData.length) {
return false;
}
return true;
}
\ No newline at end of file
src/2d/display/Stage.ts
View file @ abc1ac69
......@@ -27,26 +27,6 @@ export class Stage extends Container {
*/
public renderObj: SystemRenderer = null;
/**
* 直接获取stage的引用，避免总是从Event.ADD_TO_STAGE 事件中去获取stage引用
* @property getStage
* @param {string} stageName
* @return {any}
* @since 2.0.0
*/
public static getStage(stageName: string = "cusEngine"): Stage {
return Stage._stageList[stageName];
}
/**
* @property _stageList
* @static
* @type {Object}
* @private
*/
private static _stageList: any = {};
/**
* 舞台在设备里截取后的可见区域,有些时候知道可见区域是非常重要的,因为这样你就可以根据舞台的可见区域做自适应了。
* @property viewRect
......@@ -151,6 +131,15 @@ export class Stage extends Container {
get stageHeight() {
return this.viewRect.height;
}
/**
* 是否自动转向，一般对于需要手机横屏自动更新内容朝向的设置为true，自动对齐设计尺寸和屏幕显示尺寸
* 默认false
* @property autoSteering
* @public
* @type {boolean}
* @default false
*/
public autoSteering: boolean = false;
/**
* 缩放模式
*/
......@@ -189,7 +178,6 @@ export class Stage extends Container {
this.canvas = canvas;
let s: Stage = this;
this._instanceType = "Stage";
Stage._stageList["canvas"] = s;
s.stage = this;
s.name = "stageInstance_" + s.instanceId;
s.desWidth = desWidth;
......@@ -291,23 +279,56 @@ export class Stage extends Container {
private _setAlign() {
let s = this;
let canvas = s.canvas;
//实际尺寸和设计内容尺寸
let divW = canvas.width,
divH = canvas.height,
desW = s.desWidth,
desH = s.desHeight;
//舞台设置居中处理锚点和位置偏移
if (s._stageCenter) {
s.anchorX = s.desWidth >> 1;
s.anchorY = s.desHeight >> 1;
s.x = (canvas.width - s.desWidth) >> 1;
s.y = (canvas.height - s.desHeight) >> 1;
s.anchorX = desW >> 1;
s.anchorY = desH >> 1;
s.x = (divW - desW) >> 1;
s.y = (divH - desH) >> 1;
}
//设备是否为竖屏
let isDivH = divH >= divW;
//内容是否为竖屏内容
let isDesH = desH >= desW;
//处理下,显示尺寸宽高颠倒下
if (s.autoSteering && isDesH != isDivH) {
let d = divH;
divH = divW;
divW = d;
}
//默认定宽
var scale = s._scaleMode == "fixedHeight" ? canvas.height / s.desHeight : canvas.width / s.desWidth;
var scale = s._scaleMode == "fixedHeight" ? divH / desH : divW / desW;
s.scaleX = scale;
s.scaleY = scale;
//未设置自动转向，或不需要转向
if (!s.autoSteering || isDesH == isDivH) {
s.rotation = 0;
//没设置过居中的位移置0
if (!s._stageCenter) s.x = s.y = 0
} else {
//TODO,待考虑按什么决定角度正负
if (desH > desW) {
s.rotation = -90;
//没设置过居中的
if (!s._stageCenter) s.y = divW
} else {
s.rotation = 90;
//没设置过居中的
if (!s._stageCenter) s.x = divH
}
}
//视窗计算
s.viewRect = s.viewRect || new Rectangle();
s.viewRect.x = (s.desWidth - canvas.width / scale) >> 1;
s.viewRect.y = (s.desHeight - canvas.height / scale) >> 1;
s.viewRect.width = s.desWidth - s.viewRect.x * 2;
s.viewRect.height = s.desHeight - s.viewRect.y * 2;
s.viewRect.x = (desW - divW / scale) >> 1;
s.viewRect.y = (desH - divH / scale) >> 1;
s.viewRect.width = desW - s.viewRect.x * 2;
s.viewRect.height = desH - s.viewRect.y * 2;
//额外逻辑,不设置舞台居中时,x,y为左上角,置0
if (!s._stageCenter) s.viewRect.x = s.viewRect.y = 0;
......@@ -464,7 +485,7 @@ export class Stage extends Container {
// points = [e.changedTouches[0]];
// points = [e.touches[0]];//不能用这个
let { x: offsetX, y: offsetY } = s.canvasOffsetTb;
//@ts-ignore
//
if (getEnv() == "web") {
let doc = document.documentElement;
let box = s.canvas.getBoundingClientRect();
......
src/2d/renderers/plugins/BatchRenderer.ts
View file @ abc1ac69
......@@ -295,7 +295,7 @@ export class BatchRenderer extends ObjectRenderer {
currentGroup.textureCount = 0;
currentGroup.start = 0;
// currentGroup.blend = blendMode;
currentGroup.blend = blendMode;
TICK++;
......
src/2d/text/TextField.ts
View file @ abc1ac69
......@@ -427,6 +427,8 @@ export class TextField extends Sprite {
//暂时没开放
ctx.textBaseline = "middle"//"top";
ctx.fillStyle = getRGBA(s._fillColor, s._textAlpha)
//确保描边样式
ctx.lineJoin = "round";
}
/**
* 获取当前文本中单行文字的宽，注意是文字的不是文本框的宽
......@@ -485,6 +487,32 @@ export class TextField extends Sprite {
}
return width
}
/**
* 根据宽度截取文本，
* 注意调用前需要_prepContext，保证文本属性，否则测量文本宽度有误
* @param str 需要截取的文本
* @param textWidth 截取宽度，不传默认使用本身设置的文本宽度，如未设置不处理
*/
private _cutLines(str: string, textWidth: number = this._textWidth, isOnlyOne: boolean = false): string[] {
let s = this, lines: string[] = [];
let lineStr = str[0];
let strLen = str.length, wordW: number;
for (let j = 1; j < strLen; j++) {
//测量连续字符，而不是单个字符
wordW = s._getMeasuredWidth(lineStr + str[j])
if (wordW > textWidth) {
//加一个
lines.push(lineStr);
if (isOnlyOne) return lines;
//重新赋值
lineStr = str[j];
} else {
lineStr += str[j];
}
}
if (lineStr) lines.push(lineStr);
return lines
}
private realLines: any = []; private callback;
/**
* 更新文本，主要重画canvas，回调是很有问题的
......@@ -542,20 +570,22 @@ export class TextField extends Sprite {
textWidth = textWidth || lineW;
//如果设置过textWidth的。截取文本
if (lineW > textWidth) {
let w = s._getMeasuredWidth(str[0]);
let lineStr = str[0];
let wordW = 0;
let strLen = str.length;
for (let j = 1; j < strLen; j++) {
wordW = s._getMeasuredWidth(str[j])//ctx.measureText(str[j]).width;
w += wordW;
if (w > textWidth) {
realLines[0] = lineStr;
break;
} else {
lineStr += str[j];
}
}
// let w = s._getMeasuredWidth(str[0]);
// let lineStr = str[0];
// let wordW = 0;
// let strLen = str.length;
// for (let j = 1; j < strLen; j++) {
// wordW = s._getMeasuredWidth(str[j])//ctx.measureText(str[j]).width;
// w += wordW;
// if (w > textWidth) {
// realLines[0] = lineStr;
// break;
// } else {
// lineStr += str[j];
// }
// }
//用新的方法
realLines[0] = s._cutLines(str, textWidth, true)[0];
}
} else {
//textWidth取每行最大值，如果没设置过textWidth
......@@ -564,27 +594,34 @@ export class TextField extends Sprite {
let str = hardLines[i];
if (!str) continue;
textWidth = Math.max(s._getMeasuredWidth(str), textWidth);
//下面加else了，这里记录真实每行文本
realLines[realLines.length] = str;
}
}
for (let i = 0, l = hardLines.length; i < l; i++) {
let str = hardLines[i];
if (!str) continue;
let w = s._getMeasuredWidth(str[0]);
let lineStr = str[0];
let wordW = 0;
let strLen = str.length;
for (let j = 1; j < strLen; j++) {
wordW = s._getMeasuredWidth(str[j])//ctx.measureText(str[j]).width;
w += wordW;
if (w > textWidth) {
realLines[realLines.length] = lineStr;
lineStr = str[j];
w = wordW;
} else {
lineStr += str[j];
}
//设置过_textWidth的，需要检查每行文本宽度，该换行的换行
else {
for (let i = 0, l = hardLines.length; i < l; i++) {
let str = hardLines[i];
if (!str) continue;
// let w = s._getMeasuredWidth(str[0]);
// let lineStr = str[0];
// let wordW = 0;
// let strLen = str.length;
// for (let j = 1; j < strLen; j++) {
// wordW = s._getMeasuredWidth(str[j])//ctx.measureText(str[j]).width;
// w += wordW;
// if (w > textWidth) {
// realLines[realLines.length] = lineStr;
// lineStr = str[j];
// w = wordW;
// } else {
// lineStr += str[j];
// }
// }
// realLines[realLines.length] = lineStr;
//用新的方法
realLines.push(...s._cutLines(str, textWidth));
}
realLines[realLines.length] = lineStr;
}
}
let lineH = this.lineHeight;
......
src/2d/ui/ScrollPage.ts
View file @ abc1ac69
......@@ -399,6 +399,7 @@ export class ScrollPage extends Container {
s.autoScroll = true;
s.isStop = true;
s.isMouseDownState = 0;
Tween.removeTweens(s.view)
Tween.get(s.view)
.to({ [s.paramXY]: -dis }, time)
.call(() => {
......
test/res/STREET_FEMALE_T1_Dribble with ball.gltf 0 → 100644
View file @ abc1ac69
This diff is collapsed.
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