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

Fix tests and refactor background calculations out from Renderer

Browse Source
This commit is contained in:
MoyuScript
2017-12-09 17:45:58 +08:00
parent 9673adfd59
commit 89a37b8ab9
4 changed files with 52 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/Renderer.js
View File

@ -20,20 +20,13 @@ import type NodeContainer from './NodeContainer';
import type StackingContext from './StackingContext';
import type {TextBounds} from './TextBounds';
import {
Bounds,
parsePathForBorder,
calculateContentBox,
calculatePaddingBox,
calculatePaddingBoxPath
} from './Bounds';
import {PADDING_SIDES} from './parsing/padding';
import {Bounds, parsePathForBorder, calculateContentBox, calculatePaddingBoxPath} from './Bounds';
import {FontMetrics} from './Font';
import {parseGradient} from './Gradient';
import TextContainer from './TextContainer';
import {
BACKGROUND_ORIGIN,
calculateBackgroungPositioningArea,
calculateBackgroungPaintingArea,
calculateBackgroundPosition,
calculateBackgroundRepeatPath,
@ -222,32 +215,12 @@ export default class Renderer {
renderBackgroundRepeat(container: NodeContainer, background: BackgroundImage) {
const image = this.options.imageStore.get(background.source.args[0]);
if (image) {
const bounds = container.bounds;
const paddingBox = calculatePaddingBox(bounds, container.style.border);
let backgroundPositioningArea;
switch (container.style.background.backgroundOrigin) {
case BACKGROUND_ORIGIN.BORDER_BOX:
backgroundPositioningArea = bounds;
break;
case BACKGROUND_ORIGIN.CONTENT_BOX:
const paddingLeft = container.style.padding[PADDING_SIDES.LEFT].value;
const paddingRight = container.style.padding[PADDING_SIDES.RIGHT].value;
const paddingTop = container.style.padding[PADDING_SIDES.TOP].value;
const paddingBottom = container.style.padding[PADDING_SIDES.BOTTOM].value;
backgroundPositioningArea = new Bounds(
paddingBox.left + paddingLeft,
paddingBox.top + paddingTop,
paddingBox.width - paddingLeft - paddingRight,
paddingBox.height - paddingTop - paddingBottom
);
break;
case BACKGROUND_ORIGIN.PADDING_BOX:
default:
backgroundPositioningArea = paddingBox;
break;
}
const backgroundPositioningArea = calculateBackgroungPositioningArea(
container.style.background.backgroundOrigin,
container.bounds,
container.style.padding,
container.style.border
);
const backgroundImageSize = calculateBackgroundSize(
background,
image,
@ -263,7 +236,7 @@ export default class Renderer {
position,
backgroundImageSize,
backgroundPositioningArea,
bounds
container.bounds
);
const offsetX = Math.round(backgroundPositioningArea.left + position.x);

41
src/parsing/background.js
View File

@ -1,14 +1,22 @@
/* @flow */
'use strict';
import type {Path} from '../drawing/Path';
import type {Bounds, BoundCurves} from '../Bounds';
import type {BoundCurves} from '../Bounds';
import type ResourceLoader, {ImageElement} from '../ResourceLoader';
import type {Border} from './border';
import type {Padding} from './padding';
import Color from '../Color';
import Length from '../Length';
import Size from '../drawing/Size';
import Vector from '../drawing/Vector';
import {calculateBorderBoxPath, calculatePaddingBoxPath} from '../Bounds';
import {
calculateBorderBoxPath,
calculatePaddingBoxPath,
calculatePaddingBox,
Bounds
} from '../Bounds';
import {PADDING_SIDES} from './padding';
export type Background = {
backgroundImage: Array<BackgroundImage>,
@ -121,7 +129,6 @@ export const calculateBackgroungPaintingArea = (
curves: BoundCurves,
clip: BackgroundClip
): Path => {
// TODO support CONTENT_BOX
switch (clip) {
case BACKGROUND_CLIP.BORDER_BOX:
return calculateBorderBoxPath(curves);
@ -131,6 +138,34 @@ export const calculateBackgroungPaintingArea = (
}
};
export const calculateBackgroungPositioningArea = (
backgroundOrigin: BackgroundOrigin,
bounds: Bounds,
padding: Padding,
border: Array<Border>
): Bounds => {
const paddingBox = calculatePaddingBox(bounds, border);
switch (backgroundOrigin) {
case BACKGROUND_ORIGIN.BORDER_BOX:
return bounds;
case BACKGROUND_ORIGIN.CONTENT_BOX:
const paddingLeft = padding[PADDING_SIDES.LEFT].getAbsoluteValue(bounds.width);
const paddingRight = padding[PADDING_SIDES.RIGHT].getAbsoluteValue(bounds.width);
const paddingTop = padding[PADDING_SIDES.TOP].getAbsoluteValue(bounds.width);
const paddingBottom = padding[PADDING_SIDES.BOTTOM].getAbsoluteValue(bounds.width);
return new Bounds(
paddingBox.left + paddingLeft,
paddingBox.top + paddingTop,
paddingBox.width - paddingLeft - paddingRight,
paddingBox.height - paddingTop - paddingBottom
);
case BACKGROUND_ORIGIN.PADDING_BOX:
default:
return paddingBox;
}
};
export const calculateBackgroundPosition = (
position: [Length, Length],
size: Size,