Skip to content

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

2.0.49

parent d357afb2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 70 deletions
build/FYGE.d.ts
View file @ 18e0dbdc
declare namespace FYGE{export const VERSION = "2.0.48";
declare namespace FYGE{export const VERSION = "2.0.49";
export function cos(angle: number): number;
......@@ -5160,8 +5160,8 @@ export class Graphics extends Container {
* 画椭圆
* @param {number} x - 椭圆中心x
* @param {number} y - 椭圆中心y
* @param {number} width - 椭圆宽度
* @param {number} height - 椭圆高度
* @param {number} width - 椭圆宽度一半，就是椭圆横向半径
* @param {number} height - 椭圆高度一半，就是椭圆纵向半径
* @return {Graphics}
*/
drawEllipse(x: number, y: number, width: number, height: number): Graphics;
......@@ -6445,7 +6445,7 @@ export class Shape extends Sprite {
* @param {number} x 圆心x
* @param {number} y 圆心y
* @param {number} radius 半径
* @param {boolean} counterclockwise 半径
* @param {boolean} counterclockwise 方向，默认false，即顺时针
* @public
* @since 1.0.0
*/
......@@ -6453,14 +6453,14 @@ export class Shape extends Sprite {
/**
* 画一个椭圆
* @method drawEllipse
* @param {number} x
* @param {number} y
* @param {number} w
* @param {number} h
* @param {number} x 椭圆中心点x
* @param {number} y 椭圆中心点y
* @param {number} radiusX 横向半径
* @param {number} radiusY 垂直半径
* @public
* @since 1.0.0
*/
drawEllipse(x: number, y: number, w: number, h: number): this;
drawEllipse(x: number, y: number, radiusX: number, radiusY: number): this;
/**
* 清除掉之前所有绘画的东西
* @method clear
......@@ -6471,7 +6471,7 @@ export class Shape extends Sprite {
/**
* 开始绘画填充,如果想画的东西有颜色填充,一定要从此方法开始
* @method beginFill
* @param {number|string} color 颜色值 单色和RGBA格式
* @param {number|string} color 颜色值 十六进制颜色0xff0000，"#ff0000"
* @public
* @since 1.0.0
*/
......@@ -6498,7 +6498,7 @@ export class Shape extends Sprite {
/**
* 给线条着色
* @method beginStroke
* @param {number} color 颜色值
* @param {number|string} color 颜色值,十六进制颜色0xff0000，"#ff0000"
* @param {number} lineWidth 宽度
* @param {number} cap 线头的形状 0 butt 1 round 2 square 默认 butt
* @param {number} join 线与线之间的交接处形状 0 miter 1 bevel 2 round 默认miter
......@@ -6506,7 +6506,7 @@ export class Shape extends Sprite {
* @public
* @since 1.0.0
*/
beginStroke(color: number, lineWidth?: number, cap?: LINE_CAP, join?: LINE_JOIN, miter?: number, alpha?: number): this;
beginStroke(color?: number | string, lineWidth?: number, cap?: LINE_CAP, join?: LINE_JOIN, miter?: number, alpha?: number): this;
/**
* 画线性或径向渐变的线条
* @method beginGradientStroke
......@@ -9928,14 +9928,17 @@ export class Ray {
equals(ray: Ray): boolean;
}
export class Raycaster {
export class Raycaster extends HashObject {
near: number;
far: number;
ray: Ray;
constructor(origin?: Vector3, direction?: Vector3, near?: number, far?: number);
set(origin: Vector3, direction: Vector3): void;
copy(raycaster: Raycaster): this;
clone(): Raycaster;
setFromCamera(coords: Vector3, camera: Camera): void;
intersectObject(object: Object3D, optionalTarget?: IntersectData[]): IntersectData[];
destroy(): void;
}
export interface IntersectData {
......
build/fyge.esm.js
View file @ 18e0dbdc
This diff is collapsed.
build/fyge.esm.js.map
View file @ 18e0dbdc
This diff is collapsed.
build/fyge.min.js
View file @ 18e0dbdc
This diff is collapsed.
build/fyge.min.js.map
View file @ 18e0dbdc
This diff is collapsed.
build/types.d.ts
View file @ 18e0dbdc
export const VERSION = "2.0.48";
export const VERSION = "2.0.49";
export function cos(angle: number): number;
......@@ -5160,8 +5160,8 @@ export class Graphics extends Container {
* 画椭圆
* @param {number} x - 椭圆中心x
* @param {number} y - 椭圆中心y
* @param {number} width - 椭圆宽度
* @param {number} height - 椭圆高度
* @param {number} width - 椭圆宽度一半，就是椭圆横向半径
* @param {number} height - 椭圆高度一半，就是椭圆纵向半径
* @return {Graphics}
*/
drawEllipse(x: number, y: number, width: number, height: number): Graphics;
......@@ -6445,7 +6445,7 @@ export class Shape extends Sprite {
* @param {number} x 圆心x
* @param {number} y 圆心y
* @param {number} radius 半径
* @param {boolean} counterclockwise 半径
* @param {boolean} counterclockwise 方向，默认false，即顺时针
* @public
* @since 1.0.0
*/
......@@ -6453,14 +6453,14 @@ export class Shape extends Sprite {
/**
* 画一个椭圆
* @method drawEllipse
* @param {number} x
* @param {number} y
* @param {number} w
* @param {number} h
* @param {number} x 椭圆中心点x
* @param {number} y 椭圆中心点y
* @param {number} radiusX 横向半径
* @param {number} radiusY 垂直半径
* @public
* @since 1.0.0
*/
drawEllipse(x: number, y: number, w: number, h: number): this;
drawEllipse(x: number, y: number, radiusX: number, radiusY: number): this;
/**
* 清除掉之前所有绘画的东西
* @method clear
......@@ -6471,7 +6471,7 @@ export class Shape extends Sprite {
/**
* 开始绘画填充,如果想画的东西有颜色填充,一定要从此方法开始
* @method beginFill
* @param {number|string} color 颜色值 单色和RGBA格式
* @param {number|string} color 颜色值 十六进制颜色0xff0000，"#ff0000"
* @public
* @since 1.0.0
*/
......@@ -6498,7 +6498,7 @@ export class Shape extends Sprite {
/**
* 给线条着色
* @method beginStroke
* @param {number} color 颜色值
* @param {number|string} color 颜色值,十六进制颜色0xff0000，"#ff0000"
* @param {number} lineWidth 宽度
* @param {number} cap 线头的形状 0 butt 1 round 2 square 默认 butt
* @param {number} join 线与线之间的交接处形状 0 miter 1 bevel 2 round 默认miter
......@@ -6506,7 +6506,7 @@ export class Shape extends Sprite {
* @public
* @since 1.0.0
*/
beginStroke(color: number, lineWidth?: number, cap?: LINE_CAP, join?: LINE_JOIN, miter?: number, alpha?: number): this;
beginStroke(color?: number | string, lineWidth?: number, cap?: LINE_CAP, join?: LINE_JOIN, miter?: number, alpha?: number): this;
/**
* 画线性或径向渐变的线条
* @method beginGradientStroke
......@@ -9928,14 +9928,17 @@ export class Ray {
equals(ray: Ray): boolean;
}
export class Raycaster {
export class Raycaster extends HashObject {
near: number;
far: number;
ray: Ray;
constructor(origin?: Vector3, direction?: Vector3, near?: number, far?: number);
set(origin: Vector3, direction: Vector3): void;
copy(raycaster: Raycaster): this;
clone(): Raycaster;
setFromCamera(coords: Vector3, camera: Camera): void;
intersectObject(object: Object3D, optionalTarget?: IntersectData[]): IntersectData[];
destroy(): void;
}
export interface IntersectData {
......
examples/2d.html
View file @ 18e0dbdc
......@@ -246,6 +246,16 @@
s.arc(100, 100, 40, 0, Math.PI * 2)
s.endStroke()
//测试下shape的椭圆
var s = stage.addChild(new FYGE.Shape())
s.beginFill(0xffff00)
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.endFill()
//测试svga蒙版
SvgaParser.loadSvga("./res/测蒙版.svga", (v) => {
stage.addChild(new FYGE.SvgaAni(v)).y -= 100
......
svga-egret @ 6b35f026
Subproject commit 6b35f026b4e9b4ebdb6616519e492a7f824d9a22
package.json
View file @ 18e0dbdc
{
"name": "fyge",
"version": "2.0.48",
"version": "2.0.49",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"module": "./build/fyge.esm.js",
......
record.txt
View file @ 18e0dbdc
......@@ -477,6 +477,17 @@
2.0.48 3d导出Raycaster类
Scene3D的setViewport方法改成privite
2.0.49 Shape的drawEllipse方法大改，原先左上角xy，改成中心xy
Shape的beginFill传参兼容改成number才转string，这样不用转两次
Shape的beginStroke颜色参数兼容string类型，兼容同beginFill
Lottie添加矢量，核心方法createShape
Mesh3D的_render方法判断下material.alpha，为0不渲染
Raycaster修改为继承HashObject，添加copy，clone和destroy方法
cameras文件夹添加index.ts文件，还没用，先加上
外层canvas标签的transform数据在获取鼠标坐标时并未考虑，比如旋转
......
rollup.config.js
View file @ 18e0dbdc
......@@ -11,7 +11,7 @@ const { terser } = require('rollup-plugin-terser');
//const tslibWrapper = 'var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: __decorate,__param: __param,__metadata: __metadata,__awaiter: __awaiter,__generator: __generator,__exportStar: __exportStar,__values: __values,__read: __read,__spread: __spread,__spreadArrays: __spreadArrays,__await: __await,__asyncGenerator: __asyncGenerator,__asyncDelegator: __asyncDelegator,__asyncValues: __asyncValues,__makeTemplateObject: __makeTemplateObject,__importStar: __importStar,__importDefault: __importDefault};'
//const tslibCode = fs.readFileSync(__dirname + '/scripts/tslib.min.js');
// const isProd = process.env.BUILD === 'production';
const isProd = process.env.BUILD === 'production';
export default {
input: 'src/index.ts',
......@@ -41,7 +41,7 @@ export default {
resolve({}),
typescript(),
commonjs(),
/*isProd &&*/ terser()
isProd && terser()
],
//external: ['tslib'],
};
src/2d/const.ts
View file @ 18e0dbdc
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.48";
export const VERSION = "2.0.49";
/**
......
src/2d/graphics/Graphics.ts
View file @ 18e0dbdc
......@@ -710,8 +710,8 @@ export default class Graphics extends Container {
* 画椭圆
* @param {number} x - 椭圆中心x
* @param {number} y - 椭圆中心y
* @param {number} width - 椭圆宽度
* @param {number} height - 椭圆高度
* @param {number} width - 椭圆宽度一半，就是椭圆横向半径
* @param {number} height - 椭圆高度一半，就是椭圆纵向半径
* @return {Graphics}
*/
drawEllipse(x: number, y: number, width: number, height: number): Graphics {
......
src/2d/graphics/Shape.ts
View file @ 18e0dbdc
......@@ -280,7 +280,7 @@ export class Shape extends Sprite {
* @param {number} x 圆心x
* @param {number} y 圆心y
* @param {number} radius 半径
* @param {boolean} counterclockwise 半径
* @param {boolean} counterclockwise 方向，默认false，即顺时针
* @public
* @since 1.0.0
*/
......@@ -292,27 +292,28 @@ export class Shape extends Sprite {
/**
* 画一个椭圆
* @method drawEllipse
* @param {number} x
* @param {number} y
* @param {number} w
* @param {number} h
* @param {number} x 椭圆中心点x
* @param {number} y 椭圆中心点y
* @param {number} radiusX 横向半径
* @param {number} radiusY 垂直半径
* @public
* @since 1.0.0
*/
public drawEllipse(x: number, y: number, w: number, h: number): this {
public drawEllipse(x: number, y: number, radiusX: number, radiusY: number): this {
//先不加，否则下面command解析需要改下，没有该参数长度8，传参也需要设计下
// if(this.context.ellipse){
// this._command[this._command.length] = [1, "ellipse", [x, y, w/2, h/2,0,0, 2 * Math.PI, false]];
// }
let k = 0.5522848;
let ox = (w / 2) * k;
let oy = (h / 2) * k;
let xe = x + w;
let ye = y + h;
let xm = x + w / 2;
let ym = y + h / 2;
let ox = radiusX * k;// 水平控制点偏移量
let oy = radiusY * k;// 垂直控制点偏移量
let c = this._command;
c[c.length] = [1, "moveTo", [x, ym]];
c[c.length] = [1, "bezierCurveTo", [x, ym - oy, xm - ox, y, xm, y]];
c[c.length] = [1, "bezierCurveTo", [xm + ox, y, xe, ym - oy, xe, ym]];
c[c.length] = [1, "bezierCurveTo", [xe, ym + oy, xm + ox, ye, xm, ye]];
c[c.length] = [1, "bezierCurveTo", [xm - ox, ye, x, ym + oy, x, ym]];
//从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
c[c.length] = [1, "moveTo", [x - radiusX, y]];
c[c.length] = [1, "bezierCurveTo", [x - radiusX, y - oy, x - ox, y - radiusY, x, y - radiusY]];
c[c.length] = [1, "bezierCurveTo", [x + ox, y - radiusY, x + radiusX, y - oy, x + radiusX, y]];
c[c.length] = [1, "bezierCurveTo", [x + radiusX, y + oy, x + ox, y + radiusY, x, y + radiusY]];
c[c.length] = [1, "bezierCurveTo", [x - ox, y + radiusY, x - radiusX, y + oy, x - radiusX, y]];
return this;
}
......@@ -332,15 +333,14 @@ export class Shape extends Sprite {
/**
* 开始绘画填充,如果想画的东西有颜色填充,一定要从此方法开始
* @method beginFill
* @param {number|string} color 颜色值 单色和RGBA格式
* @param {number|string} color 颜色值 十六进制颜色0xff0000，"#ff0000"
* @public
* @since 1.0.0
*/
public beginFill(color: number | string = 0, alpha: number = 1): this {
//颜色做个兼容
if (typeof (color) == "string") color = string2hex(color);
var sColor = getRGBA(hex2string(color), alpha);
//数字形式转字符串
if (typeof (color) == "number") color = hex2string(color);
var sColor = getRGBA(color, alpha);
this._fill(sColor);
return this;
}
......@@ -386,7 +386,7 @@ export class Shape extends Sprite {
/**
* 给线条着色
* @method beginStroke
* @param {number} color 颜色值
* @param {number|string} color 颜色值,十六进制颜色0xff0000，"#ff0000"
* @param {number} lineWidth 宽度
* @param {number} cap 线头的形状 0 butt 1 round 2 square 默认 butt
* @param {number} join 线与线之间的交接处形状 0 miter 1 bevel 2 round 默认miter
......@@ -395,14 +395,15 @@ export class Shape extends Sprite {
* @since 1.0.0
*/
public beginStroke(
color: number,
color: number | string = 0,
lineWidth: number = 1,
cap: LINE_CAP = LINE_CAP.BUTT,
join: LINE_JOIN = LINE_JOIN.MITER,
miter: number = 0,
alpha: number = 1
): this {
var sColor = getRGBA(hex2string(color), alpha);
if (typeof (color) == "number") color = hex2string(color);
var sColor = getRGBA(color, alpha);
this._stroke(sColor, lineWidth, cap, join, miter);
return this;
}
......
src/2d/ui/Lottie.ts
View file @ 18e0dbdc
......@@ -5,9 +5,11 @@ import { Container, Sprite } from "../display";
import { BaseTexture, Texture } from "../texture";
import { getBezierEasing } from "./forLottie/BezierEaser"
import { buildBezierProp } from "./forLottie/buildBezierProp";
import { createImage, TextureCache } from "../utils";
import { createImage, rgb2hex, TextureCache } from "../utils";
import { Shape, Graphics } from "../graphics";
import { AnimationNode } from "./AnimationNode";
import { Matrix } from "../math";
import { LINE_CAP, RAD_TO_DEG } from "../const";
export class Lottie extends AnimationNode {
/**
......@@ -630,7 +632,7 @@ function createLottieTracks(
for (var i = layers.length - 1; i >= 0; i--) {
let layer = layers[i];
const { ty, refId, ks, parent, ind, ip, op, st, hasMask, masksProperties } = layer;
let c: (Sprite | LottieContainer) & ILottieLater;
let c: (Sprite | Shape | LottieContainer) & ILottieLater;
//如果存在组件嵌套
if (ty == 0 && compositions) {
c = root.addChild(new LottieContainer()) as LottieContainer & ILottieLater;
......@@ -644,6 +646,13 @@ function createLottieTracks(
tracks
);
}
//矢量，暂时先用Shape，后续矢量类型都确定再考虑加入Graphics，还有点问题，尽量少用吧，tr的处理便宜貌似有一点误差，换成Graphic貌似也一样
else if (ty == 4 && layer["shapes"]) {
c = root.addChild(createShape(layer["shapes"]) as Shape & ILottieLater);
// console.log(c)
//@ts-ignore
// document.body.appendChild(c.canvas)
}
//图片图层，不能判断2.因为有部分是Container
else {
c = root.addChild(new Sprite(
......@@ -958,3 +967,102 @@ function runExpressionNode(node, time: number) {
}
}
enum ShapeType {
//组，1
gr = "gr",
//fill填充，1
fl = "fl",
//stroke描边
st = "st",
//trim,先不管
tm = "tm",
//transform，1
tr = "tr",
//ellipse，1
el = "el",
//star
sr = "sr",
//shapePath,路径
sh = "sh",
//rect，矩形，1
rc = "rc",
//rounded圆角，1
rd = "rd",
//repeater，
rp = "rp",
//gradientFill
gf = "gf"
}
//创建shape
let tempMatrix: Matrix, fill = true;
let lineCap = {
1: 'butt',
2: 'round',
3: 'square',
}
var lineJoin = {
1: 'miter',
2: 'round',
3: 'bevel',
};
function createShape(shapeDatas, shape: Shape = new Shape()): Shape {
for (var i = shapeDatas.length - 1; i >= 0; i--) {
const shapeData = shapeDatas[i];
const type = shapeData.ty;
//组的话,继续
if (type == "gr") {
createShape(shapeData.it, shape);
fill ? shape.endFill() : shape.endStroke();
} else {//这些指令的顺序应该不影响，但是Graphics可能就要改了
if (type == "rc") {
const { p = { k: [0, 0] }, s, r = { k: 0 } } = shapeData;
let po = tempMatrix.transformPoint(p.k[0], p.k[1]);//这里处理有点问题，po.x-5差不多才重合
shape[r.k ? "drawRoundedRect" : "drawRect"](po.x, po.y, s.k[0], s.k[1], r.k)
}
else if (type == "el") {
const { p = { k: [0, 0] }, s } = shapeData;
let po = tempMatrix.transformPoint(p.k[0], p.k[1]);
shape.drawEllipse(po.x, po.y, s.k[0] / 2, s.k[1] / 2)
// shape.drawCircle(p.k[0], p.k[1], s.k[0]/2)
}
else if (type == "fl" || type == "st") {
//颜色
let { c = { k: [0, 0, 0, 1] }, o = { k: 1 } } = shapeData
let color = rgb2hex([c.k[0], c.k[1], c.k[2]])
let alpha = c.k[3] * o.k / 100;
if (type == "fl") {
// shapeData.r 2:evenodd 1:nonzero
shape.beginFill(color, alpha);
fill = true
} else {
const { w, lc, lj, ml, hd, d } = shapeData;//hd是否比否，是否执行closePath,d虚线
shape.beginStroke(
color,
w && w.k || 1,
lineCap[lc],
lineJoin[lj],
ml,
alpha
)
fill = false;
}
}
else if (type == "tr") {
tempMatrix = tempMatrix || new Matrix();
const { p = { k: [0, 0] }, a = { k: [0, 0] }, s = { k: [0, 0] }, r = { k: 0 }, o, sk, sa } = shapeData;
tempMatrix.createBox(p.k[0], p.k[1], s.k[0] / 100, s.k[1] / 100, r.k * RAD_TO_DEG, 0, 0, a.k[0], a.k[1]);
//影响位置原点，减掉锚点，
tempMatrix.tx -= a.k[0];
tempMatrix.ty -= a.k[1];
// console.log(tempMatrix.a, tempMatrix.b, tempMatrix.c, tempMatrix.d, tempMatrix.tx, tempMatrix.ty)
//透明度o，想想咋搞，sk和sa先不管吧
// console.log(o.k)
//Shape
// shape["_command"][shape["_command"].length] = [1, "setTransform", [tempMatrix.a, tempMatrix.b, tempMatrix.c, tempMatrix.d, tempMatrix.tx, tempMatrix.ty]];
}
}
}
return shape
}
\ No newline at end of file
src/3d/Mesh3D.ts
View file @ 18e0dbdc
......@@ -32,7 +32,7 @@ export class Mesh3D extends Object3D {
this.updateMorphTargets();
}
_render(renderer) {
if (!this.visible) return;
if (!this.visible || !this.material.alpha) return;//到时加transparent时需要修改 TODO
renderer.batchManager.setObjectRenderer(renderer.plugins["d3"]);
renderer.plugins["d3"].render(this)
}
......
src/3d/Raycaster.ts
View file @ 18e0dbdc
......@@ -4,10 +4,11 @@ import { Vector3 } from "./math/Vector3"
import { Camera } from './cameras/Camera';
import { Object3D } from './Object3D';
import { Mesh3D } from './Mesh3D';
import { HashObject } from '../2d/HashObject';
//射线检测工具，暂时不对外导了
//射线检测工具
export class Raycaster {
export class Raycaster extends HashObject {
public ray: Ray
constructor(
origin?: Vector3,
......@@ -15,11 +16,21 @@ export class Raycaster {
public near: number = 0,
public far: number = Infinity
) {
super();
this._instanceType = "Raycaster";
this.ray = new Ray(origin, direction);
}
set(origin: Vector3, direction: Vector3) {
this.ray.set(origin, direction);
}
copy(raycaster: Raycaster) {
this.ray.copy(raycaster.ray);
// near and far?TODO
return this;
}
clone() {
return new Raycaster().copy(this)
}
setFromCamera(coords: Vector3, camera: Camera) {
// if ( ( camera && camera.isPerspectiveCamera ) ) {
......@@ -51,6 +62,9 @@ export class Raycaster {
return intersects;
}
destroy() {
//TODO
}
}
function ascSort(a: IntersectData, b: IntersectData) {
......
src/3d/cameras/index.ts 0 → 100644
View file @ 18e0dbdc
export * from "./Camera";
export * from "./PerspectiveCamera";
export * from "./OrthographicCamera";
\ No newline at end of file
test/lottie/烟花.json 0 → 100644
View file @ 18e0dbdc
This diff is collapsed.
test/lottie/烟花3.json 0 → 100644
View file @ 18e0dbdc
This source diff could not be displayed because it is too large. You can view the blob instead.
test/lottie/烟花4.json 0 → 100644
View file @ 18e0dbdc
This diff is collapsed.
tsconfig.json
View file @ 18e0dbdc
......@@ -21,6 +21,7 @@
// ],
"exclude": [
"node_modules",
"types"
"types",
"build"//build也忽略，可以避免开发的时候，引用到build里的声明文件，不过这样build里的声明文件的代码检查就无效了
]
}
\ 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