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 source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
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