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) { renderNode(container: NodeContainer) {
if (container.isVisible()) {
this.renderNodeBackgroundAndBorders(container); this.renderNodeBackgroundAndBorders(container);
this.renderNodeContent(container); this.renderNodeContent(container);
} }
}
renderNodeContent(container: NodeContainer) { renderNodeContent(container: NodeContainer) {
this.ctx.save(); this.ctx.save();
@ -242,6 +244,7 @@ export default class CanvasRenderer {
} }
renderStack(stack: StackingContext) { renderStack(stack: StackingContext) {
if (stack.container.isVisible()) {
this.ctx.globalAlpha = stack.getOpacity(); this.ctx.globalAlpha = stack.getOpacity();
const transform = stack.container.style.transform; const transform = stack.container.style.transform;
if (transform !== null) { if (transform !== null) {
@ -307,6 +310,7 @@ export default class CanvasRenderer {
this.ctx.restore(); this.ctx.restore();
} }
} }
}
render(stack: StackingContext): Promise<HTMLCanvasElement> { render(stack: StackingContext): Promise<HTMLCanvasElement> {
this.ctx.scale(this.options.scale, this.options.scale); 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 {TextTransform} from './parsing/textTransform';
import type {TextDecoration} from './parsing/textDecoration'; import type {TextDecoration} from './parsing/textDecoration';
import type {Transform} from './parsing/transform'; import type {Transform} from './parsing/transform';
import type {Visibility} from './parsing/visibility';
import type {zIndex} from './parsing/zIndex'; import type {zIndex} from './parsing/zIndex';
import type {Bounds, BoundCurves, Path} from './Bounds'; import type {Bounds, BoundCurves, Path} from './Bounds';
@ -36,6 +37,7 @@ import {parsePosition, POSITION} from './parsing/position';
import {parseTextDecoration} from './parsing/textDecoration'; import {parseTextDecoration} from './parsing/textDecoration';
import {parseTextTransform} from './parsing/textTransform'; import {parseTextTransform} from './parsing/textTransform';
import {parseTransform} from './parsing/transform'; import {parseTransform} from './parsing/transform';
import {parseVisibility, VISIBILITY} from './parsing/visibility';
import {parseZIndex} from './parsing/zIndex'; import {parseZIndex} from './parsing/zIndex';
import {parseBounds, parseBoundCurves, calculatePaddingBoxPath} from './Bounds'; import {parseBounds, parseBoundCurves, calculatePaddingBoxPath} from './Bounds';
@ -56,6 +58,7 @@ type StyleDeclaration = {
textDecoration: TextDecoration, textDecoration: TextDecoration,
textTransform: TextTransform, textTransform: TextTransform,
transform: Transform, transform: Transform,
visibility: Visibility,
zIndex: zIndex zIndex: zIndex
}; };
@ -90,6 +93,7 @@ export default class NodeContainer {
textDecoration: parseTextDecoration(style), textDecoration: parseTextDecoration(style),
textTransform: parseTextTransform(style.textTransform), textTransform: parseTextTransform(style.textTransform),
transform: parseTransform(style), transform: parseTransform(style),
visibility: parseVisibility(style.visibility),
zIndex: parseZIndex(style.zIndex) zIndex: parseZIndex(style.zIndex)
}; };
@ -127,7 +131,11 @@ export default class NodeContainer {
return this.isRootElement() && !this.isFloating() && !this.isAbsolutelyPositioned(); return this.isRootElement() && !this.isFloating() && !this.isAbsolutelyPositioned();
} }
isVisible(): boolean { 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 { isAbsolutelyPositioned(): boolean {
return this.style.position !== POSITION.STATIC && this.style.position !== POSITION.RELATIVE; 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;
}
};

18
tests/cases/visibility.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Visible elements tests</title> <title>Visible elements tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../test.js"></script> <script type="text/javascript" src="../test.js"></script>
@ -8,17 +8,23 @@
div{ div{
border:2px solid black; border:2px solid black;
} }
.none {
display:none
}
</style> </style>
</head> </head>
<body> <body>
<div>
<h1>Display:none and visible:hidden tests</h1> <h1>Display:none and visible:hidden tests</h1>
<div>This should be visible </div> <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> <div style="visibility:hidden">visibility:hidden, This should be <b>hidden</b></div>
<hr /> <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 style="visibility:hidden">visibility:hidden, This should be <b>hidden</b></div>
</div>
</body>
</body>
</html> </html>