arthur/rough-notation
1
0
Fork 0
mirror of https://github.com/slidevjs/rough-notation.git synced 2026-01-29 00:10:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

order of muulti strokes

Browse Source
This commit is contained in:
Preet Shihn
2020-05-26 18:07:44 -07:00
parent 6cec7bf0e7
commit 111573c898
1 changed files with 40 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/render.ts
View File

@@ -27,9 +27,10 @@ const singleStrokeOptions = JSON.parse(JSON.stringify(defaultOptions));
singleStrokeOptions.disableMultiStroke = true; singleStrokeOptions.disableMultiStroke = true;
const highlightOptions = JSON.parse(JSON.stringify(defaultOptions)); const highlightOptions = JSON.parse(JSON.stringify(defaultOptions));
highlightOptions.roughness = 3; highlightOptions.roughness = 3;
highlightOptions.disableMultiStroke = true;
export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAnnotationConfig) { export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAnnotationConfig) {
let ops: OpSet | null = null; const opList: OpSet[] = [];
let strokeWidth = config.strokeWidth || 2; let strokeWidth = config.strokeWidth || 2;
const padding = (config.padding === 0) ? 0 : (config.padding || 5); const padding = (config.padding === 0) ? 0 : (config.padding || 5);
const animate = (config.animate === undefined) ? true : (!!config.animate); const animate = (config.animate === undefined) ? true : (!!config.animate);
@@ -37,12 +38,14 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
switch (config.type) { switch (config.type) {
case 'underline': { case 'underline': {
const y = rect.y + rect.h + padding; const y = rect.y + rect.h + padding;
ops = line(rect.x, y, rect.x + rect.w, y, defaultOptions); opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions));
opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions));
break; break;
} }
case 'strike-through': { case 'strike-through': {
const y = rect.y + (rect.h / 2); const y = rect.y + (rect.h / 2);
ops = line(rect.x, y, rect.x + rect.w, y, defaultOptions); opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions));
opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions));
break; break;
} }
case 'box': { case 'box': {
@@ -50,9 +53,8 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
const y = rect.y - padding; const y = rect.y - padding;
const width = rect.w + (2 * padding); const width = rect.w + (2 * padding);
const height = rect.h + (2 * padding); const height = rect.h + (2 * padding);
ops = rectangle(x, y, width, height, singleStrokeOptions); opList.push(rectangle(x, y, width, height, singleStrokeOptions));
const ops2 = rectangle(x, y, width, height, singleStrokeOptions); opList.push(rectangle(x, y, width, height, singleStrokeOptions));
ops.ops = [...ops.ops, ...ops2.ops];
break; break;
} }
case 'crossed-off': { case 'crossed-off': {
@@ -60,9 +62,10 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
const y = rect.y; const y = rect.y;
const x2 = x + rect.w; const x2 = x + rect.w;
const y2 = y + rect.h; const y2 = y + rect.h;
ops = line(x, y, x2, y2, defaultOptions); opList.push(line(x, y, x2, y2, singleStrokeOptions));
const ops2 = line(x2, y, x, y2, defaultOptions); opList.push(line(x2, y2, x, y, singleStrokeOptions));
ops.ops = [...ops.ops, ...ops2.ops]; opList.push(line(x2, y, x, y2, singleStrokeOptions));
opList.push(line(x, y2, x2, y, singleStrokeOptions));
break; break;
} }
case 'circle': { case 'circle': {
@@ -71,23 +74,24 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
const height = rect.h + (2 * p2); const height = rect.h + (2 * p2);
const x = rect.x - p2 + (width / 2); const x = rect.x - p2 + (width / 2);
const y = rect.y - p2 + (height / 2); const y = rect.y - p2 + (height / 2);
ops = ellipse(x, y, width, height, defaultOptions); opList.push(ellipse(x, y, width, height, defaultOptions));
break; break;
} }
case 'highlight': { case 'highlight': {
strokeWidth = rect.h * 0.95; strokeWidth = rect.h * 0.95;
const y = rect.y + (rect.h / 2); const y = rect.y + (rect.h / 2);
ops = line(rect.x, y, rect.x + rect.w, y, highlightOptions); opList.push(line(rect.x, y, rect.x + rect.w, y, highlightOptions));
opList.push(line(rect.x + rect.w, y, rect.x, y, highlightOptions));
break; break;
} }
} }
if (ops) { if (opList.length) {
const pathStrings = opsToPath(ops); const pathStrings = opsToPath(opList);
const lengths: number[] = []; const lengths: number[] = [];
const pathElements: SVGPathElement[] = []; const pathElements: SVGPathElement[] = [];
let totalLength = 0; let totalLength = 0;
const totalDuration = config.animationDuration === 0 ? 0 : (config.animationDuration || 500); const totalDuration = config.animationDuration === 0 ? 0 : (config.animationDuration || 1000);
const initialDelay = config.animationDelay === 0 ? 0 : (config.animationDelay || 0); const initialDelay = config.animationDelay === 0 ? 0 : (config.animationDelay || 0);
for (const d of pathStrings) { for (const d of pathStrings) {
@@ -122,28 +126,30 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
} }
} }
function opsToPath(drawing: OpSet): string[] { function opsToPath(opList: OpSet[]): string[] {
const paths: string[] = []; const paths: string[] = [];
let path = ''; for (const drawing of opList) {
for (const item of drawing.ops) { let path = '';
const data = item.data; for (const item of drawing.ops) {
switch (item.op) { const data = item.data;
case 'move': switch (item.op) {
if (path.trim()) { case 'move':
paths.push(path.trim()); if (path.trim()) {
} paths.push(path.trim());
path = `M${data[0]} ${data[1]} `; }
break; path = `M${data[0]} ${data[1]} `;
case 'bcurveTo': break;
path += `C${data[0]} ${data[1]}, ${data[2]} ${data[3]}, ${data[4]} ${data[5]} `; case 'bcurveTo':
break; path += `C${data[0]} ${data[1]}, ${data[2]} ${data[3]}, ${data[4]} ${data[5]} `;
case 'lineTo': break;
path += `L${data[0]} ${data[1]} `; case 'lineTo':
break; path += `L${data[0]} ${data[1]} `;
break;
}
}
if (path.trim()) {
paths.push(path.trim());
} }
}
if (path.trim()) {
paths.push(path.trim());
} }
return paths; return paths;
} }