Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
0f49ca95
U
uni-app
项目概览
DCloud
/
uni-app
3 个月 前同步成功
通知
725
Star
38705
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0f49ca95
编写于
5月 14, 2021
作者:
fxy060608
浏览文件
操作
浏览文件
下载
差异文件
chore: merge
上级
cfdd26fd
9d50654f
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
220 addition
and
72 deletion
+220
-72
packages/uni-api/src/service/context/canvas.ts
packages/uni-api/src/service/context/canvas.ts
+37
-48
packages/uni-api/src/service/ui/createAnimation.ts
packages/uni-api/src/service/ui/createAnimation.ts
+153
-0
packages/uni-h5/dist/uni-h5.es.js
packages/uni-h5/dist/uni-h5.es.js
+30
-24
未找到文件。
packages/uni-api/src/service/context/canvas.ts
浏览文件 @
0f49ca95
...
...
@@ -352,9 +352,11 @@ const defaultState = {
fontFamily
:
'
sans-serif
'
,
}
type
ActionsItemType
=
string
|
number
|
boolean
|
undefined
|
Array
<
number
>
type
ActionsItemData
=
Array
<
ActionsItemType
>
type
ActionsItem
=
{
method
:
string
data
:
A
rray
<
string
|
number
|
boolean
>
data
:
A
ctionsItemData
|
Array
<
ActionsItem
>
}
type
DefaultState
=
typeof
defaultState
type
Callback
=
(
result
:
any
)
=>
void
|
undefined
...
...
@@ -793,21 +795,20 @@ export class CanvasContext implements UniApp.CanvasContext {
;[...
methods1
,
...
methods2
].
forEach
(
function
(
method
)
{
function
get
(
method
:
string
)
{
// @ts-ignore
let
_this
=
this
as
CanvasContext
switch
(
method
)
{
case
'
fill
'
:
case
'
stroke
'
:
return
function
()
{
// @ts-ignore
this
.
actions
.
push
({
_this
.
actions
.
push
({
method
:
method
+
'
Path
'
,
// @ts-ignore
data
:
[...
this
.
path
],
data
:
[...
_this
.
path
],
})
}
case
'
fillRect
'
:
return
function
(
x
:
number
,
y
:
number
,
width
:
number
,
height
:
number
)
{
// @ts-ignore
this
.
actions
.
push
({
_this
.
actions
.
push
({
method
:
'
fillPath
'
,
data
:
[
{
...
...
@@ -819,8 +820,7 @@ export class CanvasContext implements UniApp.CanvasContext {
}
case
'
strokeRect
'
:
return
function
(
x
:
number
,
y
:
number
,
width
:
number
,
height
:
number
)
{
// @ts-ignore
this
.
actions
.
push
({
_this
.
actions
.
push
({
method
:
'
strokePath
'
,
data
:
[
{
...
...
@@ -837,8 +837,7 @@ export class CanvasContext implements UniApp.CanvasContext {
if
(
typeof
maxWidth
===
'
number
'
)
{
data
.
push
(
maxWidth
)
}
// @ts-ignore
this
.
actions
.
push
({
_this
.
actions
.
push
({
method
,
data
,
})
...
...
@@ -865,7 +864,7 @@ export class CanvasContext implements UniApp.CanvasContext {
dWidth
=
undefined
dHeight
=
undefined
}
var
d
ata
let
data
:
ActionsItemD
ata
function
isNumber
(
e
:
any
)
{
return
typeof
e
===
'
number
'
...
...
@@ -889,16 +888,14 @@ export class CanvasContext implements UniApp.CanvasContext {
:
isNumber
(
sWidth
)
&&
isNumber
(
sHeight
)
?
[
imageResource
,
sx
,
sy
,
sWidth
,
sHeight
]
:
[
imageResource
,
sx
,
sy
]
// @ts-ignore
this
.
actions
.
push
({
_this
.
actions
.
push
({
method
,
data
,
})
}
default
:
return
function
(...
data
:
any
)
{
// @ts-ignore
this
.
actions
.
push
({
return
function
(...
data
:
ActionsItemData
)
{
_this
.
actions
.
push
({
method
,
data
,
})
...
...
@@ -909,29 +906,32 @@ export class CanvasContext implements UniApp.CanvasContext {
})
methods3
.
forEach
(
function
(
method
)
{
function
get
(
method
:
string
)
{
// @ts-ignore
let
_this
=
this
as
CanvasContext
switch
(
method
)
{
case
'
setFillStyle
'
:
case
'
setStrokeStyle
'
:
return
function
(
color
:
string
|
Data
)
{
if
(
typeof
color
!==
'
object
'
)
{
// @ts-ignore
this
.
actions
.
push
({
_this
.
actions
.
push
({
method
,
data
:
[
'
normal
'
,
checkColor
(
color
)],
})
}
else
{
// @ts-ignore
this
.
actions
.
push
({
_this
.
actions
.
push
({
method
,
data
:
[
color
.
type
,
color
.
data
,
color
.
colorStop
],
data
:
[
color
.
type
as
ActionsItemType
,
color
.
data
as
ActionsItemType
,
color
.
colorStop
as
ActionsItemType
,
],
})
}
}
case
'
setGlobalAlpha
'
:
return
function
(
alpha
:
number
)
{
alpha
=
Math
.
floor
(
255
*
parseFloat
(
alpha
as
unknown
as
string
))
// @ts-ignore
this
.
actions
.
push
({
_this
.
actions
.
push
({
method
,
data
:
[
alpha
],
})
...
...
@@ -943,52 +943,41 @@ methods3.forEach(function (method) {
blur
:
number
,
color
:
string
)
{
color
=
checkColor
(
color
)
as
any
// @ts-ignore
this
.
actions
.
push
({
let
_color
=
checkColor
(
color
)
_this
.
actions
.
push
({
method
,
data
:
[
offsetX
,
offsetY
,
blur
,
color
],
})
// @ts-ignore
this
.
state
.
shadowBlur
=
blur
// @ts-ignore
this
.
state
.
shadowColor
=
color
// @ts-ignore
this
.
state
.
shadowOffsetX
=
offsetX
// @ts-ignore
this
.
state
.
shadowOffsetY
=
offsetY
_this
.
state
.
shadowBlur
=
blur
_this
.
state
.
shadowColor
=
_color
_this
.
state
.
shadowOffsetX
=
offsetX
_this
.
state
.
shadowOffsetY
=
offsetY
}
case
'
setLineDash
'
:
return
function
(
pattern
:
Array
<
number
>
|
undefined
,
offset
:
number
)
{
pattern
=
pattern
||
[
0
,
0
]
offset
=
offset
||
0
// @ts-ignore
this
.
actions
.
push
({
_this
.
actions
.
push
({
method
,
data
:
[
pattern
,
offset
],
})
// @ts-ignore
this
.
state
.
lineDash
=
pattern
_this
.
state
.
lineDash
=
pattern
}
case
'
setFontSize
'
:
return
function
(
fontSize
:
number
)
{
// @ts-ignore
this
.
state
.
font
=
this
.
state
.
font
.
replace
(
_this
.
state
.
font
=
_this
.
state
.
font
.
replace
(
/
\d
+
\.?\d
*px/
,
fontSize
+
'
px
'
)
// @ts-ignore
this
.
state
.
fontSize
=
fontSize
// @ts-ignore
this
.
actions
.
push
({
_this
.
state
.
fontSize
=
fontSize
_this
.
actions
.
push
({
method
,
data
:
[
fontSize
],
})
}
default
:
return
function
(...
data
:
any
)
{
// @ts-ignore
this
.
actions
.
push
({
return
function
(...
data
:
ActionsItemData
)
{
_this
.
actions
.
push
({
method
,
data
,
})
...
...
packages/uni-api/src/service/ui/createAnimation.ts
0 → 100644
浏览文件 @
0f49ca95
const
defaultOption
:
Option
=
{
duration
:
400
,
timingFunction
:
'
linear
'
,
delay
:
0
,
transformOrigin
:
'
50% 50% 0
'
,
}
type
Option
=
UniApp
.
CreateAnimationOptions
type
AnimatesArgs
=
string
[]
type
Action
=
{
animates
:
string
[]
option
:
ReturnType
<
MPAnimation
[
'
_getOption
'
]
>
}
class
MPAnimation
implements
UniApp
.
Animation
{
actions
:
Array
<
Action
>
currentTransform
:
Data
currentStepAnimates
:
Array
<
{
type
:
string
;
args
:
AnimatesArgs
}
>
option
:
Option
constructor
(
option
:
Option
)
{
this
.
actions
=
[]
this
.
currentTransform
=
{}
this
.
currentStepAnimates
=
[]
this
.
option
=
Object
.
assign
({},
defaultOption
,
option
)
}
_getOption
(
option
:
Option
)
{
const
_option
:
{
transition
:
Option
transformOrigin
:
Option
[
'
transformOrigin
'
]
}
=
{
transition
:
Object
.
assign
({},
this
.
option
,
option
),
transformOrigin
:
''
,
}
_option
.
transformOrigin
=
_option
.
transition
.
transformOrigin
delete
_option
.
transition
.
transformOrigin
return
_option
}
_pushAnimates
(
type
:
string
,
args
:
AnimatesArgs
)
{
this
.
currentStepAnimates
.
push
({
type
:
type
,
args
:
args
,
})
}
_converType
(
type
:
string
)
{
return
type
.
replace
(
/
[
A-Z
]
/g
,
(
text
)
=>
{
return
`-
${
text
.
toLowerCase
()}
`
})
}
_getValue
(
value
:
string
|
number
)
{
return
typeof
value
===
'
number
'
?
`
${
value
}
px`
:
value
}
export
()
{
const
actions
=
this
.
actions
this
.
actions
=
[]
return
{
actions
,
}
}
step
(
option
:
Option
)
{
this
.
currentStepAnimates
.
forEach
((
animate
)
=>
{
if
(
animate
.
type
!==
'
style
'
)
{
this
.
currentTransform
[
animate
.
type
]
=
animate
}
else
{
this
.
currentTransform
[
`
${
animate
.
type
}
.
${
animate
.
args
[
0
]}
`
]
=
animate
}
})
this
.
actions
.
push
({
animates
:
Object
.
values
(
this
.
currentTransform
)
as
Action
[
'
animates
'
],
option
:
this
.
_getOption
(
option
),
})
this
.
currentStepAnimates
=
[]
return
this
}
'
matrix
'
:
UniApp
.
Animation
[
'
matrix
'
]
'
matrix3d
'
:
UniApp
.
Animation
[
'
matrix3d
'
]
'
rotate
'
:
UniApp
.
Animation
[
'
rotate
'
]
'
rotate3d
'
:
UniApp
.
Animation
[
'
rotate3d
'
]
'
rotateX
'
:
UniApp
.
Animation
[
'
rotateX
'
]
'
rotateY
'
:
UniApp
.
Animation
[
'
rotateY
'
]
'
rotateZ
'
:
UniApp
.
Animation
[
'
rotateZ
'
]
'
scale
'
:
UniApp
.
Animation
[
'
scale
'
]
'
scale3d
'
:
UniApp
.
Animation
[
'
scale3d
'
]
'
scaleX
'
:
UniApp
.
Animation
[
'
scaleX
'
]
'
scaleY
'
:
UniApp
.
Animation
[
'
scaleY
'
]
'
scaleZ
'
:
UniApp
.
Animation
[
'
scaleZ
'
]
'
skew
'
:
UniApp
.
Animation
[
'
skew
'
]
'
skewX
'
:
UniApp
.
Animation
[
'
skewX
'
]
'
skewY
'
:
UniApp
.
Animation
[
'
skewY
'
]
'
translate
'
:
UniApp
.
Animation
[
'
translate
'
]
'
translate3d
'
:
UniApp
.
Animation
[
'
translate3d
'
]
'
translateX
'
:
UniApp
.
Animation
[
'
translateX
'
]
'
translateY
'
:
UniApp
.
Animation
[
'
translateY
'
]
'
translateZ
'
:
UniApp
.
Animation
[
'
translateZ
'
]
'
opacity
'
:
UniApp
.
Animation
[
'
opacity
'
]
'
backgroundColor
'
:
UniApp
.
Animation
[
'
backgroundColor
'
]
'
width
'
:
UniApp
.
Animation
[
'
width
'
]
'
height
'
:
UniApp
.
Animation
[
'
height
'
]
'
right
'
:
UniApp
.
Animation
[
'
right
'
]
'
top
'
:
UniApp
.
Animation
[
'
top
'
]
'
bottom
'
:
UniApp
.
Animation
[
'
bottom
'
]
'
left
'
:
UniApp
.
Animation
[
'
left
'
]
}
const
animateTypes1
=
[
'
matrix
'
,
'
matrix3d
'
,
'
rotate
'
,
'
rotate3d
'
,
'
rotateX
'
,
'
rotateY
'
,
'
rotateZ
'
,
'
scale
'
,
'
scale3d
'
,
'
scaleX
'
,
'
scaleY
'
,
'
scaleZ
'
,
'
skew
'
,
'
skewX
'
,
'
skewY
'
,
'
translate
'
,
'
translate3d
'
,
'
translateX
'
,
'
translateY
'
,
'
translateZ
'
,
]
const
animateTypes2
=
[
'
opacity
'
,
'
backgroundColor
'
]
const
animateTypes3
=
[
'
width
'
,
'
height
'
,
'
left
'
,
'
right
'
,
'
top
'
,
'
bottom
'
]
animateTypes1
.
concat
(
animateTypes2
,
animateTypes3
).
forEach
((
type
)
=>
{
;(
MPAnimation
.
prototype
as
any
)[
type
]
=
function
(...
args
:
AnimatesArgs
)
{
let
_this
=
this
as
MPAnimation
if
(
animateTypes2
.
concat
(
animateTypes3
).
includes
(
type
))
{
_this
.
_pushAnimates
(
'
style
'
,
[
_this
.
_converType
(
type
),
animateTypes3
.
includes
(
type
)
?
_this
.
_getValue
(
args
[
0
])
:
args
[
0
],
])
}
else
{
_this
.
_pushAnimates
(
type
,
args
)
}
return
this
}
})
export
function
createAnimation
(
option
:
Option
)
{
return
new
MPAnimation
(
option
)
}
packages/uni-h5/dist/uni-h5.es.js
浏览文件 @
0f49ca95
...
...
@@ -2762,18 +2762,19 @@ class CanvasContext {
}
[...methods1, ...methods2].forEach(function(method) {
function get(method2) {
let _this = this;
switch (method2) {
case "fill":
case "stroke":
return function() {
this.actions.push({
_
this.actions.push({
method: method2 + "Path",
data: [...this.path]
data: [...
_
this.path]
});
};
case "fillRect":
return function(x, y, width, height) {
this.actions.push({
_
this.actions.push({
method: "fillPath",
data: [
{
...
...
@@ -2785,7 +2786,7 @@ class CanvasContext {
};
case "strokeRect":
return function(x, y, width, height) {
this.actions.push({
_
this.actions.push({
method: "strokePath",
data: [
{
...
...
@@ -2802,7 +2803,7 @@ class CanvasContext {
if (typeof maxWidth === "number") {
data.push(maxWidth);
}
this.actions.push({
_
this.actions.push({
method: method2,
data
});
...
...
@@ -2819,7 +2820,7 @@ class CanvasContext {
dWidth = void 0;
dHeight = void 0;
}
var
data;
let
data;
function isNumber(e2) {
return typeof e2 === "number";
}
...
...
@@ -2834,14 +2835,14 @@ class CanvasContext {
dWidth,
dHeight
] : isNumber(sWidth) && isNumber(sHeight) ? [imageResource, sx, sy, sWidth, sHeight] : [imageResource, sx, sy];
this.actions.push({
_
this.actions.push({
method: method2,
data
});
};
default:
return function(...data) {
this.actions.push({
_
this.actions.push({
method: method2,
data
});
...
...
@@ -2852,64 +2853,69 @@ class CanvasContext {
});
methods3.forEach(function(method) {
function get(method2) {
let _this = this;
switch (method2) {
case "setFillStyle":
case "setStrokeStyle":
return function(color) {
if (typeof color !== "object") {
this.actions.push({
_
this.actions.push({
method: method2,
data: ["normal", checkColor(color)]
});
} else {
this.actions.push({
_
this.actions.push({
method: method2,
data: [color.type, color.data, color.colorStop]
data: [
color.type,
color.data,
color.colorStop
]
});
}
};
case "setGlobalAlpha":
return function(alpha) {
alpha = Math.floor(255 * parseFloat(alpha));
this.actions.push({
_
this.actions.push({
method: method2,
data: [alpha]
});
};
case "setShadow":
return function(offsetX, offsetY, blur, color) {
color = checkColor(color);
this.actions.push({
let _
color = checkColor(color);
_
this.actions.push({
method: method2,
data: [offsetX, offsetY, blur, color]
});
this.state.shadowBlur = blur;
this.state.shadowColor =
color;
this.state.shadowOffsetX = offsetX;
this.state.shadowOffsetY = offsetY;
_
this.state.shadowBlur = blur;
_this.state.shadowColor = _
color;
_
this.state.shadowOffsetX = offsetX;
_
this.state.shadowOffsetY = offsetY;
};
case "setLineDash":
return function(pattern, offset) {
pattern = pattern || [0, 0];
offset = offset || 0;
this.actions.push({
_
this.actions.push({
method: method2,
data: [pattern, offset]
});
this.state.lineDash = pattern;
_
this.state.lineDash = pattern;
};
case "setFontSize":
return function(fontSize) {
this.state.font =
this.state.font.replace(/\d+\.?\d*px/, fontSize + "px");
this.state.fontSize = fontSize;
this.actions.push({
_this.state.font = _
this.state.font.replace(/\d+\.?\d*px/, fontSize + "px");
_
this.state.fontSize = fontSize;
_
this.actions.push({
method: method2,
data: [fontSize]
});
};
default:
return function(...data) {
this.actions.push({
_
this.actions.push({
method: method2,
data
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录