Skip to content

Commit d9d576a

Browse files
nangelinanangelina
committed
see pr: niklasvh#3110 
1 parent ac80490 commit d9d576a

File tree

8 files changed

+63
-55
lines changed

8 files changed

+63
-55
lines changed

‎examples/blue-box.png‎

27.1 KB
Loading

‎examples/demo2.html‎

Lines changed: 8 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,17 @@
33
<head>
44
<title></title>
55
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6-
<style>
7-
.feedback-overlay-black{
8-
background-color:#000;
9-
opacity:0.5;
10-
position:absolute;
11-
top:0;
12-
left:0;
13-
width:100%;
14-
height:100%;
15-
margin:0;
16-
}
17-
18-
</style>
19-
20-
<style>
21-
div{
22-
padding:20px;
23-
margin:0 auto;
24-
border:5px solid black;
25-
}
26-
27-
h1{
28-
border-bottom:2px solid white;
29-
}
30-
31-
h2{
32-
background: #efefef;
33-
padding:10px;
34-
}
35-
36-
37-
</style>
6+
<link rel="stylesheet" href="./index.css">
387
</head>
398
<body>
40-
<div style="background:red;">
41-
<div style="background:green;">
42-
<div style="background:blue;border-color:white;">
43-
<div style="background:yellow;"><div style="background:orange;"><h1>Heading</h1>
44-
Text that isn't wrapped in anything.
45-
<p>Followed by some text wrapped in a <b>&lt;p&gt; paragraph.</b> </p>
46-
Maybe add a <a href="#">link</a> or a different style of <a href="#" style="background:white;" id="highlight">link with a highlight</a>.
47-
<hr />
48-
<h2>More content</h2>
49-
<div style="width:10px;height:10px;border-width:10px;padding:0;">a</div>
50-
</div></div>
51-
9+
<div class="first-box">
10+
asd
11+
<div class="second-box">
12+
xxx
13+
<div class="third-box">
14+
asx
15+
</div>
5216
</div>
53-
54-
</div>
5517
</div>
5618
<script type="text/javascript" src="../dist/html2canvas.js"></script>
5719
<script type="text/javascript">

‎examples/index.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.first-box {
2+
width: 500px;
3+
height: 500px;
4+
background-color: green;
5+
background: url('./blue-box.png') no-repeat;
6+
/* background-size: contain; */
7+
/* background-position: 150px 15px; */
8+
/* text-shadow: 5px 5px #558ABB; */
9+
box-shadow: 10px 5px 5px 1px rgb(255, 0, 0);
10+
}

‎examples/index.less‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.first-box{
2+
width: 500px;
3+
height: 500px;
4+
background-color: green;
5+
box-shadow: 10px 5px 5px 1px red;
6+
background-size: cover;
7+
// .second-box {
8+
// width: 300px;
9+
// height: 300px;
10+
// background-color: green;
11+
// .third-box {
12+
// width: 100px;
13+
// height: 100px;
14+
// background-color: red;
15+
// }
16+
// }
17+
}

‎examples/record.png‎

46.7 KB
Loading

‎src/render/canvas/canvas-renderer.ts‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {ElementContainer, FLAGS} from '../../dom/element-container';
44
import {BORDER_STYLE} from '../../css/property-descriptors/border-style';
55
import {CSSParsedDeclaration} from '../../css';
66
import {TextContainer} from '../../dom/text-container';
7-
import {Path, transformPath} from '../path';
7+
import {Path, transformPath, reversePath} from '../path';
88
import {BACKGROUND_CLIP} from '../../css/property-descriptors/background-clip';
99
import {BoundCurves, calculateBorderBoxPath, calculateContentBoxPath, calculatePaddingBoxPath} from '../bound-curves';
1010
import {BezierCurve, isBezierCurve} from '../bezier-curve';
@@ -523,12 +523,16 @@ export class CanvasRenderer extends Renderer {
523523

524524
mask(paths: Path[]): void {
525525
this.ctx.beginPath();
526+
this.ctx.save();
527+
// reset transform to identity
528+
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
526529
this.ctx.moveTo(0, 0);
527530
this.ctx.lineTo(this.canvas.width, 0);
528531
this.ctx.lineTo(this.canvas.width, this.canvas.height);
529532
this.ctx.lineTo(0, this.canvas.height);
530533
this.ctx.lineTo(0, 0);
531-
this.formatPath(paths.slice(0).reverse());
534+
this.ctx.restore();
535+
this.formatPath(reversePath(paths));
532536
this.ctx.closePath();
533537
}
534538

@@ -730,8 +734,8 @@ export class CanvasRenderer extends Renderer {
730734
const maskOffset = shadow.inset ? 0 : MASK_OFFSET;
731735
const shadowPaintingArea = transformPath(
732736
borderBoxArea,
733-
-maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number,
734-
(shadow.inset ? 1 : -1) * shadow.spread.number,
737+
shadow.offsetX.number - maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number,
738+
shadow.offsetY.number + (shadow.inset ? 1 : -1) * shadow.spread.number,
735739
shadow.spread.number * (shadow.inset ? -2 : 2),
736740
shadow.spread.number * (shadow.inset ? -2 : 2)
737741
);
@@ -746,12 +750,14 @@ export class CanvasRenderer extends Renderer {
746750
this.path(shadowPaintingArea);
747751
}
748752

749-
this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset;
750-
this.ctx.shadowOffsetY = shadow.offsetY.number;
753+
this.ctx.shadowOffsetX = maskOffset;
754+
this.ctx.shadowOffsetY = 0;
751755
this.ctx.shadowColor = asString(shadow.color);
752756
this.ctx.shadowBlur = shadow.blur.number;
753-
this.ctx.fillStyle = shadow.inset ? asString(shadow.color) : 'rgba(0,0,0,1)';
754-
757+
this.ctx.fillStyle = asString(shadow.color);
758+
if (shadow.blur.number) {
759+
this.ctx.filter = `blur(${shadow.blur.number}px)`;
760+
}
755761
this.ctx.fill();
756762
this.ctx.restore();
757763
});

‎src/render/path.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import {BezierCurve} from './bezier-curve';
22
import {Vector} from './vector';
3-
export const enum PathType {
3+
export enum PathType {
44
VECTOR = 0,
55
BEZIER_CURVE = 1
66
}
77

88
export interface IPath {
99
type: PathType;
1010
add(deltaX: number, deltaY: number): IPath;
11+
reverse(): IPath;
1112
}
1213

1314
export const equalPath = (a: Path[], b: Path[]): boolean => {
@@ -34,4 +35,13 @@ export const transformPath = (path: Path[], deltaX: number, deltaY: number, delt
3435
});
3536
};
3637

38+
export const reversePath = (path: Path[]): Path[] => {
39+
return path
40+
.slice(0)
41+
.reverse()
42+
.map((point) => {
43+
return point.reverse();
44+
});
45+
};
46+
3747
export type Path = Vector | BezierCurve;

‎src/render/vector.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ export class Vector implements IPath {
1414
add(deltaX: number, deltaY: number): Vector {
1515
return new Vector(this.x + deltaX, this.y + deltaY);
1616
}
17+
reverse(): Vector {
18+
return this;
19+
}
1720
}
1821

1922
export const isVector = (path: Path): path is Vector => path.type === PathType.VECTOR;

0 commit comments

Comments
 (0)