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

Ability to set the number of passes to annotate a shape

Browse Source
This commit is contained in:
Preet Shihn
2020-05-30 17:51:58 -07:00
parent a345a9500b
commit 661a8c8ca5
2 changed files with 48 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/model.ts
View File

@@ -19,6 +19,7 @@ export interface RoughAnnotationConfig {
color?: string; // defaults to currentColor color?: string; // defaults to currentColor
strokeWidth?: number; // default based on type strokeWidth?: number; // default based on type
padding?: number; // defaults to 5px padding?: number; // defaults to 5px
iterations?: number; // defaults to 2
} }
export interface RoughAnnotation { export interface RoughAnnotation {

60
src/render.ts
View File

@@ -34,18 +34,29 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
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);
const iterations = config.iterations || 2;
switch (config.type) { switch (config.type) {
case 'underline': { case 'underline': {
const y = rect.y + rect.h + padding; const y = rect.y + rect.h + padding;
opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions)); for (let i = 0; i < iterations; i++) {
opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions)); if (i % 2) {
opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions));
} else {
opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions));
}
}
break; break;
} }
case 'strike-through': { case 'strike-through': {
const y = rect.y + (rect.h / 2); const y = rect.y + (rect.h / 2);
opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions)); for (let i = 0; i < iterations; i++) {
opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions)); if (i % 2) {
opList.push(line(rect.x + rect.w, y, rect.x, y, singleStrokeOptions));
} else {
opList.push(line(rect.x, y, rect.x + rect.w, y, singleStrokeOptions));
}
}
break; break;
} }
case 'box': { case 'box': {
@@ -53,8 +64,9 @@ 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);
opList.push(rectangle(x, y, width, height, singleStrokeOptions)); for (let i = 0; i < iterations; i++) {
opList.push(rectangle(x, y, width, height, singleStrokeOptions)); opList.push(rectangle(x, y, width, height, singleStrokeOptions));
}
break; break;
} }
case 'crossed-off': { case 'crossed-off': {
@@ -62,10 +74,20 @@ 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;
opList.push(line(x, y, x2, y2, singleStrokeOptions)); for (let i = 0; i < iterations; i++) {
opList.push(line(x2, y2, x, y, singleStrokeOptions)); if (i % 2) {
opList.push(line(x2, y, x, y2, singleStrokeOptions)); opList.push(line(x2, y2, x, y, singleStrokeOptions));
opList.push(line(x, y2, x2, y, singleStrokeOptions)); } else {
opList.push(line(x, y, x2, y2, singleStrokeOptions));
}
}
for (let i = 0; i < iterations; i++) {
if (i % 2) {
opList.push(line(x, y2, x2, y, singleStrokeOptions));
} else {
opList.push(line(x2, y, x, y2, singleStrokeOptions));
}
}
break; break;
} }
case 'circle': { case 'circle': {
@@ -74,14 +96,26 @@ 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);
opList.push(ellipse(x, y, width, height, defaultOptions)); const fullItr = Math.floor(iterations / 2);
const singleItr = iterations - (fullItr * 2);
for (let i = 0; i < fullItr; i++) {
opList.push(ellipse(x, y, width, height, defaultOptions));
}
for (let i = 0; i < singleItr; i++) {
opList.push(ellipse(x, y, width, height, singleStrokeOptions));
}
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);
opList.push(line(rect.x, y, rect.x + rect.w, y, highlightOptions)); for (let i = 0; i < iterations; i++) {
opList.push(line(rect.x + rect.w, y, rect.x, y, highlightOptions)); if (i % 2) {
opList.push(line(rect.x + rect.w, y, rect.x, y, highlightOptions));
} else {
opList.push(line(rect.x, y, rect.x + rect.w, y, highlightOptions));
}
}
break; break;
} }
} }