Skip to content

F
fyge_for_tb
Commit 24e2e305 authored by wjf's avatar wjf
Browse files
Options

2.0.23

parent 8382b873
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1798 additions and 2372 deletions
.npmignore
View file @ 24e2e305
......@@ -15,4 +15,3 @@ record.txt
test
examples
docs
\ No newline at end of file
aaa.html
\ No newline at end of file
aaa.html deleted 100644 → 0
View file @ 8382b873
This diff is collapsed.
build/FYGE.d.ts
View file @ 24e2e305
This diff is collapsed.
build/fyge.min.js
View file @ 24e2e305
This diff is collapsed.
build/fyge.min.js.map
View file @ 24e2e305
This diff is collapsed.
build/types.d.ts
View file @ 24e2e305
This diff is collapsed.
examples/2d.html
View file @ 24e2e305
......@@ -40,8 +40,6 @@
window.addEventListener("load", async function () {
//获取canvas
var canvas = document.getElementById("canvas");
canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
//淘宝小程序上canvas用自己的方式建
// var canvas = await new Promise((r) => {
// my.createCanvas({
......@@ -72,18 +70,14 @@
sysInfo && sysInfo.windowWidth || document.body.clientWidth,
sysInfo && sysInfo.windowHeight || document.body.clientHeight,
FYGE.RENDERER_TYPE.CANVAS,
false,
false,
sysInfo && sysInfo.pixelRatio || window.devicePixelRatio || 1//分辨率
);
//监听窗口缩放,按需,一般移动端的不需要
window.addEventListener('resize', () => { stage.resize() });
//鼠标事件
var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener('touchmove', mouseEvent, false);
canvas.addEventListener('touchend', mouseEvent, false);
//pc
canvas.addEventListener("mousedown", mouseEvent, false);
canvas.addEventListener('mousemove', mouseEvent, false);
canvas.addEventListener('mouseup', mouseEvent, false);
stage.addWebMouseEvent();
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
......@@ -248,8 +242,8 @@
// s.lineTo(10, 10);
// s.endStroke()
var s = stage.addChild(new FYGE.Graphics())
s.lineStyle(5,0,1,1)
s.arc(100,100,40,0,Math.PI*2)
s.lineStyle(5, 0, 1, 1)
s.arc(100, 100, 40, 0, Math.PI * 2)
s.endStroke()
//测试svga蒙版
......@@ -257,6 +251,13 @@
stage.addChild(new FYGE.MovieClip(v)).y -= 100
})
// var ss = stage.addChild(new FYGE.EditableText())
// ss.size = 40;
// ss.prompt = "啊实打实大苏打"
// ss.addEventListener("oninput",(e)=>{
// console.log(e)
// })
// console.log( FYGE.toDisplayDataURL(stage,null,{type: "jpeg"}))
}, this);
......
examples/previewLottie.html 0 → 100644
View file @ 24e2e305
<!DOCTYPE html>
<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" />
<style>
body,
html {
background-color: #fff;
margin: 0px;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
</style>
<script src="../build/fyge.min.js"></script>
</head>
<body>
<div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<script>
window.addEventListener("load", async function () {
//舞台
var stage = new FYGE.Stage(
document.getElementById("canvas"),
750,//设计宽度，按设计搞给的就行
1624,//设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL,
false,
false,
window.devicePixelRatio || 1
);
(function loop() {
stage.flush();
FYGE.Tween.flush();
requestAnimationFrame(loop)
})()
var URL = window.webkitURL || window.URL;
var container = document.getElementById("cusEngine");
/*拖拽的目标对象------ document 监听drop 并防止浏览器打开客户端的图片*/
document.ondragover = function (e) {
e.preventDefault(); //只有在ondragover中阻止默认行为才能触发 ondrop 而不是 ondragleave
};
document.ondrop = function (e) {
e.preventDefault(); //阻止 document.ondrop的默认行为 *** 在新窗口中打开拖进的图片
};
/*拖拽的源对象----- 客户端的一张图片 */
/*拖拽目标对象-----div#container 若图片释放在此元素上方，则需要在其中显示*/
container.ondragover = function (e) {
e.preventDefault();
};
container.ondrop = function (e) {
var files = [];
[].forEach.call(e.dataTransfer.files, function (file) {
files.push(file);
}, false);
name = files[0].name;
console.log(name)
var src = URL.createObjectURL(files[0]);
//清空
stage.removeAllChildren()
// console.log(files)
//加载
FYGE.GlobalLoader.loadJson((s, json) => {
var l = stage.addChild(new FYGE.Lottie(json))
l.position.set((750 - json.w) / 2, (stage.viewRect.height - json.h) / 2);
l.play();
}, src)
}
})
</script>
</body>
</html>
\ No newline at end of file
examples/previewSpine.html 0 → 100644
View file @ 24e2e305
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>spine预览</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" />
<style>
body,
html {
background-color: #fff;
margin: 0px;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
input {
background: #777777;
border-color: #1890ff;
box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
color: #fff;
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
}
</style>
<script src="../build/fyge.min.js"></script>
</head>
<body>
<div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<div id="anis" style="position: absolute;z-index: 999;top:5%;width: 5%;">
</div>
<div id="skins" style="position: absolute;z-index: 999;top:5%;right:0%;width: 5%;">
</div>
<input type="text" id="key0" value="x" style="position: absolute;z-index: 999;width: 10%;left:35%;top:5%">
<input type="text" id="val0" value="y" style="position: absolute;z-index: 999;width: 10%;right:35%;top:5%">
<script>
window.addEventListener("load", async function () {
//舞台
var stage = new FYGE.Stage(
document.getElementById("canvas"),
750,//设计宽度，按设计搞给的就行
1624,//设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL,
false,
false,
window.devicePixelRatio || 1
);
var text = stage.addChild(new FYGE.TextField());
text.size = 50;
text.textWidth = 750;
text.textAlign = "center";
text.textHeight = stage.stageHeight;
text.verticalAlign = "middle"
text.fillColor = "#999999";
text.text = "拖入一个spi文件或\n三个json,atlas,png文件";
(function loop() {
stage.flush();
FYGE.Tween.flush();
requestAnimationFrame(loop)
})()
var URL = window.webkitURL || window.URL;
var container = document.getElementById("cusEngine");
/*拖拽的目标对象------ document 监听drop 并防止浏览器打开客户端的图片*/
document.ondragover = function (e) {
e.preventDefault(); //只有在ondragover中阻止默认行为才能触发 ondrop 而不是 ondragleave
};
document.ondrop = function (e) {
e.preventDefault(); //阻止 document.ondrop的默认行为 *** 在新窗口中打开拖进的图片
};
/*拖拽的源对象----- 客户端的一张图片 */
/*拖拽目标对象-----div#container 若图片释放在此元素上方，则需要在其中显示*/
container.ondragover = function (e) {
e.preventDefault();
};
container.ondrop = async function (e) {
var files = [];
[].forEach.call(e.dataTransfer.files, function (file) {
files.push(file);
}, false);
if (files.length == 1 && getFile(files, "spi")) {
var src = URL.createObjectURL(files[0]);
//清空
stage.removeAllChildren()
// console.log(files)
//加载
FYGE.loadSpine(
src,
(spineData) => {
creatSpine(spineData)
},
(e) => {
console.log(e)
}
)
}
else if (files.length == 3 &&
getFile(files, "png") &&
getFile(files, "json") &&
getFile(files, "atlas")
) {
//清空
stage.removeAllChildren()
var textures = await new Promise((r) => {
FYGE.loadAtlas(
URL.createObjectURL(getFile(files, "atlas")),
(d) => {
r(d)
},
(e) => { console.log(e) },
URL.createObjectURL(getFile(files, "png"))
)
})
console.log(textures)
FYGE.GlobalLoader.loadJson((s, res) => {
res.textures = textures
creatSpine(res)
},
URL.createObjectURL(getFile(files, "json")),
)
}else{
console.error("文件有误")
}
}
function creatSpine(spineData) {
console.log("spineData:", spineData)
var { width, height, x, y } = spineData.skeleton
var spine = new FYGE.Spine(spineData)
console.log("spine:", spine)
stage.addChild(spine)
spine.position.set(375, 800)
console.log("动画名称：", spine.aniNames)
console.log("皮肤名称：", spine.skinNames)
console.log("位置：", spine.position)
createAnis(spine)
createSkins(spine)
//添加输入框xy
}
})
function getFile(files, str) {
for (var i = 0; i < files.length; i++) {
if (files[i].name.indexOf("." + str) > 0) {//先这样判断，当然不保险
return files[i]
}
}
return null
}
function createAnis(spine) {
var arr = spine.aniNames;
var div = document.getElementById("anis");
div.innerHTML = ""
for (var i = 0; i < arr.length; i++) {
let ani = arr[i];
var o = document.createElement("input");
o.type = "button";
o.style.margin = "7px";
o.style.minWidth = "50px";
o.value = ani;
o.addEventListener("click", () => {
spine.animationManager.showAni(ani, 0)
});
div.appendChild(o)
}
}
function createSkins(spine) {
var arr = spine.skinNames;
var div = document.getElementById("skins");
div.innerHTML = ""
for (var i = 0; i < arr.length; i++) {
let skin = arr[i];
var o = document.createElement("input");
o.type = "button";
o.style.margin = "7px";
o.style.minWidth = "50px";
o.style.float = "right"
o.value = skin;
o.addEventListener("click", () => {
spine.setSkin(skin)
});
div.appendChild(o)
}
}
</script>
</body>
</html>
\ No newline at end of file
examples/为了ppt.html 0 → 100644
View file @ 24e2e305
<!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>
<script src="//yun.duiba.com.cn/db_games/libs0924/stats.js"></script>
</body>
<script>
window.addEventListener("load", async function () {
//获取canvas
var canvas = document.getElementById("canvas");
canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
//建舞台，定宽适配，会根据实际窗口尺寸上下裁切，所以stage实际y坐标会偏移stage.viewRect.y
var stage = new FYGE.Stage(
canvas,
750,//设计宽度，按设计搞给的就行
1624,//设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL,
);
//监听窗口缩放,按需,一般移动端的不需要
window.addEventListener('resize', () => { stage.resize() });
//鼠标事件
var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener('touchmove', mouseEvent, false);
canvas.addEventListener('touchend', mouseEvent, false);
//pc
canvas.addEventListener("mousedown", mouseEvent, false);
canvas.addEventListener('mousemove', mouseEvent, false);
canvas.addEventListener('mouseup', mouseEvent, false);
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
//场景
// var scene = stage.addChild(new DD("场景", 750, 1624))
// //父1
// var f1 = scene.addChild(new DD("父1", 400, 400))
// f1.position.set(175, 100);
// //子1
// f1.addChild(new DD("子1", 200, 200))
// .position.set(100, 100);
// //父2
// var f2 = scene.addChild(new DD("父2", 400, 400))
// f2.position.set(175, 600)
// //子2
// f2.addChild(new DD("子2", 200, 200))
// .position.set(100, 100);
// //父1要动
// FYGE.Tween.get(f1,{loop:true})
// .to({x:300}, 2000)
// .to({x:175}, 2000)
//好多图
for (var i = 0; i < 20000; i++) {
let a = stage.addChild(FYGE.Sprite.fromUrl("res/11.png"))
.addEventListener(FYGE.Event.ENTER_FRAME, () => {
a.rotation += 3
})
a.scale.set(0.4, 0.4)
a.anchorTexture.set(0.5, 0.5);
a.position.set(Math.random() * 750, Math.random() * 1334)
}
// var arr = [];
// for (var i = 0; i < 1; i++) {
// arr[i] = stage.addChild(FYGE.Sprite.fromUrl("res/img.png"))
// arr[i].position.set(120 * i, 500);
// arr[i].scale.set(0.5)
// }
// stage.addEventListener(FYGE.Event.ENTER_FRAME, () => {
// arr.forEach((a,i) => {
// a.x -= 5;
// if (a.x < -100) {
// a.x = arr[arr.length - 1].x + 1200;
// arr.splice(i,1);
// arr.push(a)
// }
// })
// })
// fly({x:50,y:800},{x:500,y:100},FYGE.Texture.fromUrl("res/img.png"),stage)
// function fly(start, end, texture, container) {
// let range = 200;
// let count = 10;
// while (count--) {
// let spr = container.addChild(new FYGE.Sprite(texture))
// spr.position.set(
// start.x + range * (Math.random() - 0.5),
// start.y + range * (Math.random() - 0.5)
// )
// //y方向匀速
// FYGE.Tween.get(spr)
// .to({ y: end.y }, 1000)
// FYGE.Tween.get(spr)
// .to({ x: end.x }, 1000, FYGE.Ease.quadIn)
// }
// }
}, this);
//循环
loop();
function loop() {
//Tween每帧刷新
FYGE.Tween.flush()
//舞台每帧刷新
stage.flush();
// FYGE.getRequestAnimationFrame()(loop);
requestAnimationFrame(loop)
}
})
//搞个文本加图片类
class DD extends FYGE.Container {
constructor(name, w, h) {
super();
this.addChild(new FYGE.Graphics())
.beginFill(Math.random() * 0xffffff)
.drawRect(0, 0, w, h)
.endFill();
var t = this.addChild(new FYGE.TextField())
t.text = name;
t.position.set(20, 20)
t.size = 50
t.fillColor = "#ff0000"
}
}
</script>
</html>
\ No newline at end of file
package.json
View file @ 24e2e305
{
"name": "fyge",
"version": "2.0.22",
"version": "2.0.23",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"types": "./build/types.d.ts",
......@@ -8,6 +8,7 @@
"scripts": {
"declare": "node scripts/declare.js src/index.ts",
"declare1": "node scripts/declare1.js src/index.ts",
"declare2": "tsc -d --declarationDir types --emitDeclarationOnly",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -w",
......
record.txt
View file @ 24e2e305
......@@ -297,8 +297,21 @@
getCusShader添加参数shadow，parameters添加useShadow和shadowType，相应预处理宏修改，着色器修改 #ifdef USE_SHADOW',
新增着色器ShadowShader
2.0.23 display文件夹里的注释都整理了一边
删除DisplayObject的setParent方法，基本用不到，有用到的用addChild替换
Stage添加参数分辨率resolution，兼容老版不传的情况（外部设置canvas实际尺寸）
Stage onMouseEvent添加标志位，阻止默认事件，阻止冒泡事件
Stage添加方法addWebMouseEvent，不用在外面写鼠标事件，直接调用
Event删除ABORT，START，TIMER，TIMER_COMPLETE事件，添加BLUR，INPUT事件
EditableText的_prompt添加默认值，添加onblur和oninput事件触发
MovieClip修改原先方法updateMask为静态方法drawBezierShape
Bone添加shearX和shearY属性，因为原先的skewX对应-shearY，skewY对应shearX
SpineBoneAniTrack里的skewX相关修改成shearXY
Bone添加updateWorldTransformWith和appliedSelf方法，为了ik，后续考虑优化（现在涉及ik的子级都会多计算一次，考虑不用显示对象，尝试官方的方式）
Spine构造函数传参修改，只需要问题放在数据里了，纹理获取相关修改，clone方法修改
Spine添加ik约束
Spine的findSlot方法变成公共的，为了显示隐藏插槽，这样做不保险，后续考虑优化
新增IkConstraint
......@@ -311,6 +324,10 @@
检查spine变形动画切换不回默认
spine.animationManager.showAni有闪烁，考虑调用下返回值的rectify
每个类的update方法的super.update()，注意触发循环帧的时序
FloatDisplay的updateStyle方法并不会在父级visible改变时修改，考虑如何解决
3d的灯光应该遍历整个scene
......
scripts/mergeSpine.js
View file @ 24e2e305
......@@ -10,7 +10,9 @@ var inUrl = arg[0];
var img = fs.readFileSync(inUrl + ".png")
var atlas = fs.readFileSync(inUrl + ".atlas")
var json = fs.readFileSync(inUrl + ".json")
// var json = fs.readFileSync(inUrl + ".json")
//为了能压缩格式化过的json
var json = Buffer.from(JSON.stringify(JSON.parse(fs.readFileSync(inUrl + ".json"))), "utf-8")
// console.log(img.byteLength)
// console.log(atlas.byteLength)
......
src/2d/const.ts
View file @ 24e2e305
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.22";
export const VERSION = "2.0.23";
/**
......
src/2d/display/Container.ts
View file @ 24e2e305
......@@ -24,7 +24,7 @@ export default class Container extends DisplayObject {
children: DisplayObject[];
/**
* 特殊用处
* 特殊用处，部分继承可能会用，暂时没地方用到，考虑废弃
* 缓存的Container的updateTransform
*/
containerUpdateTransform;
......@@ -36,16 +36,15 @@ export default class Container extends DisplayObject {
}
/**
* children改变时
* @private
* children改变时触发，暂时没地方用到，考虑废弃
* @param {number} index
*/
onChildrenChange(index) {
/* empty */
onChildrenChange(index:number) {
//子类需要时重写
}
/**
* 添加child
* 添加child，在所有子级的最上层
* @param {DisplayObject} child
* @return {DisplayObject}
*/
......@@ -65,9 +64,9 @@ export default class Container extends DisplayObject {
/**
* 在相应index处添加child
* @param {DisplayObject} child - The child to add
* @param {number} index - The index to place the child in
* @return {DisplayObject} The child that was added.
* @param {DisplayObject} child - 被添加的子级
* @param {number} index - 需要放置的索引位置，指已存在子级的索引，一般用于往子级之间插入
* @return {DisplayObject} 返回自身
*/
addChildAt<T extends DisplayObject>(child: T, index: number): T {
if (!child) return;
......@@ -118,8 +117,8 @@ export default class Container extends DisplayObject {
/**
* 只用于交换索引
* @param {DisplayObject} child - First display object to swap
* @param {DisplayObject} child2 - Second display object to swap
* @param {DisplayObject} child
* @param {DisplayObject} child2
*/
swapChildren(child1: DisplayObject, child2: DisplayObject) {
if (child1 === child2) {
......@@ -154,8 +153,8 @@ export default class Container extends DisplayObject {
/**
* 获取child的层级索引index
* @param {DisplayObject} child - The DisplayObject instance to identify
* @return {number} The index position of the child display object to identify
* @param {DisplayObject} child - 需要获取索引的子级
* @return {number} children内的索引
*/
getChildIndex(child: DisplayObject): number {
const index = this.children.indexOf(child);
......@@ -167,7 +166,7 @@ export default class Container extends DisplayObject {
}
/**
* 设置child的层级
* 设置child的层级索引
* @param {DisplayObject} child
* @param {number} index
*/
......@@ -176,9 +175,9 @@ export default class Container extends DisplayObject {
}
/**
* Returns the child at the specified index
* @param {number} index - The index to get the child at
* @return {DisplayObject} The child at the given index, if any.
* 根据索引获取子级对象
* @param {number} index
* @return {DisplayObject}
*/
getChildAt(index: number): DisplayObject {
if (index < 0 || index >= this.children.length) {
......@@ -231,9 +230,9 @@ export default class Container extends DisplayObject {
}
/**
* 在index处移除child
* @param {number} index - The index to get the child from
* @return {DisplayObject} The child that was removed.
* 在index索引处移除子级对象
* @param {number} index
* @return {DisplayObject} 移除的子级对象
*/
removeChildAt(index: number): DisplayObject {
let s = this;
......@@ -280,9 +279,9 @@ export default class Container extends DisplayObject {
}
/**
* 通过索引批量移除child
* @param {number} [beginIndex=0]
* @param {number} [endIndex=this.children.length]
* @returns {DisplayObject[]} List of removed children
* @param {number} [beginIndex=0] 开始索引，包括自己
* @param {number} [endIndex=this.children.length] 结束索引，不包括自己
* @returns {DisplayObject[]} 移除的所有子级数组
*/
removeChildrenAt(beginIndex: number = 0, endIndex: number = this.children.length): DisplayObject[] {
const begin = beginIndex;
......@@ -296,12 +295,12 @@ export default class Container extends DisplayObject {
return [];
}
throw new RangeError('removeChildren: numeric values are outside the acceptable range.');
throw new RangeError('removeChildren: 移除范围有误');
}
/**
* 类比splice方法
* @param beginIndex
* @param count
* 类比数组的splice方法，但是没有第三个参数，不能添加
* @param beginIndex 开始索引
* @param count 移除数量
*/
spliceChildren<T extends DisplayObject>(beginIndex?: number, count?: number): T[] {
let removed = this.children.splice(beginIndex, count);
......@@ -336,7 +335,7 @@ export default class Container extends DisplayObject {
//children遍历计算
for (let i = 0, j = this.children.length; i < j; ++i) {
const child = this.children[i];
if (child.visible) {
if (child.visible) {//为了优化性能，但是会出现，不显示的对象，获取到的位置等信息是错误的
child.updateTransform();
}
}
......@@ -375,7 +374,7 @@ export default class Container extends DisplayObject {
}
Rectangle.createFromRects(this._bounds, child._bounds);
}
//到时处理mask和filterArea
//到时处理filterArea
else if (child.filterArea) {
}
......@@ -421,7 +420,7 @@ export default class Container extends DisplayObject {
/**
* webgl渲染
* @param {WebglRenderer} renderer - The renderer
* @param {WebglRenderer} renderer - 渲染器
*/
renderWebGL(renderer: WebglRenderer) {
//不可见，全局透明度为0，或者 不渲染，直接return
......@@ -446,7 +445,7 @@ export default class Container extends DisplayObject {
* 高级渲染方法
*
* @private
* @param {WebGLRenderer} renderer - The renderer
* @param {WebGLRenderer} renderer - 渲染器
*/
private renderAdvancedWebGL(renderer: WebglRenderer) {
//之前的批处理刷掉先
......@@ -494,9 +493,9 @@ export default class Container extends DisplayObject {
}
/**
* 自身渲染方式
* 自身webgl渲染方式
* @private
* @param {WebglRenderer} renderer - The renderer
* @param {WebglRenderer} renderer - 渲染器
*/
protected _renderWebGL(renderer: WebglRenderer) {
//自身绘制方法
......@@ -504,7 +503,7 @@ export default class Container extends DisplayObject {
/**
* canvas渲染方式
* @param {CanvasRenderer} renderer - The renderer
* @param {CanvasRenderer} renderer - 渲染器
*/
renderCanvas(renderer: CanvasRenderer) {
if (!this.visible || this._worldAlpha <= 0 || !this.renderable) {
......@@ -526,8 +525,7 @@ export default class Container extends DisplayObject {
}
/**
* 自身渲染方法
*
* 自身canvas渲染方法
* @private
* @param {CanvasRenderer} renderer - The renderer
*/
......@@ -536,7 +534,7 @@ export default class Container extends DisplayObject {
}
/**
* 更新方法
* 更新方法，注意别覆盖，子类可继承修改
*/
update() {
if (!this.visible) return;
......@@ -570,7 +568,7 @@ export default class Container extends DisplayObject {
}
/**
*
* 销毁方法，也会销毁子级
*/
destroy() {
let s = this;
......@@ -583,8 +581,8 @@ export default class Container extends DisplayObject {
}
/**
* 一般用于获取宽高并设置
* 包括子级的,容器的尽量少用，子类可重写
* 一般用于获取宽高并设置，会修改缩放
* 包括子级的,容器Container的尽量少用，子类可重写
* @member {number}
*/
get width() {
......
src/2d/display/DisplayObject.ts
View file @ 24e2e305
......@@ -56,7 +56,10 @@ export class DisplayObject extends EventDispatcher {
/**
* 用于计算世界bounds，包括自身和子级，一般只在获取宽高时使用，变形后的
*/
protected _bounds: Rectangle
protected _bounds: Rectangle;
/**
* 包围盒有修改用_boundsID++
*/
protected _boundsID: number;
protected _lastBoundsID: number;
/**
......@@ -220,12 +223,10 @@ export class DisplayObject extends EventDispatcher {
}
/**
* 获取全局的bounds，变形后的
* @param {boolean} skipUpdate - setting to true will stop the transforms of the scene graph from
* being updated. This means the calculation returned MAY be out of date BUT will give you a
* nice performance boost
* @param {Rectangle} rect - Optional rectangle to store the result of the bounds calculation
* @return {Rectangle} the rectangular bounding area
* 获取全局的包围盒，变形后的
* @param {boolean} skipUpdate - 是否递归至父级的更新，默认false
* @param {Rectangle} rect - 可选，返回的包围盒数据，不传会用固定临时对象
* @return {Rectangle} 包围盒
*/
getBounds(skipUpdate: boolean = false, rect: Rectangle = DisplayObject.temBounds): Rectangle {
//先把父级的都变换
......@@ -249,8 +250,8 @@ export class DisplayObject extends EventDispatcher {
/**
* 以自身为世界坐标系的本地包围盒
* @param {Rectangle} [rect] - Optional rectangle to store the result of the bounds calculation
* @return {Rectangle} the rectangular bounding area
* @param {Rectangle} rect - 可选，返回的包围盒数据，不传会用固定临时对象
* @return {Rectangle} 包围盒
*/
getLocalBounds(rect: Rectangle = DisplayObject.temBounds): Rectangle {
const transformRef = this.transform;
......@@ -331,7 +332,7 @@ export class DisplayObject extends EventDispatcher {
/**
* webgl渲染
* @param {WebGLRenderer} renderer - The renderer
* @param {WebGLRenderer} renderer - 渲染器
*/
renderWebGL(renderer: any) {
//子类重写
......@@ -339,37 +340,24 @@ export class DisplayObject extends EventDispatcher {
/**
* canvas渲染
* @param {CanvasRenderer} renderer - The renderer
* @param {CanvasRenderer} renderer - 渲染器
*/
renderCanvas(renderer: any) {
//子类重写
}
/**
* 设置父级
* @param {Container} container - The Container to add this DisplayObject to
* @return {Container} The Container that this DisplayObject was added to
*/
setParent(container: any): any {
if (!container || !container.addChild) {
throw new Error('setParent: Argument must be a Container');
}
container.addChild(this);
return container;
}
/**
*根据常规属性 设置矩阵属性，弧度制
* @param {number} [x=0] - The X position
* @param {number} [y=0] - The Y position
* @param {number} [scaleX=1] - The X scale value
* @param {number} [scaleY=1] - The Y scale value
* @param {number} [rotation=0] - The rotation
* @param {number} [skewX=0] - The X skew value
* @param {number} [skewY=0] - The Y skew value
* @param {number} [anchorX=0] - The X anchor value
* @param {number} [anchorY=0] - The Y anchor value
* @return {DisplayObject} The DisplayObject instance
* 根据常规属性，设置矩阵属性，挺少用，自己赋值也完全一样，考虑废弃
* @param {number} [x=0] - 位置x
* @param {number} [y=0] - 位置y
* @param {number} [scaleX=1] - 缩放x
* @param {number} [scaleY=1] - 缩放y
* @param {number} [rotation=0] - 旋转(角度制)
* @param {number} [skewX=0] - 斜切x（弧度制）
* @param {number} [skewY=0] - 斜切y（弧度制）
* @param {number} [anchorX=0] - 锚点x
* @param {number} [anchorY=0] - 锚点y
* @return {DisplayObject} 返回自身
*/
setTransform(
x: number = 0,
......@@ -424,29 +412,42 @@ export class DisplayObject extends EventDispatcher {
}
/**
* 获取透明度，0到1
*/
get alpha(): number {
return this._alpha
}
/**
* 设置透明度，0到1
*/
set alpha(value: number) {
if (this._alpha != value) {
this._alpha = value
//是否有必要设置_worldAlpha是否需要更新，一个乘法基本不耗性能
}
}
/**
* 获取位置x
*/
get x(): number {
return this.position.x;
}
/**
* 设置位置x
*/
set x(value: number) {
this.transform.position.x = value;
}
/**
* 获取位置y
*/
get y(): number {
return this.position.y;
}
/**
* 设置位置y
*/
set y(value: number) {
this.transform.position.y = value;
}
......@@ -481,6 +482,7 @@ export class DisplayObject extends EventDispatcher {
/**
* 设置位置对象
* 传值用于copy，并非赋值，要求传值存在x和y字段
*/
set position(value) {
this.transform.position.copy(value);
......@@ -496,24 +498,33 @@ export class DisplayObject extends EventDispatcher {
/**
* 设置缩放对象
* 传值用于copy，并非赋值，要求传值存在x和y字段
*/
set scale(value) {
this.transform.scale.copy(value);
}
get scaleX() {
/**
* 获取缩放x
*/
get scaleX(): number {
return this.transform.scale.x;
}
set scaleX(value) {
/**
* 设置缩放x
*/
set scaleX(value: number) {
this.transform.scale.x = value;
}
get scaleY() {
/**
* 获取缩放y
*/
get scaleY(): number {
return this.transform.scale.y;
}
set scaleY(value) {
/**
* 设置缩放y
*/
set scaleY(value: number) {
this.transform.scale.y = value;
}
......@@ -524,24 +535,35 @@ export class DisplayObject extends EventDispatcher {
get anchor(): ObservablePoint {
return this.transform.anchor;
}
/**
* 设置锚点对象
* 传值用于copy，并非赋值，要求传值存在x和y字段
*/
set anchor(value) {
this.transform.anchor.copy(value);
}
get anchorX() {
/**
* 获取锚点x
*/
get anchorX(): number {
return this.transform.anchor.x;
}
set anchorX(value) {
/**
* 设置锚点x
*/
set anchorX(value: number) {
this.transform.anchor.x = value;
}
get anchorY() {
/**
* 获取锚点y
*/
get anchorY(): number {
return this.transform.anchor.y;
}
set anchorY(value) {
/**
* 设置锚点y
*/
set anchorY(value: number) {
this.transform.anchor.y = value;
}
......@@ -552,33 +574,36 @@ export class DisplayObject extends EventDispatcher {
get skew(): ObservablePoint {
return this.transform.skew;
}
/**
* 设置斜切对象
* 传值用于copy，并非赋值，要求传值存在x和y字段
*/
set skew(value) {
this.transform.skew.copy(value);
}
/**
* 角度制
* 获取斜切x，角度制
*/
get skewX() {
get skewX(): number {
return this.transform.skew.x * RAD_TO_DEG;
}
/**
* 角度制
* 设置斜切x，角度制
*/
set skewX(value) {
set skewX(value: number) {
this.transform.skew.x = value * DEG_TO_RAD;
}
/**
* 角度制
* 获取斜切y，角度制
*/
get skewY() {
get skewY(): number {
return this.transform.skew.y * RAD_TO_DEG;
}
/**
* 角度制
* 设置斜切y，角度制
*/
set skewY(value) {
set skewY(value: number) {
this.transform.skew.y = value * DEG_TO_RAD;
}
/**
......@@ -590,7 +615,7 @@ export class DisplayObject extends EventDispatcher {
}
/**
* 角度制
* 设置旋转，角度制
*/
set rotation(value: number) {
this.transform.rotation = value * DEG_TO_RAD;
......@@ -669,10 +694,9 @@ export class DisplayObject extends EventDispatcher {
/**
* 更新方法，帧循环的监听事件放在这
* 更新方法，帧循环的监听事件是放在这派发的
*/
public update() {
//监听的
if (this.hasEventListener(Event.ENTER_FRAME)) {
this.dispatchEvent(Event.ENTER_FRAME);
......@@ -681,7 +705,7 @@ export class DisplayObject extends EventDispatcher {
}
/**
* 比用call性能好
* 不会被子集覆盖，部分地方使用
* 不会被子类覆盖，部分地方使用
*/
DisplayObject.prototype.displayObjectUpdateTransform = DisplayObject.prototype.updateTransform;
......
src/2d/display/FloatDisplay.ts
View file @ 24e2e305
......@@ -173,6 +173,7 @@ export class FloatDisplay extends DisplayObject {
}
/**
* 考虑放到stage里，因为父级的visible修改不会调用updateStyle
* @method updateStyle
* @public
* @since 1.1.4
......
src/2d/display/Sprite.ts
View file @ 24e2e305
......@@ -118,7 +118,6 @@ export default class Sprite extends Container {
this._uvs = null;
// call texture setter
this.texture = texture || Texture.EMPTY;
this._vertexData = new Float32Array(8);
......@@ -141,7 +140,6 @@ export default class Sprite extends Container {
/**
* texture更新时触发
*
* @private
*/
protected _onTextureUpdate() {
......@@ -195,7 +193,7 @@ export default class Sprite extends Container {
* 01——23
* | |
* 67——45
* calculates worldTransform * vertices, store it in vertexData
* 计算全局的顶点数据
*/
calculateVertices() {
if (this._transformID === this.transform._worldID && this._textureID === this._texture._updateID) {
......@@ -205,7 +203,6 @@ export default class Sprite extends Container {
this._transformID = this.transform._worldID;
this._textureID = this._texture._updateID;
// set the vertex data
const texture = this._texture;
const wt = this.transform.worldMatrix;
const a = wt.a;
......@@ -260,8 +257,8 @@ export default class Sprite extends Container {
}
/**
* calculates worldTransform * vertices for a non texture with a trim. store it in vertexTrimmedData
* This is used to ensure that the true width and height of a trimmed texture is respected
* 用于trim过的纹理，计算真实顶点位置，
* 因为trim会裁切边缘透明像素，所以直接用orig的尺寸
*/
calculateTrimmedVertices() {
if (!this._vertexTrimmedData) {
......@@ -417,29 +414,33 @@ export default class Sprite extends Container {
/**
* 重写Container父类
* texture的宽度和缩放乘积
* 获取texture的宽度和缩放乘积
* @member {number}
*/
get width() {
get width(): number {
return Math.abs(this.scale.x) * this._texture.orig.width;
}
set width(value) {
/**
* 重写父级
* 根据纹理宽度设置自身缩放x到设置的数值
*/
set width(value: number) {
const s = sign(this.scale.x) || 1;
this.scale.x = s * value / this._texture.orig.width;
this._width = value;
}
/**
* texture的高度和缩放乘积
* 获取texture的高度和缩放乘积
* @member {number}
*/
get height() {
get height(): number {
return Math.abs(this.scale.y) * this._texture.orig.height;
}
set height(value) {
/**
* 根据纹理高度设置自身缩放y到设置的数值
*/
set height(value: number) {
const s = sign(this.scale.y) || 1;
this.scale.y = s * value / this._texture.orig.height;
this._height = value;
......@@ -452,20 +453,25 @@ export default class Sprite extends Container {
get anchorTexture() {
return this._anchorTexture;
}
/**
* 设置贴图锚点，copy方法，只要value存在x、y字段就行
*/
set anchorTexture(value: any) {
this._anchorTexture.copy(value);
}
/**
* 获取纹理
* @member {Texture}
*/
get texture() {
get texture(): Texture {
return this._texture === Texture.EMPTY ? null : this._texture;//考虑是否返回null
}
set texture(value) {
/**
* 设置纹理
*/
set texture(value: Texture) {
if (this._texture === value) {
return;
}
......@@ -492,11 +498,16 @@ export default class Sprite extends Container {
this.updateLocalBoundsSelf();
}
}
get tint() {
/**
* 获取调色
*/
get tint(): number {
return this._tint;
}
set tint(value) {
/**
* 设置调色
*/
set tint(value: number) {
if (value === this._tint) return;
this._tint = value;
this._tintRGB = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16);
......@@ -505,7 +516,8 @@ export default class Sprite extends Container {
//一些静态类方法
/**
* 网络图片
* @param url
* @param url 链接
* @return Sprite实例
*/
static fromUrl(url: string): Sprite {
return new Sprite(Texture.fromUrl(url));
......
src/2d/display/Stage.ts
View file @ 24e2e305
......@@ -160,8 +160,7 @@ export class Stage extends Container {
*/
private _stageCenter: boolean;
/**
* canvas的实际宽高及显示宽高外部自己设定,stage内部不对尺寸做任何修改
* 且需要根据实际尺寸和显示尺寸确定dpi
* 建立舞台
* @param canvas canvas标签
* @param desWidth 舞台设计宽
* @param desHeight 舞台设计高
......@@ -170,6 +169,7 @@ export class Stage extends Container {
* @param renderType 渲染类型,默认canvas
* @param stageCenter 舞台是否根据设计尺寸居中,默认false(左上角置顶)
* @param fixedHeight 是否定高,默认false(定宽)
* @param resolution 分辨率，一般传设备的devicePixelRatio，不传意味着外部自行处理了canvas的实际宽高及显示宽高
*/
public constructor(
canvas: HTMLCanvasElement,
......@@ -179,7 +179,8 @@ export class Stage extends Container {
divHeight: number,
renderType: RENDERER_TYPE = RENDERER_TYPE.CANVAS,
stageCenter: boolean = false,
fixedHeight: boolean = false
fixedHeight: boolean = false,
resolution?: number
) {
super();
this.canvas = canvas;
......@@ -193,6 +194,24 @@ export class Stage extends Container {
s.divWidth = divWidth;
s.divHeight = divHeight;
if (!resolution) {//为了兼容以前的活动，以后删了
//以前的活动外部设置了canvas的实际尺寸和显示尺寸
console.warn("尝试设置分辨率，内部会根据分辨率设置画布的实际尺寸");
//这里设置_dpi
s._dpi = canvas.width / divWidth;
} else {
//canvas实际尺寸处理
s._dpi = resolution;
var cWidth = divWidth * resolution, cHeight = divHeight * resolution;
if (getEnv() == "tb") {//淘宝小程序环境有个白边，所以加点像素
cWidth += resolution;
cHeight += resolution;
}
canvas.width = cWidth;
canvas.height = cHeight;
}
// console.log("%c ", "background: url(http://5b0988e595225.cdn.sohucs.com/images/20180315/d41842ad9b5443d3854a480ea49f3b09.gif) no-repeat center;padding-left:80px;padding-bottom: 80px;border-radius:50%;")
//打印个版本号
console.log(
......@@ -237,7 +256,7 @@ export class Stage extends Container {
//到时修改这个放到上面,因为渲染器也用到了canvas的尺寸,
//注意淘宝小程序环境必须先设置canvas的尺寸再getContext,类似CanvasRenderTarget构造函数里的问题
//分辨率,
s._dpi = canvas.width / divWidth;
// s._dpi = canvas.width / divWidth;//这里不需要了
s._stageCenter = stageCenter;
s._scaleMode = fixedHeight ? "fixedHeight" : "fixedWidth";
//设置缩放及视窗
......@@ -389,11 +408,19 @@ export class Stage extends Container {
touchmove: "onMouseMove",
touchend: "onMouseUp",
//tbMini
touchStart: "onMouseDown",//小程序返回的时间名是驼峰的
touchStart: "onMouseDown",//小程序返回的事件名是驼峰的
touchMove: "onMouseMove",
touchEnd: "onMouseUp"
};
/**
* 舞台的鼠标事件是否要阻止默认事件，默认false
* 对于同时写了监听pc和移动端的，
*/
public webMouseEventPreventDefault: boolean;
/**
* 舞台的鼠标事件是否要阻止事件冒泡，默认false
*/
public webMouseEventStopPropagation: boolean;
/**
* 无多指，无拖动
* @method onMouseEvent
......@@ -401,8 +428,11 @@ export class Stage extends Container {
* @private
*/
onMouseEvent(e: any): void {
//@ts-ignore
if (getEnv() == "web") e.preventDefault();
//如果是web环境，且设置了阻止默认事件
if (getEnv() == "web") {
if (this.webMouseEventPreventDefault) e.preventDefault();
if (this.webMouseEventStopPropagation) e.stopPropagation();
}
let s: Stage = this;
//检查mouse或touch事件是否有，如果有的话，就触发事件函数
if (EventDispatcher._totalMEC > 0) {
......@@ -629,7 +659,29 @@ export class Stage extends Container {
}
}
};
/**
* 给舞台绑定canvas标签的鼠标代理事件（web环境下需要显示对象的鼠标事件时调用）
* 自行调用，内部不主动调用，因为比如淘宝小程序环境方式不一致，需要用onMouseEvent
*/
addWebMouseEvent() {
//非网页环境直接return
if (getEnv() !== "web") return;
var canvas = this.canvas;
var mouseEvent = this.onMouseEvent.bind(this);
if (osType == "pc") {
canvas.addEventListener("mousedown", mouseEvent, false);
canvas.addEventListener('mousemove', mouseEvent, false);
canvas.addEventListener('mouseup', mouseEvent, false);
} else {
canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener('touchmove', mouseEvent, false);
canvas.addEventListener('touchend', mouseEvent, false);
}
}
/**
* 直接修改了，用视窗，
* 一般用于滤镜等等，对于舞台，超出viewPort的肯定不显示，没必要测量（后续考虑也测量，万一测量出的更小呢）
*/
public getBounds(): Rectangle {
return this.viewRect;
}
......
src/2d/events/Event.ts
View file @ 24e2e305
......@@ -142,43 +142,25 @@ export class Event extends HashObject {
*/
public static ERROR: string = "onError";
/**
* 中断事件
* 输入框失去焦点事件
* @Event
* @property ABORT
* @property BLUR
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static ABORT: string = "onAbort";
public static BLUR: string = "onBlur";
/**
* 开始事件
* 输入框输入事件
* @Event
* @property START
* @property INPUT
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static START: string = "onStart";
/**
* 定时器触发事件
* @property TIMER
* @static
* @since 1.0.9
* @public
* @type {string}
*/
public static TIMER: string = "onTimer";
/**
* 定时器完成事件
* @property TIMER_COMPLETE
* @since 1.0.9
* @static
* @public
* @type {string}
*/
public static TIMER_COMPLETE: string = "onTimerComplete";
public static INPUT: string = "onInput";
/**
* 事件类型名
* @property type
......@@ -220,6 +202,7 @@ export class Event extends HashObject {
/**
* 防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。
* 冒泡和捕获都有用
* @method stopPropagation
* @public
* @since 2.0.0
......
src/2d/filter/blur/BlurFilter.ts
View file @ 24e2e305
......@@ -2,6 +2,7 @@
import BlurXFilter from './BlurXFilter';
import BlurYFilter from './BlurYFilter';
import Filter from '../Filter';
import { BLEND_MODES } from '../../const';
/**
* The BlurFilter applies a Gaussian blur to an object.
......@@ -114,11 +115,11 @@ export default class BlurFilter extends Filter {
* @member {number}
* @default BLEND_MODES.NORMAL
*/
get blendMode() {
get blendMode(): BLEND_MODES {
return this.blurYFilter.blendMode;
}
set blendMode(value) {
set blendMode(value: BLEND_MODES) {
this.blurYFilter.blendMode = value;
}
}
src/2d/text/EditableText.ts
View file @ 24e2e305
import { TextField } from "./TextField";
import { MouseEvent } from "../events";
import { Event, MouseEvent } from "../events";
import { osType } from "../const";
......@@ -9,7 +9,7 @@ import { osType } from "../const";
export class EditableText extends TextField {
htmlElement: any;
private _prompt: string = "";
private _prompt: string = "请输入";
/**
* 未输入文本时显示的文字
*/
......@@ -157,10 +157,18 @@ export class EditableText extends TextField {
document.body.appendChild(htmlElement)
}
//添加
htmlElement.onblur = function () {
htmlElement.onblur = function (e) {
if (osType == "ios") {
//部分app里的webview有兼容问题用window.scrollTo(0, 0)
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
}
//抛出事件
if (s.hasEventListener(Event.BLUR)) s.dispatchEvent(Event.BLUR, e)
};
//输入事件
htmlElement.oninput = function (e) {
//抛出原生的input的事件
if (s.hasEventListener(Event.INPUT)) s.dispatchEvent(Event.INPUT, e)
}
}
}
src/2d/ui/LottieNew.ts
View file @ 24e2e305
......@@ -55,11 +55,11 @@ export interface KeyAniData {
to: number[],
ti: number[],
h: number//暂时用是否存在判断。有标识瞬切，不缓动，待测试
h: number,//暂时用是否存在判断。有标识瞬切，不缓动，待测试
//后面记录的东西
bezierData?//to存在时的贝塞尔数据
fnc?//贝塞尔函数，可能是数组，
bezierData?,//to存在时的贝塞尔数据
fnc?,//贝塞尔函数，可能是数组，
}
......@@ -95,6 +95,17 @@ class LottieBaseTrack extends HashObject implements IAnimationTrack {
time = Math.min(time, this.times[this.times.length - 1].t);
//
}
/**
* 因为有些表达式
* @param time
*/
protected cacTrueTime(time: number) {
if (this.loop && this.loop.loopInOrOut) {
time = (this.loop.loopInOrOut == 1 ? loopIn : loopOut)(this.loop.type, this.loop.duration, this.times, time)
}
return time;
}
protected cacValue(time: number) {
if (time <= this.times[0].t) return this.times[0].s;
if (time >= this.times[this.times.length - 1].t) return this.times[this.times.length - 1].s;
......
src/2d/ui/MovieClip.ts
View file @ 24e2e305
......@@ -3,7 +3,7 @@ import Texture from "../texture/Texture";
import Sprite from "../display/Sprite";
import { Event } from "../events/Event";
import { TextureCache, createImage, createCanvas } from "../utils";
import { TextureCache, createImage, createCanvas, rgb2hex } from "../utils";
import { RAD_TO_DEG } from "../const";
import { Matrix } from "../math";
import { BaseTexture } from "../texture";
......@@ -622,7 +622,7 @@ export class MovieClip extends Container {
//@ts-ignore ，需要记载child里
if (!child.mask) child.mask = child.addChild(child["cusMask"]);
let mask = child.mask;
this.updateMask(mask, frame.maskPath);
MovieClip.drawBezierShape(mask, frame.maskPath);
} else if (child.mask) {
//@ts-ignore移除
child.removeChild(child.mask)
......@@ -714,16 +714,93 @@ export class MovieClip extends Container {
this.rawData = null;
super.destroy();
}
private updateMask(mask: Shape, data: { _d: string, _style: any, _transform: any }) {
/**
* 用源数据拷贝一份，用相应参数
* @param frames 源数据
* @param x 偏移x，默认0
* @param y 偏移y，默认0
* @param scaleX 相对缩放x，默认1
* @param scaleY 相对缩放y，默认1
* @param rotation 相对旋转,角度制，默认0
* @param anchorX 相对锚点x，默认0
* @param anchorY 相对锚点y，默认0
*/
static deepCopyFrames(
frames,
x: number = 0,
y: number = 0,
scaleX: number = 1,
scaleY: number = 1,
rotation: number = 0,
anchorX: number = 0,
anchorY: number = 0
) {
var cf = [];
rotation *= Math.PI / 180;
//@ts-ignore
var lt: Matrix = {};
lt.a = Math.cos(rotation) * scaleX;
lt.b = Math.sin(rotation) * scaleX;
lt.c = -Math.sin(rotation) * scaleY;
lt.d = Math.cos(rotation) * scaleY;
lt.tx = x + anchorX - ((anchorX * lt.a) + (anchorY * lt.c));
lt.ty = y + anchorY - ((anchorX * lt.b) + (anchorY * lt.d));
for (var j = 0; j < frames.length; j++) {
var frame = frames[j];
const pt = frame.transform;
var f = { alpha: 0, transform: null };
//透明度
f.alpha = frame.alpha;
f.transform = {
a: (lt.a * pt.a) + (lt.b * pt.c),
b: (lt.a * pt.b) + (lt.b * pt.d),
c: (lt.c * pt.a) + (lt.d * pt.c),
d: (lt.c * pt.b) + (lt.d * pt.d),
tx: (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx,
ty: (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty,
};
cf.push(f)
}
return cf;
}
/**
* 根据数据获取遮罩，或更新遮罩，暂时用于遮罩，以后可能用于矢量图
* @param mask
* @param data
* @param useStyle 是否应用样式，一般用于遮罩时不需要，默认false
* @returns
*/
static drawBezierShape(mask: Shape = new Shape, data: { _d: string, _styles: any, _transform: any }, useStyle: boolean = false) {
mask.clear();
const styles = data._styles;
if (useStyle && styles) {//待测试，两个都有的时候是否能正常绘制，毕竟都执行了beginPath
if (styles.stroke) {
mask.beginStroke(
rgb2hex(styles.stroke),
styles.strokeWidth || undefined,
styles.lineCap || undefined,
styles.lineJoin || undefined,
styles.miterLimit || undefined,
styles.stroke[3]
)
}
if (styles.fill) {
mask.beginFill(rgb2hex(styles.fill), styles.fill[3])
}
// if (styles && styles.lineDash) {
// ctx.setLineDash(styles.lineDash);
// }
} else {
//简单绘制
mask.beginFill();
}
//会用到的，再说TODO
if (data._transform) {
//用于修改所有路径的矩阵数据
mask.transform.localMatrix.copy(data._transform)
mask.transform._parentID = -1;
}
let currentPoint = { x: 0, y: 0, x1: 0, y1: 0, x2: 0, y2: 0 }
//暂时不需要绘制的东西
mask.beginFill();
let currentPoint = { x: 0, y: 0, x1: 0, y1: 0, x2: 0, y2: 0 };
const validMethods = 'MLHVCSQRZmlhvcsqrz'
const d = data._d.replace(/([a-zA-Z])/g, '|||$1 ').replace(/,/g, ' ');
d.split('|||').forEach(segment => {
......@@ -847,56 +924,15 @@ export class MovieClip extends Container {
}
}
})
//暂时没有其他绘制，直接endFill
if (useStyle && styles) {//待测试，两者是否都能执行
if (styles.fill) mask.endFill();
if (styles.stroke) mask.endStroke();
} else {
//简单，直接绘制
mask.endFill();
}
/**
* 用源数据拷贝一份，用相应参数
* @param frames 源数据
* @param x 偏移x，默认0
* @param y 偏移y，默认0
* @param scaleX 相对缩放x，默认1
* @param scaleY 相对缩放y，默认1
* @param rotation 相对旋转,角度制，默认0
* @param anchorX 相对锚点x，默认0
* @param anchorY 相对锚点y，默认0
*/
static deepCopyFrames(
frames,
x: number = 0,
y: number = 0,
scaleX: number = 1,
scaleY: number = 1,
rotation: number = 0,
anchorX: number = 0,
anchorY: number = 0
) {
var cf = [];
rotation *= Math.PI / 180;
//@ts-ignore
var lt: Matrix = {};
lt.a = Math.cos(rotation) * scaleX;
lt.b = Math.sin(rotation) * scaleX;
lt.c = -Math.sin(rotation) * scaleY;
lt.d = Math.cos(rotation) * scaleY;
lt.tx = x + anchorX - ((anchorX * lt.a) + (anchorY * lt.c));
lt.ty = y + anchorY - ((anchorX * lt.b) + (anchorY * lt.d));
for (var j = 0; j < frames.length; j++) {
var frame = frames[j];
const pt = frame.transform;
var f = { alpha: 0, transform: null };
//透明度
f.alpha = frame.alpha;
f.transform = {
a: (lt.a * pt.a) + (lt.b * pt.c),
b: (lt.a * pt.b) + (lt.b * pt.d),
c: (lt.c * pt.a) + (lt.d * pt.c),
d: (lt.c * pt.b) + (lt.d * pt.d),
tx: (lt.tx * pt.a) + (lt.ty * pt.c) + pt.tx,
ty: (lt.tx * pt.b) + (lt.ty * pt.d) + pt.ty,
};
cf.push(f)
}
return cf;
//返回
return mask;
}
}
\ No newline at end of file
src/2d/ui/ScrollPage.ts
View file @ 24e2e305
......@@ -145,7 +145,7 @@ export class ScrollPage extends Container {
public isSpringBack: boolean = true;
/**
* 构造函数
* 注意滚动内容在view里加
* @method ScrollPage
* @param {number} vW 可视区域宽
* @param {number} vH 可视区域高
......
src/glCore/index.ts
View file @ 24e2e305
// export { default as GroupD8 } from './GroupD8';
//基本用了pixi的glCore，灵活性还有点问题，以后有机会改
export { GLTexture } from './GLTexture';
export { GLBuffer } from './GLBuffer';
......
src/spine/Bone.ts
View file @ 24e2e305
This diff is collapsed.
src/spine/Spine.ts
View file @ 24e2e305
This diff is collapsed.
src/spine/animation/SpineBoneAniTrack.ts
View file @ 24e2e305
This diff is collapsed.
src/spine/constraint/IkConstraint.ts 0 → 100644
View file @ 24e2e305
This diff is collapsed.
src/spine/loadSpine.ts
View file @ 24e2e305
This diff is collapsed.
src/tween/index.ts
View file @ 24e2e305
//Tween基本是照搬egret的，用习惯了
export * from "./Ease"
......
tsConfig.json
View file @ 24e2e305
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