Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
H
html-shot
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
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
劳工
html-shot
Commits
57be8669
Commit
57be8669
authored
Jan 12, 2021
by
wjf
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
l
parent
15c5f20c
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
155 additions
and
149 deletions
+155
-149
toCanvas.ts
src/toCanvas.ts
+155
-149
No files found.
src/toCanvas.ts
View file @
57be8669
...
@@ -35,6 +35,9 @@ interface INodeData {
...
@@ -35,6 +35,9 @@ interface INodeData {
fontWeight
?:
string
,
//文本粗细
fontWeight
?:
string
,
//文本粗细
wordWrap
?:
"break-word"
|
null
wordWrap
?:
"break-word"
|
null
textAlign
?:
"center"
|
"left"
|
"right"
textAlign
?:
"center"
|
"left"
|
"right"
fontStyle
?:
"normal"
|
"italic"
|
"oblique"
}
}
export
interface
RenderOptions
{
export
interface
RenderOptions
{
...
@@ -50,9 +53,9 @@ export interface RenderOptions {
...
@@ -50,9 +53,9 @@ export interface RenderOptions {
* @return Promise<HTMLCanvasElement | string>
* @return Promise<HTMLCanvasElement | string>
*/
*/
export
async
function
toCanvas
(
data
:
ICData
,
options
:
RenderOptions
=
{},
callback
?:
(
canvas
:
HTMLCanvasElement
)
=>
void
):
Promise
<
HTMLCanvasElement
|
string
>
{
export
async
function
toCanvas
(
data
:
ICData
,
options
:
RenderOptions
=
{},
callback
?:
(
canvas
:
HTMLCanvasElement
)
=>
void
):
Promise
<
HTMLCanvasElement
|
string
>
{
const
{
type
:
exportType
=
'png'
,
quality
=
0.7
}
=
options
;
const
{
type
:
exportType
=
'png'
,
quality
=
0.7
}
=
options
;
const
{
nodes
,
width
,
height
}
=
data
;
const
{
nodes
,
width
,
height
}
=
data
;
let
canvas
=
document
.
createElement
(
"canvas"
);
let
canvas
=
document
.
createElement
(
"canvas"
);
canvas
.
width
=
width
;
canvas
.
width
=
width
;
canvas
.
height
=
height
;
canvas
.
height
=
height
;
...
@@ -103,7 +106,7 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
...
@@ -103,7 +106,7 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
* @param ctx
* @param ctx
*/
*/
function
drawImage
(
data
:
INodeData
,
ctx
:
CanvasRenderingContext2D
)
{
function
drawImage
(
data
:
INodeData
,
ctx
:
CanvasRenderingContext2D
)
{
const
{
x
,
y
,
img
,
width
,
height
,
borderRadius
}
=
data
;
const
{
x
,
y
,
img
,
width
,
height
,
borderRadius
}
=
data
;
if
(
borderRadius
)
{
//有圆角,画遮罩,暂时只管一个
if
(
borderRadius
)
{
//有圆角,画遮罩,暂时只管一个
ctx
.
save
();
ctx
.
save
();
let
max
=
(
width
<
height
?
width
:
height
)
/
2
;
let
max
=
(
width
<
height
?
width
:
height
)
/
2
;
...
@@ -147,6 +150,7 @@ function drawText(data: INodeData, ctx: CanvasRenderingContext2D) {
...
@@ -147,6 +150,7 @@ function drawText(data: INodeData, ctx: CanvasRenderingContext2D) {
color
,
color
,
fontSize
,
fontSize
,
fontWeight
,
fontWeight
,
fontStyle
,
wordWrap
,
wordWrap
,
textAlign
textAlign
}
=
data
;
}
=
data
;
...
@@ -154,6 +158,8 @@ function drawText(data: INodeData, ctx: CanvasRenderingContext2D) {
...
@@ -154,6 +158,8 @@ function drawText(data: INodeData, ctx: CanvasRenderingContext2D) {
font
+=
" Arial"
;
//字体没有
font
+=
" Arial"
;
//字体没有
//font-weight:bold;font-style:italic;
//font-weight:bold;font-style:italic;
if
(
fontWeight
)
font
=
fontWeight
+
" "
+
font
;
if
(
fontWeight
)
font
=
fontWeight
+
" "
+
font
;
if
(
fontStyle
)
font
=
fontStyle
+
" "
+
font
;
ctx
.
font
=
font
;
ctx
.
font
=
font
;
ctx
.
textBaseline
=
"top"
;
ctx
.
textBaseline
=
"top"
;
ctx
.
fillStyle
=
color
;
ctx
.
fillStyle
=
color
;
...
...
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