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

Draw checkboxes as vector path

Browse Source
This commit is contained in:
Niklas von Hertzen 2017-08-11 22:21:23 +08:00
parent a1b8cbc2fb
commit af09280c38
1 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/Input.js
View File

@ -7,6 +7,7 @@ import {BACKGROUND_CLIP, BACKGROUND_ORIGIN} from './parsing/background';
import {BORDER_STYLE} from './parsing/border'; import {BORDER_STYLE} from './parsing/border';
import Circle from './drawing/Circle'; import Circle from './drawing/Circle';
import Vector from './drawing/Vector';
import Color from './Color'; import Color from './Color';
import Length from './Length'; import Length from './Length';
import {Bounds} from './Bounds'; import {Bounds} from './Bounds';
@ -55,21 +56,38 @@ export const inlineInputElement = (node: HTMLInputElement, container: NodeContai
if (node.type === 'radio' || node.type === 'checkbox') { if (node.type === 'radio' || node.type === 'checkbox') {
if (node.checked) { if (node.checked) {
const size = Math.min(container.bounds.width, container.bounds.height); const size = Math.min(container.bounds.width, container.bounds.height);
// TODO draw checkmark with Path Array<Vector>
container.style.font.fontSize = `${size - 3}px`;
container.childNodes.push( container.childNodes.push(
node.type === 'checkbox' node.type === 'checkbox'
? new TextContainer('\u2714', container, [ ? [
new TextBounds( new Vector(
'\u2714', container.bounds.left + size * 0.39363,
new Bounds( container.bounds.top + size * 0.79
container.bounds.left + size / 6, ),
container.bounds.top + size - 1, new Vector(
0, container.bounds.left + size * 0.16,
0 container.bounds.top + size * 0.5549
),
new Vector(
container.bounds.left + size * 0.27347,
container.bounds.top + size * 0.44071
),
new Vector(
container.bounds.left + size * 0.39694,
container.bounds.top + size * 0.5649
),
new Vector(
container.bounds.left + size * 0.72983,
container.bounds.top + size * 0.23
),
new Vector(
container.bounds.left + size * 0.84,
container.bounds.top + size * 0.34085
),
new Vector(
container.bounds.left + size * 0.39363,
container.bounds.top + size * 0.79
) )
) ]
])
: new Circle( : new Circle(
container.bounds.left + size / 4, container.bounds.left + size / 4,
container.bounds.top + size / 4, container.bounds.top + size / 4,
@ -78,7 +96,7 @@ export const inlineInputElement = (node: HTMLInputElement, container: NodeContai
); );
} }
} else { } else {
inlineFormElement(getInputValue(node), node, container); inlineFormElement(getInputValue(node), node, container, false);
} }
}; };
@ -86,12 +104,12 @@ export const inlineTextAreaElement = (
node: HTMLTextAreaElement, node: HTMLTextAreaElement,
container: NodeContainer container: NodeContainer
): void => { ): void => {
inlineFormElement(node.value, node, container); inlineFormElement(node.value, node, container, true);
}; };
export const inlineSelectElement = (node: HTMLSelectElement, container: NodeContainer): void => { export const inlineSelectElement = (node: HTMLSelectElement, container: NodeContainer): void => {
const option = node.options[node.selectedIndex || 0]; const option = node.options[node.selectedIndex || 0];
inlineFormElement(option ? option.text || '' : '', node, container); inlineFormElement(option ? option.text || '' : '', node, container, false);
}; };
export const reformatInputBounds = (bounds: Bounds): Bounds => { export const reformatInputBounds = (bounds: Bounds): Bounds => {
@ -105,7 +123,12 @@ export const reformatInputBounds = (bounds: Bounds): Bounds => {
return bounds; return bounds;
}; };
const inlineFormElement = (value: string, node: HTMLElement, container: NodeContainer): void => { const inlineFormElement = (
value: string,
node: HTMLElement,
container: NodeContainer,
allowLinebreak: boolean
): void => {
const body = node.ownerDocument.body; const body = node.ownerDocument.body;
if (value.length > 0 && body) { if (value.length > 0 && body) {
const wrapper = node.ownerDocument.createElement('html2canvaswrapper'); const wrapper = node.ownerDocument.createElement('html2canvaswrapper');
@ -113,6 +136,9 @@ const inlineFormElement = (value: string, node: HTMLElement, container: NodeCont
wrapper.style.position = 'fixed'; wrapper.style.position = 'fixed';
wrapper.style.left = `${container.bounds.left}px`; wrapper.style.left = `${container.bounds.left}px`;
wrapper.style.top = `${container.bounds.top}px`; wrapper.style.top = `${container.bounds.top}px`;
if (!allowLinebreak) {
wrapper.style.whiteSpace = 'nowrap';
}
const text = node.ownerDocument.createTextNode(value); const text = node.ownerDocument.createTextNode(value);
wrapper.appendChild(text); wrapper.appendChild(text);
body.appendChild(wrapper); body.appendChild(wrapper);