Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
genary
uni-app
提交
ee17d765
U
uni-app
项目概览
genary
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
ee17d765
编写于
8月 16, 2021
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: canvas createPattern
上级
1b4aa27e
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
56 addition
and
57 deletion
+56
-57
packages/uni-api/src/service/context/canvas.ts
packages/uni-api/src/service/context/canvas.ts
+6
-4
packages/uni-components/src/components/canvas/index.tsx
packages/uni-components/src/components/canvas/index.tsx
+50
-53
未找到文件。
packages/uni-api/src/service/context/canvas.ts
浏览文件 @
ee17d765
...
@@ -313,12 +313,14 @@ class CanvasGradient {
...
@@ -313,12 +313,14 @@ class CanvasGradient {
}
}
}
}
class
Pattern
{
class
Pattern
{
image
:
string
type
:
string
repetition
:
string
data
:
string
colorStop
:
string
constructor
(
image
:
string
,
repetition
:
string
)
{
constructor
(
image
:
string
,
repetition
:
string
)
{
this
.
image
=
image
this
.
type
=
'
pattern
'
this
.
repetition
=
repetition
this
.
data
=
image
this
.
colorStop
=
repetition
}
}
}
}
class
TextMetrics
{
class
TextMetrics
{
...
...
packages/uni-components/src/components/canvas/index.tsx
浏览文件 @
ee17d765
...
@@ -213,10 +213,10 @@ function useMethods(
...
@@ -213,10 +213,10 @@ function useMethods(
}
=
{}
}
=
{}
function
_resize
()
{
function
_resize
()
{
var
canvas
=
canvasRef
.
value
!
let
canvas
=
canvasRef
.
value
!
if
(
canvas
.
width
>
0
&&
canvas
.
height
>
0
)
{
if
(
canvas
.
width
>
0
&&
canvas
.
height
>
0
)
{
var
context
=
canvas
.
getContext
(
'
2d
'
)
!
let
context
=
canvas
.
getContext
(
'
2d
'
)
!
var
imageData
=
context
.
getImageData
(
0
,
0
,
canvas
.
width
,
canvas
.
height
)
let
imageData
=
context
.
getImageData
(
0
,
0
,
canvas
.
width
,
canvas
.
height
)
wrapper
(
canvas
)
wrapper
(
canvas
)
context
.
putImageData
(
imageData
,
0
,
0
)
context
.
putImageData
(
imageData
,
0
,
0
)
}
else
{
}
else
{
...
@@ -240,8 +240,8 @@ function useMethods(
...
@@ -240,8 +240,8 @@ function useMethods(
_actionsDefer
.
push
([
actions
,
reserve
])
_actionsDefer
.
push
([
actions
,
reserve
])
return
return
}
}
var
canvas
=
canvasRef
.
value
!
let
canvas
=
canvasRef
.
value
!
var
c2d
=
canvas
.
getContext
(
'
2d
'
)
!
let
c2d
=
canvas
.
getContext
(
'
2d
'
)
!
if
(
!
reserve
)
{
if
(
!
reserve
)
{
c2d
.
fillStyle
=
'
#000000
'
c2d
.
fillStyle
=
'
#000000
'
c2d
.
strokeStyle
=
'
#000000
'
c2d
.
strokeStyle
=
'
#000000
'
...
@@ -260,36 +260,39 @@ function useMethods(
...
@@ -260,36 +260,39 @@ function useMethods(
>
>
const
action
=
actions
[
index
]
const
action
=
actions
[
index
]
let
method
=
action
.
method
let
method
=
action
.
method
const
data
=
action
.
data
as
Array
<
string
|
LinearGradient
|
MultipleArray
>
const
data
=
action
.
data
const
actionType
=
data
[
0
]
if
(
/^set/
.
test
(
method
)
&&
method
!==
'
setTransform
'
)
{
if
(
/^set/
.
test
(
method
)
&&
method
!==
'
setTransform
'
)
{
const
method1
=
method
[
3
].
toLowerCase
()
+
method
.
slice
(
4
)
const
method1
=
method
[
3
].
toLowerCase
()
+
method
.
slice
(
4
)
let
color
:
CanvasGradient
|
string
let
color
:
CanvasGradient
|
string
if
(
method1
===
'
fillStyle
'
||
method1
===
'
strokeStyle
'
)
{
if
(
method1
===
'
fillStyle
'
||
method1
===
'
strokeStyle
'
)
{
if
(
data
[
0
]
===
'
normal
'
)
{
if
(
actionType
===
'
normal
'
)
{
color
=
resolveColor
(
data
[
1
]
as
number
[])
color
=
resolveColor
(
data
[
1
]
as
number
[])
}
else
if
(
data
[
0
]
===
'
linear
'
)
{
}
else
if
(
actionType
===
'
linear
'
)
{
const
LinearGradient
=
c2d
.
createLinearGradient
(
const
LinearGradient
=
c2d
.
createLinearGradient
(
...(
data
[
1
]
as
LinearGradient
)
...(
data
[
1
]
as
LinearGradient
)
)
)
;(
data
[
2
]
as
MultipleArray
).
forEach
(
function
(
data2
)
{
;(
data
[
2
]
as
unknown
as
MultipleArray
).
forEach
(
function
(
data2
)
{
const
offset
=
data2
[
0
]
as
number
const
offset
=
data2
[
0
]
as
number
const
color
=
resolveColor
(
data2
[
1
]
as
number
[])
const
color
=
resolveColor
(
data2
[
1
]
as
number
[])
LinearGradient
.
addColorStop
(
offset
,
color
)
LinearGradient
.
addColorStop
(
offset
,
color
)
})
})
color
=
LinearGradient
color
=
LinearGradient
}
else
if
(
data
[
0
]
===
'
radial
'
)
{
}
else
if
(
actionType
===
'
radial
'
)
{
const
x
=
data
[
1
][
0
]
as
number
let
_data
=
data
[
1
]
as
number
[]
const
y
=
data
[
1
][
1
]
as
number
const
x
=
_data
[
0
]
const
r
=
data
[
1
][
2
]
as
number
const
y
=
_data
[
1
]
const
r
=
_data
[
2
]
const
LinearGradient
=
c2d
.
createRadialGradient
(
x
,
y
,
0
,
x
,
y
,
r
)
const
LinearGradient
=
c2d
.
createRadialGradient
(
x
,
y
,
0
,
x
,
y
,
r
)
// @ts-ignore
;(
data
[
2
]
as
unknown
as
[
number
,
number
[]][]).
forEach
(
function
(
data
[
2
].
forEach
(
function
(
data2
)
{
data2
)
{
const
offset
=
data2
[
0
]
const
offset
=
data2
[
0
]
const
color
=
resolveColor
(
data2
[
1
])
const
color
=
resolveColor
(
data2
[
1
])
LinearGradient
.
addColorStop
(
offset
,
color
)
LinearGradient
.
addColorStop
(
offset
,
color
)
})
})
color
=
LinearGradient
color
=
LinearGradient
}
else
if
(
data
[
0
]
===
'
pattern
'
)
{
}
else
if
(
actionType
===
'
pattern
'
)
{
const
loaded
=
checkImageLoaded
(
const
loaded
=
checkImageLoaded
(
data
[
1
]
as
string
,
data
[
1
]
as
string
,
actions
.
slice
(
index
+
1
),
actions
.
slice
(
index
+
1
),
...
@@ -307,60 +310,54 @@ function useMethods(
...
@@ -307,60 +310,54 @@ function useMethods(
}
}
c2d
[
method1
]
=
color
!
c2d
[
method1
]
=
color
!
}
else
if
(
method1
===
'
globalAlpha
'
)
{
}
else
if
(
method1
===
'
globalAlpha
'
)
{
c2d
[
method1
]
=
Number
(
data
[
0
]
)
/
255
c2d
[
method1
]
=
Number
(
actionType
)
/
255
}
else
if
(
method1
===
'
shadow
'
)
{
}
else
if
(
method1
===
'
shadow
'
)
{
var
_
=
[
let
shadowArray
=
[
'
shadowOffsetX
'
,
'
shadowOffsetX
'
,
'
shadowOffsetY
'
,
'
shadowOffsetY
'
,
'
shadowBlur
'
,
'
shadowBlur
'
,
'
shadowColor
'
,
'
shadowColor
'
,
]
]
data
.
forEach
(
function
(
color_
,
method_
)
{
data
.
forEach
(
function
(
color_
,
method_
)
{
// @ts-ignore
;(
c2d
as
any
)[
shadowArray
[
method_
]]
=
c2d
[
_
[
method_
]]
=
shadowArray
[
method_
]
===
'
shadowColor
'
// @ts-ignore
?
resolveColor
(
color_
as
number
[])
_
[
method_
]
===
'
shadowColor
'
?
resolveColor
(
color_
)
:
color_
:
color_
})
})
}
else
if
(
method1
===
'
fontSize
'
)
{
}
else
if
(
method1
===
'
fontSize
'
)
{
// @ts-ignore
const
font
=
(
c2d
as
any
).
__font__
||
c2d
.
font
const
font
=
c2d
.
__font__
||
c2d
.
font
;(
c2d
as
any
).
__font__
=
c2d
.
font
=
font
.
replace
(
// @ts-ignore
/
\d
+
\.?\d
*px/
,
c2d
.
__font__
=
c2d
.
font
=
font
.
replace
(
/
\d
+
\.?\d
*px/
,
data
[
0
]
+
'
px
'
)
actionType
+
'
px
'
)
}
else
if
(
method1
===
'
lineDash
'
)
{
}
else
if
(
method1
===
'
lineDash
'
)
{
// @ts-ignore
c2d
.
setLineDash
(
actionType
as
number
[])
c2d
.
setLineDash
(
data
[
0
])
c2d
.
lineDashOffset
=
(
data
[
1
]
as
number
)
||
0
// @ts-ignore
c2d
.
lineDashOffset
=
data
[
1
]
||
0
}
else
if
(
method1
===
'
textBaseline
'
)
{
}
else
if
(
method1
===
'
textBaseline
'
)
{
if
(
data
[
0
]
===
'
normal
'
)
{
if
(
actionType
===
'
normal
'
)
{
data
[
0
]
=
'
alphabetic
'
data
[
0
]
=
'
alphabetic
'
}
}
// @ts-ignore
;(
c2d
as
any
)[
method1
]
=
actionType
c2d
[
method1
]
=
data
[
0
]
}
else
if
(
method1
===
'
font
'
)
{
}
else
if
(
method1
===
'
font
'
)
{
// @ts-ignore
;(
c2d
as
any
).
__font__
=
c2d
.
font
=
actionType
as
string
c2d
.
__font__
=
c2d
.
font
=
data
[
0
]
}
else
{
}
else
{
// @ts-ignore
;(
c2d
as
any
)[
method1
]
=
actionType
c2d
[
method1
]
=
data
[
0
]
}
}
}
else
if
(
method
===
'
fillPath
'
||
method
===
'
strokePath
'
)
{
}
else
if
(
method
===
'
fillPath
'
||
method
===
'
strokePath
'
)
{
method
=
method
.
replace
(
/Path/
,
''
)
method
=
method
.
replace
(
/Path/
,
''
)
c2d
.
beginPath
()
c2d
.
beginPath
()
data
.
forEach
(
function
(
data_
)
{
;(
data
as
Actions
).
forEach
(
function
(
data_
)
{
// @ts-ignore
;(
c2d
as
any
)[
data_
.
method
].
apply
(
c2d
,
data_
.
data
)
c2d
[
data_
.
method
].
apply
(
c2d
,
data_
.
data
)
})
})
// @ts-ignore
;(
c2d
as
any
)[
method
]()
c2d
[
method
]()
}
else
if
(
method
===
'
fillText
'
)
{
}
else
if
(
method
===
'
fillText
'
)
{
// @ts-ignore
// @ts-ignore
c2d
.
fillText
.
apply
(
c2d
,
data
)
c2d
.
fillText
.
apply
(
c2d
,
data
)
}
else
if
(
method
===
'
drawImage
'
)
{
}
else
if
(
method
===
'
drawImage
'
)
{
var
A
=
(
function
()
{
let
drawImage
=
(
function
()
{
var
dataArray
=
[...
data
]
let
dataArray
=
[...
data
]
var
url
=
dataArray
[
0
]
as
string
let
url
=
dataArray
[
0
]
as
string
var
otherData
=
dataArray
.
slice
(
1
)
let
otherData
=
dataArray
.
slice
(
1
)
_images
=
_images
||
{}
_images
=
_images
||
{}
if
(
if
(
checkImageLoaded
(
checkImageLoaded
(
...
@@ -384,7 +381,7 @@ function useMethods(
...
@@ -384,7 +381,7 @@ function useMethods(
)
)
return
'
break
'
return
'
break
'
})()
})()
if
(
A
===
'
break
'
)
{
if
(
drawImage
===
'
break
'
)
{
break
break
}
}
}
else
{
}
else
{
...
@@ -408,9 +405,9 @@ function useMethods(
...
@@ -408,9 +405,9 @@ function useMethods(
}
}
function
preloadImage
(
actions
:
Actions
)
{
function
preloadImage
(
actions
:
Actions
)
{
actions
.
forEach
(
function
(
action
)
{
actions
.
forEach
(
function
(
action
)
{
var
method
=
action
.
method
let
method
=
action
.
method
var
data
=
action
.
data
let
data
=
action
.
data
var
src
=
''
let
src
=
''
if
(
method
===
'
drawImage
'
)
{
if
(
method
===
'
drawImage
'
)
{
src
=
data
[
0
]
as
string
src
=
data
[
0
]
as
string
src
=
$getRealPath
(
src
)
src
=
$getRealPath
(
src
)
...
@@ -458,7 +455,7 @@ function useMethods(
...
@@ -458,7 +455,7 @@ function useMethods(
resolve
:
(
res
:
any
)
=>
void
,
resolve
:
(
res
:
any
)
=>
void
,
fn
:
(
a
:
CanvasImageSource
)
=>
void
fn
:
(
a
:
CanvasImageSource
)
=>
void
)
{
)
{
var
image
=
_images
[
src
]
let
image
=
_images
[
src
]
if
(
image
.
ready
)
{
if
(
image
.
ready
)
{
fn
(
image
)
fn
(
image
)
return
true
return
true
...
@@ -469,9 +466,9 @@ function useMethods(
...
@@ -469,9 +466,9 @@ function useMethods(
image
.
ready
=
true
image
.
ready
=
true
fn
(
image
)
fn
(
image
)
actionsWaiting
.
value
=
false
actionsWaiting
.
value
=
false
var
actions
=
_actionsDefer
.
slice
(
0
)
let
actions
=
_actionsDefer
.
slice
(
0
)
_actionsDefer
=
[]
_actionsDefer
=
[]
for
(
var
action
=
actions
.
shift
();
action
;
)
{
for
(
let
action
=
actions
.
shift
();
action
;
)
{
actionsChanged
(
actionsChanged
(
{
{
actions
:
action
[
0
],
actions
:
action
[
0
],
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录