Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
F
fyge_for_tb
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
王剑峰
fyge_for_tb
Commits
8ec760c5
Commit
8ec760c5
authored
Feb 25, 2022
by
wangjianfeng.yz
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
2.0.62
parent
db243daa
Changes
16
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
16 changed files
with
359 additions
and
163 deletions
+359
-163
.npmignore
.npmignore
+2
-1
FYGE.d.ts
build/FYGE.d.ts
+88
-10
fyge.esm.js
build/fyge.esm.js
+2
-2
fyge.esm.js.map
build/fyge.esm.js.map
+1
-1
fyge.min.js
build/fyge.min.js
+2
-2
fyge.min.js.map
build/fyge.min.js.map
+1
-1
types.d.ts
build/types.d.ts
+88
-10
cc.js
examples/cc.js
+156
-49
package.json
package.json
+1
-1
record.txt
record.txt
+10
-0
const.ts
src/2d/const.ts
+1
-1
AdjustmentFilter.ts
src/2d/filter/adjustment/AdjustmentFilter.ts
+2
-2
AdvancedBloomFilter.ts
src/2d/filter/advanced-bloom/AdvancedBloomFilter.ts
+2
-2
index.ts
src/2d/filter/index.ts
+2
-0
bezierCurveControlPoint.ts
src/2d/graphics/utils/bezierCurveControlPoint.ts
+0
-57
index.ts
src/2d/graphics/utils/index.ts
+1
-24
No files found.
.npmignore
View file @
8ec760c5
...
...
@@ -17,4 +17,5 @@ record.txt
test
examples
docs
adapters
\ No newline at end of file
adapters
testThree
\ No newline at end of file
build/FYGE.d.ts
View file @
8ec760c5
declare
namespace
FYGE
{
export
const
VERSION
=
"2.0.6
0
"
;
declare
namespace
FYGE
{
export
const
VERSION
=
"2.0.6
2
"
;
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
{
/**
* 混色模式
...
...
build/fyge.esm.js
View file @
8ec760c5
This diff is collapsed.
Click to expand it.
build/fyge.esm.js.map
View file @
8ec760c5
This diff is collapsed.
Click to expand it.
build/fyge.min.js
View file @
8ec760c5
This diff is collapsed.
Click to expand it.
build/fyge.min.js.map
View file @
8ec760c5
This diff is collapsed.
Click to expand it.
build/types.d.ts
View file @
8ec760c5
export
const
VERSION
=
"2.0.6
0
"
;
export
const
VERSION
=
"2.0.6
2
"
;
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
{
/**
* 混色模式
...
...
examples/cc.js
View file @
8ec760c5
...
...
@@ -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
package.json
View file @
8ec760c5
{
"name"
:
"fyge"
,
"version"
:
"2.0.6
0
"
,
"version"
:
"2.0.6
2
"
,
"description"
:
"canvas渲染引擎"
,
"main"
:
"./build/fyge.min.js"
,
"module"
:
"./build/fyge.esm.js"
,
...
...
record.txt
View file @
8ec760c5
...
...
@@ -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会有问题
...
...
src/2d/const.ts
View file @
8ec760c5
...
...
@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export
const
VERSION
=
"2.0.6
0
"
;
export
const
VERSION
=
"2.0.6
2
"
;
/**
...
...
src/2d/filter/adjustment/AdjustmentFilter.ts
View file @
8ec760c5
...
...
@@ -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
];
});
...
...
src/2d/filter/advanced-bloom/AdvancedBloomFilter.ts
View file @
8ec760c5
...
...
@@ -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
);
...
...
src/2d/filter/index.ts
View file @
8ec760c5
...
...
@@ -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
src/2d/graphics/utils/bezierCurveControlPoint.ts
deleted
100644 → 0
View file @
db243daa
/**
* 返回{ 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
src/2d/graphics/utils/index.ts
View file @
8ec760c5
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
;
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment