Commit 8ec760c5 authored by wangjianfeng.yz's avatar wangjianfeng.yz

2.0.62

parent db243daa
......@@ -17,4 +17,5 @@ record.txt
test
examples
docs
adapters
\ No newline at end of file
adapters
testThree
\ No newline at end of file
declare namespace FYGE{export const VERSION = "2.0.60";
declare namespace FYGE{export const VERSION = "2.0.62";
export function cos(angle: number): number;
......@@ -3922,13 +3922,24 @@ export class KawaseBlurFilter extends Filter {
set blur(value: number);
}
export interface IAdvancedBloomFilterOptions {
threshold?: number;
bloomScale?: number;
brightness?: number;
blur?: number;
quality?: number;
kernels?: number;
pixelSize?: number;
resolution?: number;
}
export class AdvancedBloomFilter extends Filter {
private _extractFilter;
private _blurFilter;
bloomScale: number;
brightness: number;
private _resolution;
constructor(options?: OptionsInt);
constructor(options?: IAdvancedBloomFilterOptions);
/**
* Override existing apply method in Filter
* @private
......@@ -3983,7 +3994,81 @@ export class AdvancedBloomFilter extends Filter {
set pixelSize(value: any);
}
export {};
export interface IAdjustmentFilterOptions {
gamma?: number;
saturation?: number;
contrast?: number;
brightness?: number;
red?: number;
green?: number;
blue?: number;
alpha?: number;
}
export class AdjustmentFilter extends Filter {
/**
* The amount of luminance
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
gamma: number;
/**
* The amount of saturation
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
saturation: number;
/**
* The amount of contrast
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
contrast: number;
/**
* The amount of brightness
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
brightness: number;
/**
* The amount of red channel
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
red: number;
/**
* The amount of green channel
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
green: number;
/**
* The amount of blue channel
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
blue: number;
/**
* The amount of alpha channel
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
alpha: number;
constructor(options?: IAdjustmentFilterOptions);
/**
* Override existing apply method in Filter
* @private
*/
apply(filterManager: any, input: any, output: any, clear: any): void;
}
export class MaskManager {
renderer: WebglRenderer;
......@@ -4938,11 +5023,6 @@ export const _default: {
triangulate(graphicsData: GraphicsData, graphicsGeometry: Graphics): void;
}
export function bezierCurveControlPoint(points: any): {
A: any[];
B: any[];
}
export const GRAPHICS_CURVES: {
adaptive: boolean;
maxLength: number;
......@@ -4951,8 +5031,6 @@ export const GRAPHICS_CURVES: {
segmentsCount: Function;
}
export function isPointsClockwise(points: ArrayLike<number>, closed?: boolean): boolean;
export class Graphics extends Container {
/**
* 混色模式
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
export const VERSION = "2.0.60";
export const VERSION = "2.0.62";
export function cos(angle: number): number;
......@@ -3922,13 +3922,24 @@ export class KawaseBlurFilter extends Filter {
set blur(value: number);
}
export interface IAdvancedBloomFilterOptions {
threshold?: number;
bloomScale?: number;
brightness?: number;
blur?: number;
quality?: number;
kernels?: number;
pixelSize?: number;
resolution?: number;
}
export class AdvancedBloomFilter extends Filter {
private _extractFilter;
private _blurFilter;
bloomScale: number;
brightness: number;
private _resolution;
constructor(options?: OptionsInt);
constructor(options?: IAdvancedBloomFilterOptions);
/**
* Override existing apply method in Filter
* @private
......@@ -3983,7 +3994,81 @@ export class AdvancedBloomFilter extends Filter {
set pixelSize(value: any);
}
export {};
export interface IAdjustmentFilterOptions {
gamma?: number;
saturation?: number;
contrast?: number;
brightness?: number;
red?: number;
green?: number;
blue?: number;
alpha?: number;
}
export class AdjustmentFilter extends Filter {
/**
* The amount of luminance
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
gamma: number;
/**
* The amount of saturation
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
saturation: number;
/**
* The amount of contrast
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
contrast: number;
/**
* The amount of brightness
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
brightness: number;
/**
* The amount of red channel
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
red: number;
/**
* The amount of green channel
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
green: number;
/**
* The amount of blue channel
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
blue: number;
/**
* The amount of alpha channel
* @member {number}
* @memberof filters.AdjustmentFilter#
* @default 1
*/
alpha: number;
constructor(options?: IAdjustmentFilterOptions);
/**
* Override existing apply method in Filter
* @private
*/
apply(filterManager: any, input: any, output: any, clear: any): void;
}
export class MaskManager {
renderer: WebglRenderer;
......@@ -4938,11 +5023,6 @@ export const _default: {
triangulate(graphicsData: GraphicsData, graphicsGeometry: Graphics): void;
}
export function bezierCurveControlPoint(points: any): {
A: any[];
B: any[];
}
export const GRAPHICS_CURVES: {
adaptive: boolean;
maxLength: number;
......@@ -4951,8 +5031,6 @@ export const GRAPHICS_CURVES: {
segmentsCount: Function;
}
export function isPointsClockwise(points: ArrayLike<number>, closed?: boolean): boolean;
export class Graphics extends Container {
/**
* 混色模式
......
......@@ -260,52 +260,159 @@ export class ShowWord extends FYGE.TextField {
* @constant
* @example data:image/png;base64
*/
const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;charset=([\w-]+))?(?:;(base64))?,(.*)/i;
/**
* Split a data URI into components. Returns undefined if
* parameter `dataUri` is not a valid data URI.
*
* @memberof utils
* @function decomposeDataUri
* @param {string} dataUri - the data URI to check
* @return {utils~DecomposedDataUri|undefined} The decomposed data uri or undefined
*/
export function decomposeDataUri(dataUri) {
const dataUriMatch = DATA_URI.exec(dataUri);
if (dataUriMatch) {
return {
mediaType: dataUriMatch[1] ? dataUriMatch[1].toLowerCase() : undefined,
subType: dataUriMatch[2] ? dataUriMatch[2].toLowerCase() : undefined,
charset: dataUriMatch[3] ? dataUriMatch[3].toLowerCase() : undefined,
encoding: dataUriMatch[4] ? dataUriMatch[4].toLowerCase() : undefined,
data: dataUriMatch[5],
};
}
return undefined;
}
//路劲后缀名解析基本用不到,考虑沉淀到其他地方后废弃getUrlFileExtension
/**
* Regexp for image type by extension.
*
* @static
* @constant
* @type {RegExp|string}
* @example `image.png`
*/
const URL_FILE_EXTENSION = /\.(\w{3,4})(?:$|\?|#)/i;
/**
* 根据图片路径获取图片扩展名
* @memberof utils
* @function getUrlFileExtension
* @param {string} url - the image path
* @return {string|undefined} image extension
*/
export function getUrlFileExtension(url) {
const extension = URL_FILE_EXTENSION.exec(url);
if (extension) {
return extension[1].toLowerCase();
}
return undefined;
}
\ No newline at end of file
const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;charset=([\w-]+))?(?:;(base64))?,(.*)/i;
/**
* Split a data URI into components. Returns undefined if
* parameter `dataUri` is not a valid data URI.
*
* @memberof utils
* @function decomposeDataUri
* @param {string} dataUri - the data URI to check
* @return {utils~DecomposedDataUri|undefined} The decomposed data uri or undefined
*/
export function decomposeDataUri(dataUri) {
const dataUriMatch = DATA_URI.exec(dataUri);
if (dataUriMatch) {
return {
mediaType: dataUriMatch[1] ? dataUriMatch[1].toLowerCase() : undefined,
subType: dataUriMatch[2] ? dataUriMatch[2].toLowerCase() : undefined,
charset: dataUriMatch[3] ? dataUriMatch[3].toLowerCase() : undefined,
encoding: dataUriMatch[4] ? dataUriMatch[4].toLowerCase() : undefined,
data: dataUriMatch[5],
};
}
return undefined;
}
//路劲后缀名解析基本用不到,考虑沉淀到其他地方后废弃getUrlFileExtension
/**
* Regexp for image type by extension.
*
* @static
* @constant
* @type {RegExp|string}
* @example `image.png`
*/
const URL_FILE_EXTENSION = /\.(\w{3,4})(?:$|\?|#)/i;
/**
* 根据图片路径获取图片扩展名
* @memberof utils
* @function getUrlFileExtension
* @param {string} url - the image path
* @return {string|undefined} image extension
*/
export function getUrlFileExtension(url) {
const extension = URL_FILE_EXTENSION.exec(url);
if (extension) {
return extension[1].toLowerCase();
}
return undefined;
}
var lastTime = Date.now(), count = 0, arr = [], requsetId;
(function aa() {
count++;
var time = Date.now();
//每秒跑一次
if (time >= lastTime + 1000) {
var value = (count * 1000) / (time - lastTime);
arr.push(value);
lastTime = time;
count = 0;
//每分钟取平均上报一次
if (arr.length > 60) {
let avg = arr.reduce(function (pre, cur) {
return pre + cur;
}) / arr.length;
arr.length = 0;
//do something
console.log(Math.round(avg))
}
}
requsetId = requestAnimationFrame(aa)
})();
/**
* 返回{ A: A, B: B },A控制点数组,B控制点数组
* @param points 点数组,格式[ { x: 0, y: 0 },{ x: 30, y: 0 },{ x: 30, y: -30 }],带x,y键值的对象就行
*/
export function bezierCurveControlPoint(points) {
if (points.length > 2) {
var A = [];
var B = [];
A[0] = { x: points[0].x + (points[1].x - points[0].x) / 4, y: points[0].y + (points[1].y - points[0].y) / 4 };
B[0] = returnBControl(points, 0);
A[points.length - 2] = returnAControl(points, points.length - 2);
B[points.length - 2] = {
x: points[points.length - 1].x - (points[points.length - 1].x - points[points.length - 2].x) / 4,
y: points[points.length - 1].y - (points[points.length - 1].y - points[points.length - 2].y) / 4
};
for (var i = 1; i < points.length - 2; i++) {
A[i] = returnAControl(points, i);
B[i] = returnBControl(points, i);
}
return { A: A, B: B };
}
}
function returnAControl(points, i) {
var x = points[i].x + (points[i + 1].x - points[i - 1].x) / 4;
var y = points[i].y + (points[i + 1].y - points[i - 1].y) / 4;
return { x: x, y: y };
}
function returnBControl(points, i) {
var x = points[i + 1].x - (points[i + 2].x - points[i].x) / 4;
var y = points[i + 1].y - (points[i + 2].y - points[i].y) / 4;
return { x: x, y: y };
}
//例子
function setPath(ctx, type) {
var points = [
{ x: 0, y: 0 },
{ x: 30, y: 0 },
{ x: 30, y: -30 },
{ x: 60, y: -30 },
{ x: 60, y: 0 },
{ x: 90, y: 0 }];
var AB, A, B;
if (points.length > 2) {
AB = bezierCurveControlPoint(points);
A = AB.A;
B = AB.B;
}
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
if (points.length <= 2) {
ctx.lineTo(points[i].x, points[i].y);
} else {
ctx.bezierCurveTo(A[i - 1].x, A[i - 1].y, B[i - 1].x, B[i - 1].y, points[i].x, points[i].y);
}
}
}
////////
/**
* 判断一系列点的顺逆时针方向,以后有需要用吧
* @see {@link https://stackoverflow.com/questions/1165647}
* 1、向量首尾相连,计算所有相邻向量的叉乘的和,正号逆时针(右手定则)
* 2、以(0,0)为原点,每两个点作为两个向量,叉乘的和就是面积的两倍,符号表示方向(同1)
* 3、下面这种 (x2 − x1)(y2 + y1).看不懂原理,但是计算过是一致的,正号顺时针(与上两种相反)
* @param {ArrayLike<number>} points 一维点序列,比如[0,0,1,1,0,2]
* @param {boolean} closed 是否连回起始点,默认false
* @returns true表示顺时针,false表示逆时针
*/
export function isPointsClockwise(points, closed = false) {
let sum = 0;
for (let i = 0; i < points.length - 2; i += 2) {
sum += (points[i + 2] - points[i]) * (points[i + 3] + points[i + 1]);
}
//是否连回原点
if (closed) sum += (points[0] - points[points.length - 2]) * (points[1] + points[points.length - 1]);
// return sum > 0;
//当前2d坐标系,y轴朝下为正,所以判断反下,
return sum < 0;
}
\ No newline at end of file
{
"name": "fyge",
"version": "2.0.60",
"version": "2.0.62",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"module": "./build/fyge.esm.js",
......
......@@ -567,10 +567,20 @@
SvgaAni的静态方法deepCopyFrames添加返回值类型FrameEntity[]
Object3D添加getPosition2d的方法,stagePos的get方法也用这个,待测试
2.0.61撤回 2.0.60好像没发布,并入下面2.0.62,但是2.0.60的git提交过
2.0.62 AdjustmentFilter里OptionsInt改成IAdjustmentFilterOptions,并且export
AdvancedBloomFilter里OptionsInt改成IAdvancedBloomFilterOptions,并且export
2d/filter/index.ts里增加导出AdjustmentFilter里的内容
bezierCurveControlPoint.ts删除,相应删除graphics/utils/index.ts里的导出
graphics/utils/index.ts删除isPointsClockwise方法
setting对象是有效的,到时全局的设置就用这个
对于lottie和svga是纯json情况下,到时用weakMap存各自的纹理
D3Renderer文件里的influencesList和attrChannelHash是按照geometry的id缓存的,这样多stage用了一个geometry会有问题
......
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.60";
export const VERSION = "2.0.62";
/**
......
......@@ -37,7 +37,7 @@ const adjustmentFrag = [
].join("\n")
interface OptionsInt {
export interface IAdjustmentFilterOptions {
gamma?: number;
saturation?: number;
contrast?: number;
......@@ -116,7 +116,7 @@ export class AdjustmentFilter extends Filter {
* @default 1
*/
alpha: number = 1;
constructor(options?: OptionsInt) {
constructor(options?: IAdjustmentFilterOptions) {
super(defaultVert, adjustmentFrag);
if (typeof options == "object") {
Object.keys(options).forEach(e => { this[e] = options[e]; });
......
......@@ -22,7 +22,7 @@ const fragment = [
'}'
].join("\n")
interface OptionsInt {
export interface IAdvancedBloomFilterOptions {
threshold?: number;
bloomScale?: number;
brightness?: number;
......@@ -55,7 +55,7 @@ export class AdvancedBloomFilter extends Filter {
bloomScale: number;
brightness: number;
private _resolution: number;
constructor(options?: OptionsInt) {
constructor(options?: IAdvancedBloomFilterOptions) {
super(defaultVert, fragment);
......
......@@ -36,3 +36,5 @@ export { default as SpriteMaskFilter } from './spriteMask/SpriteMaskFilter';
export { default as BlurFilterNew } from './blur/BlurFilterNew';
export * from './advanced-bloom/AdvancedBloomFilter';
export * from './adjustment/AdjustmentFilter';
\ No newline at end of file
/**
* 返回{ A: A, B: B },A控制点数组,B控制点数组
* @param points 点数组,格式[ { x: 0, y: 0 },{ x: 30, y: 0 },{ x: 30, y: -30 }],带x,y键值的对象就行
*/
export function bezierCurveControlPoint(points) {
if (points.length > 2) {
var A = [];
var B = [];
A[0] = { x: points[0].x + (points[1].x - points[0].x) / 4, y: points[0].y + (points[1].y - points[0].y) / 4 };
B[0] = returnBControl(points, 0);
A[points.length - 2] = returnAControl(points, points.length - 2);
B[points.length - 2] = {
x: points[points.length - 1].x - (points[points.length - 1].x - points[points.length - 2].x) / 4,
y: points[points.length - 1].y - (points[points.length - 1].y - points[points.length - 2].y) / 4
};
for (var i = 1; i < points.length - 2; i++) {
A[i] = returnAControl(points, i);
B[i] = returnBControl(points, i);
}
return { A: A, B: B };
}
}
function returnAControl(points, i) {
var x = points[i].x + (points[i + 1].x - points[i - 1].x) / 4;
var y = points[i].y + (points[i + 1].y - points[i - 1].y) / 4;
return { x: x, y: y };
}
function returnBControl(points, i) {
var x = points[i + 1].x - (points[i + 2].x - points[i].x) / 4;
var y = points[i + 1].y - (points[i + 2].y - points[i].y) / 4;
return { x: x, y: y };
}
//例子
function setPath(ctx, type) {
var points = [
{ x: 0, y: 0 },
{ x: 30, y: 0 },
{ x: 30, y: -30 },
{ x: 60, y: -30 },
{ x: 60, y: 0 },
{ x: 90, y: 0 }];
var AB, A, B;
if (points.length > 2) {
AB = bezierCurveControlPoint(points);
A = AB.A;
B = AB.B;
}
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
if (points.length <= 2) {
ctx.lineTo(points[i].x, points[i].y);
} else {
ctx.bezierCurveTo(A[i - 1].x, A[i - 1].y, B[i - 1].x, B[i - 1].y, points[i].x, points[i].y);
}
}
}
\ No newline at end of file
export { default as bezierCurveTo } from './bezierCurveTo';
export { bezierCurveControlPoint } from "./bezierCurveControlPoint";
/**
* Graphics curves resolution settings. If `adaptive` flag is set to `true`,
* the resolution is calculated based on the curve's length to ensure better visual quality.
......@@ -145,26 +145,3 @@ export function bezierCurveLength(
return result;
}
/**
* 判断一系列点的顺逆时针方向,以后有需要用吧
* @see {@link https://stackoverflow.com/questions/1165647}
* 1、向量首尾相连,计算所有相邻向量的叉乘的和,正号逆时针(右手定则)
* 2、以(0,0)为原点,每两个点作为两个向量,叉乘的和就是面积的两倍,符号表示方向(同1)
* 3、下面这种 (x2 − x1)(y2 + y1).看不懂原理,但是计算过是一致的,正号顺时针(与上两种相反)
* @param points 一维点序列,比如[0,0,1,1,0,2]
* @param closed 是否连回起始点
* @returns true表示顺时针,false表示逆时针
*/
export function isPointsClockwise(points: ArrayLike<number>, closed: boolean = false): boolean {
let sum = 0;
for (let i = 0; i < points.length - 2; i += 2) {
sum += (points[i + 2] - points[i]) * (points[i + 3] + points[i + 1]);
}
//是否连回原点
if (closed) sum += (points[0] - points[points.length - 2]) * (points[1] + points[points.length - 1]);
// return sum > 0;
//当前2d坐标系,y轴朝下为正,所以判断反下,
return sum < 0;
}
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