Skip to content

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

2.0.54

parent ee50a4cd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 729 additions and 377 deletions
build/FYGE.d.ts
View file @ 74a9983b
This diff is collapsed.
build/fyge.esm.js
View file @ 74a9983b
This diff is collapsed.
build/fyge.esm.js.map
View file @ 74a9983b
This diff is collapsed.
build/fyge.min.js
View file @ 74a9983b
This diff is collapsed.
build/fyge.min.js.map
View file @ 74a9983b
This diff is collapsed.
build/types.d.ts
View file @ 74a9983b
This diff is collapsed.
package.json
View file @ 74a9983b
{ {
"name": "fyge", "name": "fyge",
"version": "2.0.53", "version": "2.0.54",
"description": "canvas渲染引擎", "description": "canvas渲染引擎",
"main": "./build/fyge.min.js", "main": "./build/fyge.min.js",
"module": "./build/fyge.esm.js", "module": "./build/fyge.esm.js",
......
record.txt
View file @ 74a9983b
...@@ -510,9 +510,21 @@ ...@@ -510,9 +510,21 @@
BaseTexture的_sourceChange方法改成了_sourceLoaded,且私有，相关地方替换修改，且注释两个this.dispatchEvent("loaded")（_sourceLoaded内会执行） BaseTexture的_sourceChange方法改成了_sourceLoaded,且私有，相关地方替换修改，且注释两个this.dispatchEvent("loaded")（_sourceLoaded内会执行）
Texture文件里的removeAllHandlers函数里新增removeEventListener置空 Texture文件里的removeAllHandlers函数里新增removeEventListener置空
2.0.54 DisplayObject的几个方法的参数从Point改成{x:number,y:number},globalToLocal和localToGlobal的第一个参数，position、scale、anchor、skew的set方法
Sprite添加hitTestByPixel属性，hitTestPoint方法里新增处理像素检测
Stage的onMouseEvent方法里pageX新增兼容0兜底
Stage的getBounds方法先注释了，以后再说
Shape的hitTestPoint方法里的像素检测逻辑被删除了，直接用父级的hitTestPoint了
GroupD8里的signum直接改成统一的sign方法
ObservablePoint的copy方法参数改成了{ x: number, y: number }，且返回自身
Point类新增copy方法
Texture类的_rotate变私有方法，且注释了rotate的set方法，以后有办法让人为赋值显示没问题了再说
texture的rotate属性设置修改纹理旋转会有大问题。尤其是45度角（groupD8里系数偏大）等，自身包围盒会有问题，且webgl模式下顶点计算有问题导致显示不全和纹理拉伸
在未解决前注释rotate的set方法
Sprite添加像素检测还需从长计议，涉及图集的trim和rotate，还有数据格式的图片不用绘制的方式 Sprite添加像素检测还需从长计议，涉及图集的trim和rotate，还有数据格式的图片不用绘制的方式
......
src/2d/const.ts
View file @ 74a9983b
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
* @name VERSION * @name VERSION
* @type {string} * @type {string}
*/ */
export const VERSION = "2.0.53"; export const VERSION = "2.0.54";
/** /**
......
src/2d/display/DisplayObject.ts
View file @ 74a9983b
...@@ -283,26 +283,28 @@ export class DisplayObject extends EventDispatcher { ...@@ -283,26 +283,28 @@ export class DisplayObject extends EventDispatcher {
} }
/** /**
*将全局坐标转换到本地坐标值 * 将全局坐标转换到本地坐标值
* @method globalToLocal * @method globalToLocal
* @since 1.0.0 * @since 1.0.0
* @public * @public
* @param {Point} point * @param {*} point 需要转换的点，存在x和y字段的对象都行
* @param {Point} bp 最终存入数据的Point对象，不传会使用默认的DisplayObject._bp，多次调用注意该对象覆盖问题
* @return {Point} * @return {Point}
*/ */
public globalToLocal(point: Point, bp: Point = null): Point { public globalToLocal(point: { x: number, y: number }, bp: Point = null): Point {
return this.worldMatrix.transformPointInverse(point.x, point.y, bp || DisplayObject._bp); return this.worldMatrix.transformPointInverse(point.x, point.y, bp || DisplayObject._bp);
} }
/** /**
*将本地坐标转换到全局坐标值 * 将本地坐标转换到全局坐标值
* @method localToGlobal * @method localToGlobal
* @public * @public
* @since 1.0.0 * @since 1.0.0
* @param {Point} point * @param {*} point 需要转换的点，存在x和y字段的对象都行
* @param {Point} bp 最终存入数据的Point对象，不传会使用默认的DisplayObject._bp，多次调用注意该对象覆盖问题
* @return {Point} * @return {Point}
*/ */
public localToGlobal(point: Point, bp: Point = null): Point { public localToGlobal(point: { x: number, y: number }, bp: Point = null): Point {
var wp = this.worldMatrix.transformPoint(point.x, point.y, bp || DisplayObject._bp) var wp = this.worldMatrix.transformPoint(point.x, point.y, bp || DisplayObject._bp)
if (this.stage) { if (this.stage) {
//舞台存在时返回舞台上的坐标 //舞台存在时返回舞台上的坐标
...@@ -489,7 +491,7 @@ export class DisplayObject extends EventDispatcher { ...@@ -489,7 +491,7 @@ export class DisplayObject extends EventDispatcher {
* 设置位置对象 * 设置位置对象
* 传值用于copy，并非赋值，要求传值存在x和y字段 * 传值用于copy，并非赋值，要求传值存在x和y字段
*/ */
set position(value) { set position(value: { x: number, y: number }) {
this.transform.position.copy(value); this.transform.position.copy(value);
} }
...@@ -505,7 +507,7 @@ export class DisplayObject extends EventDispatcher { ...@@ -505,7 +507,7 @@ export class DisplayObject extends EventDispatcher {
* 设置缩放对象 * 设置缩放对象
* 传值用于copy，并非赋值，要求传值存在x和y字段 * 传值用于copy，并非赋值，要求传值存在x和y字段
*/ */
set scale(value) { set scale(value: { x: number, y: number }) {
this.transform.scale.copy(value); this.transform.scale.copy(value);
} }
/** /**
...@@ -544,7 +546,7 @@ export class DisplayObject extends EventDispatcher { ...@@ -544,7 +546,7 @@ export class DisplayObject extends EventDispatcher {
* 设置锚点对象 * 设置锚点对象
* 传值用于copy，并非赋值，要求传值存在x和y字段 * 传值用于copy，并非赋值，要求传值存在x和y字段
*/ */
set anchor(value) { set anchor(value: { x: number, y: number }) {
this.transform.anchor.copy(value); this.transform.anchor.copy(value);
} }
/** /**
...@@ -583,7 +585,7 @@ export class DisplayObject extends EventDispatcher { ...@@ -583,7 +585,7 @@ export class DisplayObject extends EventDispatcher {
* 设置斜切对象 * 设置斜切对象
* 传值用于copy，并非赋值，要求传值存在x和y字段 * 传值用于copy，并非赋值，要求传值存在x和y字段
*/ */
set skew(value) { set skew(value: { x: number, y: number }) {
this.transform.skew.copy(value); this.transform.skew.copy(value);
} }
......
src/2d/display/Sprite.ts
View file @ 74a9983b
import { Point, ObservablePoint, Rectangle } from '../math'; import { Point, ObservablePoint, Rectangle, GroupD8, Matrix } from '../math';
import { sign, TextureCache, hex2rgb } from '../utils'; import { sign, TextureCache, hex2rgb, getBackupCanvasCtx } from '../utils';
import { BLEND_MODES } from '../const'; import { BLEND_MODES } from '../const';
import Texture from '../texture/Texture'; import Texture from '../texture/Texture';
import Container from './Container'; import Container from './Container';
...@@ -10,6 +10,8 @@ import { SCALE_MODES } from '../const'; ...@@ -10,6 +10,8 @@ import { SCALE_MODES } from '../const';
import { WebglRenderer } from '../renderers/WebglRenderer'; import { WebglRenderer } from '../renderers/WebglRenderer';
const indices = new Uint16Array([0, 1, 2, 0, 2, 3]); const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
//临时矩阵
let tempMatrix: Matrix;
/** /**
* Sprite类，显示图片和容器功能 * Sprite类，显示图片和容器功能
* @class * @class
...@@ -371,7 +373,12 @@ export default class Sprite extends Container { ...@@ -371,7 +373,12 @@ export default class Sprite extends Container {
return super.getLocalBounds.call(this, rect); return super.getLocalBounds.call(this, rect);
} }
/**
* 是否使用像素检测，对于png图片透明区域检测很有效， 默认关闭，Shape继承后默认开启
* @property hitTestByPixel
* @type {boolean}
*/
public hitTestByPixel: boolean = false;
/** /**
* 重写碰撞检测方法 * 重写碰撞检测方法
* @param globalPoint * @param globalPoint
...@@ -387,10 +394,70 @@ export default class Sprite extends Container { ...@@ -387,10 +394,70 @@ export default class Sprite extends Container {
hitDisplayObject = super.hitTestPoint(globalPoint, isMouseEvent); hitDisplayObject = super.hitTestPoint(globalPoint, isMouseEvent);
//子级已有，返回 //子级已有，返回
if (hitDisplayObject) return hitDisplayObject; if (hitDisplayObject) return hitDisplayObject;
//检查自己 //检查自己，包围盒检测。
hitDisplayObject = this.displayObjectHitTestPoint(globalPoint, isMouseEvent); hitDisplayObject = this.displayObjectHitTestPoint(globalPoint, isMouseEvent);
if (hitDisplayObject) return hitDisplayObject; //自身包围盒检测不通过
return null; if (!hitDisplayObject) return null;
//不是像素检测的，直接返回对象
if (!this.hitTestByPixel) return hitDisplayObject;
///////////////下面开始像素检测//////////////////
const { texture, _anchorTexture } = this;
const { orig, frame, trim, rotate, baseTexture } = texture;
//拷贝一个，以防globalPoint被修改
let p: Point = DisplayObject._bp.copy(globalPoint);
//鼠标事件转换下
if (isMouseEvent) p = this.globalToLocal(p);
//贴图锚点偏移
p.x += _anchorTexture.x * orig.width;
p.y += _anchorTexture.y * orig.height;
//先判断是否在trim外面，orig已经在displayObjectHitTestPoint检测过了
if (trim) {
//不在里面直接返回false
if (!trim.isPointIn(p)) return null;
//还需要做点啥，转到trim中
p.x -= trim.x;
p.y -= trim.y;
}
//如果纹理带旋转，转换p，暂时就2和6有效，所以texture的rotate暂时只给图集用，自己千万别擅自修改
if (rotate) {
if (!tempMatrix) tempMatrix = new Matrix();
// tempMatrix.set(1, 0, 0, 1, 0, 0)
//其实只有2和6的话，直接能写出矩阵，但是先这样吧，先注释吧，后续都能算了再统一到GroupD8里计算
// GroupD8.matrixAppendRotationInv(tempMatrix, GroupD8.inv(rotate));
//还需要平移
if (rotate == 2) {
tempMatrix.set(0, 1, -1, 0, frame.width, 0);
}
else if (rotate == 6) {//待测试
tempMatrix.set(0, -1, 1, 0, 0, frame.height);
}
tempMatrix.transformPoint(p.x, p.y, p);
}
//处理frame的偏移
p.x += frame.x;
p.y += frame.y;
//数据形式，直接取
if (baseTexture.source._data) {
//对应点的像素
if (baseTexture.source._data[((Math.round(p.y - 1)) * baseTexture.source.width + Math.round(p.x)) * 4 - 1] > 0) {
return hitDisplayObject;
}
return null
}
//像素检测
let ctx = getBackupCanvasCtx();
ctx.setTransform(1, 0, 0, 1, 0, 0);//先移动位置，否则颜色清除有问题,原先修改尺寸就不用
ctx.clearRect(0, 0, 1, 1);
ctx.setTransform(1, 0, 0, 1, -p.x, -p.y);
ctx.drawImage(baseTexture.source, 0, 0);
//取imageData对象
var imageData = ctx.getImageData(0, 0, 1, 1);
//容错处理(暂时淘宝小程序bug，安卓有可能取到的imageData是undefined)，按照存在处理
if (!imageData || !imageData.data) return hitDisplayObject;
// console.log("alpha:", imageData.data[3])
//像素透明度不为0
if (imageData.data[3] > 0) return hitDisplayObject;
return null
} }
......
src/2d/display/Stage.ts
View file @ 74a9983b
...@@ -483,8 +483,8 @@ export class Stage extends Container { ...@@ -483,8 +483,8 @@ export class Stage extends Container {
} else { } else {
cp = new Point(); cp = new Point();
} }
cp.x = ((points[o].pageX || points[o].x || points[o].b) - offsetX) * s._dpi// devicePixelRatio; cp.x = ((points[o].pageX || points[o].x || points[o].b || 0) - offsetX) * s._dpi// devicePixelRatio;
cp.y = ((points[o].pageY || points[o].y || points[o].c) - offsetY) * s._dpi// devicePixelRatio; cp.y = ((points[o].pageY || points[o].y || points[o].c || 0) - offsetY) * s._dpi// devicePixelRatio;
// my.alert({ // my.alert({
// title: JSON.stringify(points[o]) // title: JSON.stringify(points[o])
// }); // });
...@@ -682,13 +682,13 @@ export class Stage extends Container { ...@@ -682,13 +682,13 @@ export class Stage extends Container {
canvas.addEventListener('touchend', mouseEvent, false); canvas.addEventListener('touchend', mouseEvent, false);
} }
} }
/** // /**
* 直接修改了，用视窗， // * 直接修改了，用视窗，
* 一般用于滤镜等等，对于舞台，超出viewPort的肯定不显示，没必要测量（后续考虑也测量，万一测量出的更小呢） // * 一般用于滤镜等等，对于舞台，超出viewPort的肯定不显示，没必要测量（后续考虑也测量，万一测量出的更小呢）
*/ // */
public getBounds(): Rectangle { // public getBounds(): Rectangle {20211202注释，因为滤镜上会有问题，stage是带矩阵的，viewRect没经过换算
return this.viewRect; // return this.viewRect;
} // }
public destroy(): void { public destroy(): void {
let s = this; let s = this;
......
src/2d/graphics/Shape.ts
View file @ 74a9983b
...@@ -729,39 +729,43 @@ export class Shape extends Sprite { ...@@ -729,39 +729,43 @@ export class Shape extends Sprite {
* @since 1.0.0 * @since 1.0.0
*/ */
public hitTestPoint(globalPoint: Point, isMouseEvent: boolean = false): DisplayObject { public hitTestPoint(globalPoint: Point, isMouseEvent: boolean = false): DisplayObject {
let s: Shape = this; //更新shape
this.updateShape();//需要更新shape先 this.updateShape();
//直接继承 //直接用继承的，20211216修改
var hitResult = super.hitTestPoint(globalPoint, isMouseEvent) return super.hitTestPoint(globalPoint, isMouseEvent)
//如果这样返回都没有，直接返回null // let s: Shape = this;
if (!hitResult) return null; // this.updateShape();//需要更新shape先
//如果不是自己，是子级的。直接返回子级 // //直接继承
if (hitResult != s) return hitResult; // var hitResult = super.hitTestPoint(globalPoint, isMouseEvent)
//如果不是像素级碰撞 直接返回自己 // //如果这样返回都没有，直接返回null
if (!s.hitTestByPixel) return s; // if (!hitResult) return null;
let p: Point = globalPoint; // //如果不是自己，是子级的。直接返回子级
//p要用到获取像素 // if (hitResult != s) return hitResult;
if (isMouseEvent) p = s.globalToLocal(globalPoint); // //如果不是像素级碰撞 直接返回自己
let image = s._texture; // if (!s.hitTestByPixel) return s;
//无图数据返回null // let p: Point = globalPoint;
if (!image || image.width == 0 || image.height == 0) return null; // //p要用到获取像素
// var backupCanvas = getBackupCanvas(); // if (isMouseEvent) p = s.globalToLocal(globalPoint);
// backupCanvas.width = 1; // let image = s._texture;
// backupCanvas.height = 1; // //无图数据返回null
p.x -= s.offsetX; // if (!image || image.width == 0 || image.height == 0) return null;
p.y -= s.offsetY; // // var backupCanvas = getBackupCanvas();
let ctx = getBackupCanvasCtx() //backupCanvas.getContext('2d'); // // backupCanvas.width = 1;
ctx.setTransform(1, 0, 0, 1, 0, 0);//先移动位置，否则颜色清除有问题,原先修改尺寸就不用 // // backupCanvas.height = 1;
ctx.clearRect(0, 0, 1, 1); // p.x -= s.offsetX;
ctx.setTransform(1, 0, 0, 1, -p.x, -p.y); // p.y -= s.offsetY;
ctx.drawImage(s.canvas, 0, 0); // let ctx = getBackupCanvasCtx() //backupCanvas.getContext('2d');
//取imageData对象 // ctx.setTransform(1, 0, 0, 1, 0, 0);//先移动位置，否则颜色清除有问题,原先修改尺寸就不用
var imageData = ctx.getImageData(0, 0, 1, 1); // ctx.clearRect(0, 0, 1, 1);
//容错处理(暂时淘宝小程序bug，安卓有可能取到的imageData是undefined)，按照点击了返回 // ctx.setTransform(1, 0, 0, 1, -p.x, -p.y);
if (!imageData || !imageData.data) return s; // ctx.drawImage(s.canvas, 0, 0);
//像素透明度不为0；返回自己 // //取imageData对象
if (imageData.data[3] > 0) return s; // var imageData = ctx.getImageData(0, 0, 1, 1);
return null // //容错处理(暂时淘宝小程序bug，安卓有可能取到的imageData是undefined)，按照点击了返回
// if (!imageData || !imageData.data) return s;
// //像素透明度不为0；返回自己
// if (imageData.data[3] > 0) return s;
// return null
} }
/** /**
......
src/2d/math/GroupD8.ts
View file @ 74a9983b
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
* 二面体群，n=4，用于翻转四边形纹理，包括镜像 * 二面体群，n=4，用于翻转四边形纹理，包括镜像
* 暂时用于纹理的旋转90度 * 暂时用于纹理的旋转90度
*/ */
import { sign as signum } from '../utils';
import { Matrix } from './Matrix'; import { Matrix } from './Matrix';
const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1];
...@@ -12,15 +13,15 @@ const tempMatrices = []; ...@@ -12,15 +13,15 @@ const tempMatrices = [];
const mul = []; const mul = [];
function signum(x) { // function signum(x) {
if (x < 0) { // if (x < 0) {
return -1; // return -1;
} // }
if (x > 0) { // if (x > 0) {
return 1; // return 1;
} // }
return 0; // return 0;
} // }
function init() { function init() {
for (let i = 0; i < 16; i++) { for (let i = 0; i < 16; i++) {
......
src/2d/math/ObservablePoint.ts
View file @ 74a9983b
import { Point } from "../math/Point"; import { Point } from "./Point";
import { HashObject } from "../HashObject"; import { HashObject } from "../HashObject";
/** /**
* 动态可监控ObservablePoint类 * 动态可监控ObservablePoint类
...@@ -46,14 +46,15 @@ export class ObservablePoint extends HashObject { ...@@ -46,14 +46,15 @@ export class ObservablePoint extends HashObject {
/** /**
* 从一个点复制xy * 从一个点复制xy
* *
* @param {Point|ObservablePoint} point * @param {*} point 存在x,y属性的对象都行
*/ */
copy(point: Point | ObservablePoint) { copy(point: { x: number, y: number }) {
if (this._x !== point.x || this._y !== point.y) { if (this._x !== point.x || this._y !== point.y) {
this._x = point.x; this._x = point.x;
this._y = point.y; this._y = point.y;
this.cb.call(this.scope); this.cb.call(this.scope);
} }
return this;
} }
get x() { get x() {
......
src/2d/math/Point.ts
View file @ 74a9983b
...@@ -58,4 +58,9 @@ export class Point extends HashObject { ...@@ -58,4 +58,9 @@ export class Point extends HashObject {
this.x = x; this.x = x;
this.y = y; this.y = y;
} }
copy(point: { x: number, y: number }) {
this.x = point.x;
this.y = point.y;
return this;
}
} }
src/2d/texture/Texture.ts
View file @ 74a9983b
...@@ -59,7 +59,7 @@ export default class Texture extends EventDispatcher { ...@@ -59,7 +59,7 @@ export default class Texture extends EventDispatcher {
/** /**
* 贴图旋转及镜像 * 贴图旋转及镜像
*/ */
_rotate: number; private _rotate: number;
/** /**
* 贴图的锚点，默认0，0，左上角，范围0到1 * 贴图的锚点，默认0，0，左上角，范围0到1
* *
...@@ -346,12 +346,12 @@ export default class Texture extends EventDispatcher { ...@@ -346,12 +346,12 @@ export default class Texture extends EventDispatcher {
return this._rotate; return this._rotate;
} }
set rotate(rotate: number) { // set rotate(rotate: number) {
if (this._rotate != rotate) { // if (this._rotate != rotate) {
this._rotate = rotate; // this._rotate = rotate;
if (this.valid) this.updateUvs(); // if (this.valid) this.updateUvs();
} // }
} // }
/** /**
* 宽高都是纹理真实的宽高，不管trim * 宽高都是纹理真实的宽高，不管trim
......
test/testHitPixel.html 0 → 100644
View file @ 74a9983b
<!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" />
<!-- 加载svga文件用 npm svga-parser-->
<!-- <script src="./js/svgaParser.min.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;position: absolute;">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
</body>
<script>
window.addEventListener("load", async function () {
//获取canvas
var canvas = document.getElementById("canvas");
//建舞台，定宽适配，会根据实际窗口尺寸上下裁切，所以stage实际y坐标会偏移stage.viewRect.y
var stage = new FYGE.Stage(
canvas,
750,//设计宽度，按设计搞给的就行
1624,//设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL,
false,
false,
window.devicePixelRatio || 1//分辨率
);
//监听窗口缩放,按需,一般移动端的不需要
window.addEventListener('resize', () => { stage.resize() });
//鼠标事件
stage.addWebMouseEvent();
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
FYGE.GlobalLoader.loadSheet((s, res) => {
var tts = FYGE.createTextureSheet(new FYGE.BaseTexture(res.img), res.json)
console.log(tts);
var sp= stage.addChild(new FYGE.Sprite(tts["b.png"]))
// tts["b.png"].rotate =5
sp.hitTestByPixel=true;
sp.addEventListener("onMouseDown",()=>{
console.log(123)
})
// sp.position.set(100,200)
}, "./res/a.json")
//
// var sh = stage.addChild(new FYGE.Shape())
// .beginFill(0xff0000)
// .moveTo(375-Math.random()*750,600-Math.random()*1200);
// for(var i=0;i<10;i++){
// sh.lineTo(375-Math.random()*750,600-Math.random()*1200);
// }
// sh.endFill();
// sh.position.set(375,600)
// sh.addEventListener("onMouseDown",()=>{
// console.log(123)
// })
// sh.scale.set(Math.random()*2,Math.random()*2)
// sh.rotation= Math.random()*360;
}, this);
//循环
loop();
function loop() {
//Tween每帧刷新
FYGE.Tween.flush()
//舞台每帧刷新
stage.flush();
// FYGE.getRequestAnimationFrame()(loop);
requestAnimationFrame(loop)
}
})
</script>
</html>
\ No newline at end of file
test/testStroke.html 0 → 100644
View file @ 74a9983b
<!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" />
<!-- 加载svga文件用 npm svga-parser-->
<!-- <script src="./js/svgaParser.min.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;position: absolute;">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
</body>
<script>
window.addEventListener("load", async function () {
//获取canvas
var canvas = document.getElementById("canvas");
//淘宝小程序上canvas用自己的方式建
var sysInfo;
//@ts-ignore 存在my就初始化
if (my) {
FYGE.initedByCanvas(canvas)
//@ts-ignore 存在my就初始化
sysInfo = my.getSystemInfoSync()
}
//建舞台，定宽适配，会根据实际窗口尺寸上下裁切，所以stage实际y坐标会偏移stage.viewRect.y
var stage = new FYGE.Stage(
canvas,
750,//设计宽度，按设计搞给的就行
1624,//设计高度
sysInfo && sysInfo.windowWidth || document.body.clientWidth,
sysInfo && sysInfo.windowHeight || document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL,
false,
false,
sysInfo && sysInfo.pixelRatio || window.devicePixelRatio || 1//分辨率
);
//监听窗口缩放,按需,一般移动端的不需要
window.addEventListener('resize', () => { stage.resize() });
//鼠标事件
stage.addWebMouseEvent();
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
const circle = new FYGE.Graphics();
stage.addChild(circle);
circle.x = 200;
circle.y = 200;
circle.clear();
circle.lineStyle(50, '0xff0000',1,0.5);
// circle.beginFill('0xffffff', 0);
//画圆，注意，这里画圆依然是基于circle的坐标来画的，而不是舞台
circle.drawCircle(0, 0, 80);
circle.endFill();
// circle.moveTo(0,0).lineTo(0,100)
console.log(circle._localBoundsSelf)
}, this);
//循环
loop();
function loop() {
//Tween每帧刷新
FYGE.Tween.flush()
//舞台每帧刷新
stage.flush();
// FYGE.getRequestAnimationFrame()(loop);
requestAnimationFrame(loop)
}
})
</script>
</html>
test/testThree.html
View file @ 74a9983b
...@@ -67,8 +67,8 @@ ...@@ -67,8 +67,8 @@
camera1.position.set(-2, 2, 2); camera1.position.set(-2, 2, 2);
camera1.lookAt(0,0,0) camera1.lookAt(0,0,0)
scene.add(camera1); scene.add(camera1);
const helper = new THREE.CameraHelper(camera1); // const helper = new THREE.CameraHelper(camera1);
scene.add(helper); // scene.add(helper);
renderer = new THREE.WebGLRenderer({ alpha: true }); renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setPixelRatio(window.devicePixelRatio); renderer.setPixelRatio(window.devicePixelRatio);
...@@ -157,6 +157,11 @@ ...@@ -157,6 +157,11 @@
1, 1,
0x0000ff 0x0000ff
)) ))
var box1 = new THREE.Mesh(new THREE.BoxGeometry(0.3, 0.3, 0.3), new THREE.MeshPhongMaterial())
box.add(box1);
box1.position.set(0.7, 0.7, 0.3);
box1.rotation.set(-0.0, 0.8, 0.6)
} }
......
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