mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Implement visibility css prop

Browse Source
This commit is contained in:
MoyuScript 2017-08-03 20:28:39 +08:00
parent 32642682af
commit 12232dfe5a
4 changed files with 123 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/CanvasRenderer.js
View File

@ -48,9 +48,11 @@ export default class CanvasRenderer {
}
renderNode(container: NodeContainer) {
if (container.isVisible()) {
this.renderNodeBackgroundAndBorders(container);
this.renderNodeContent(container);
}
}
renderNodeContent(container: NodeContainer) {
this.ctx.save();
@ -242,6 +244,7 @@ export default class CanvasRenderer {
}
renderStack(stack: StackingContext) {
if (stack.container.isVisible()) {
this.ctx.globalAlpha = stack.getOpacity();
const transform = stack.container.style.transform;
if (transform !== null) {
@ -307,6 +310,7 @@ export default class CanvasRenderer {
this.ctx.restore();
}
}
}
render(stack: StackingContext): Promise<HTMLCanvasElement> {
this.ctx.scale(this.options.scale, this.options.scale);

10
src/NodeContainer.js
View File

@ -13,6 +13,7 @@ import type {Position} from './parsing/position';
import type {TextTransform} from './parsing/textTransform';
import type {TextDecoration} from './parsing/textDecoration';
import type {Transform} from './parsing/transform';
import type {Visibility} from './parsing/visibility';
import type {zIndex} from './parsing/zIndex';
import type {Bounds, BoundCurves, Path} from './Bounds';
@ -36,6 +37,7 @@ import {parsePosition, POSITION} from './parsing/position';
import {parseTextDecoration} from './parsing/textDecoration';
import {parseTextTransform} from './parsing/textTransform';
import {parseTransform} from './parsing/transform';
import {parseVisibility, VISIBILITY} from './parsing/visibility';
import {parseZIndex} from './parsing/zIndex';
import {parseBounds, parseBoundCurves, calculatePaddingBoxPath} from './Bounds';
@ -56,6 +58,7 @@ type StyleDeclaration = {
textDecoration: TextDecoration,
textTransform: TextTransform,
transform: Transform,
visibility: Visibility,
zIndex: zIndex
};
@ -90,6 +93,7 @@ export default class NodeContainer {
textDecoration: parseTextDecoration(style),
textTransform: parseTextTransform(style.textTransform),
transform: parseTransform(style),
visibility: parseVisibility(style.visibility),
zIndex: parseZIndex(style.zIndex)
};
@ -127,7 +131,11 @@ export default class NodeContainer {
return this.isRootElement() && !this.isFloating() && !this.isAbsolutelyPositioned();
}
isVisible(): boolean {
return !contains(this.style.display, DISPLAY.NONE) && this.style.opacity > 0;
return (
!contains(this.style.display, DISPLAY.NONE) &&
this.style.opacity > 0 &&
this.style.visibility === VISIBILITY.VISIBLE
);
}
isAbsolutelyPositioned(): boolean {
return this.style.position !== POSITION.STATIC && this.style.position !== POSITION.RELATIVE;

22
src/parsing/visibility.js Normal file
View File

@ -0,0 +1,22 @@
/* @flow */
'use strict';
export const VISIBILITY = {
VISIBLE: 0,
HIDDEN: 1,
COLLAPSE: 2
};
export type Visibility = $Values<typeof VISIBILITY>;
export const parseVisibility = (visibility: string): Visibility => {
switch (visibility) {
case 'hidden':
return VISIBILITY.HIDDEN;
case 'collapse':
return VISIBILITY.COLLAPSE;
case 'visible':
default:
return VISIBILITY.VISIBLE;
}
};

10
tests/cases/visibility.html
View File

@ -8,17 +8,23 @@
div{
border:2px solid black;
}
.none {
display:none
}
</style>
</head>
<body>
<div>
<h1>Display:none and visible:hidden tests</h1>
<div>This should be visible </div>
<div style="display:none">display:none, This should be <b>hidden</b></div>
<div class="none">display:none, This should be <b>hidden</b></div>
<div style="visibility:hidden">visibility:hidden, This should be <b>hidden</b></div>
<hr />
<div style="display:none">display:none, This should be <b>hidden</b></div>
<div class="none">display:none, This should be <b>hidden</b></div>
<div style="visibility:hidden">visibility:hidden, This should be <b>hidden</b></div>
</div>
</body>
</html>