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

feat: support opacity

Browse Source
This commit is contained in:
Anthony Fu
2024-02-24 16:17:06 +01:00
parent b572eca81d
commit 3bce13f65f
3 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -4,8 +4,9 @@ Fork of [rough-notation](https://github.com/rough-stuff/rough-notation)
Changes in this fork: Changes in this fork:
- Expose config and data types - Expose types
- Support custom `class` option - Support custom `class` option
- Support custom `opacity` option for strokes
- Support passing through all options to RoughJS for full customization - Support passing through all options to RoughJS for full customization
- Support `getConfig` and `setConfig` methods - Support `getConfig` and `setConfig` methods
- Improved build assets with `.cjs` and `.mjs` - Improved build assets with `.cjs` and `.mjs`

2
src/render.ts
View File

@@ -225,6 +225,8 @@ export function renderAnnotation(
setAttr(path, 'fill', 'none') setAttr(path, 'fill', 'none')
setAttr(path, 'stroke', config.color || 'currentColor') setAttr(path, 'stroke', config.color || 'currentColor')
setAttr(path, 'stroke-width', `${strokeWidth}`) setAttr(path, 'stroke-width', `${strokeWidth}`)
if (config.opacity !== undefined)
setAttr(path, 'style', `opacity:${config.opacity}`)
if (animate) { if (animate) {
const length = path.getTotalLength() const length = path.getTotalLength()
lengths.push(length) lengths.push(length)

5
src/types.ts
View File

@@ -12,13 +12,13 @@ export type FullPadding = [number, number, number, number]
export type RoughPadding = number | [number, number] | FullPadding export type RoughPadding = number | [number, number] | FullPadding
export type BracketType = 'left' | 'right' | 'top' | 'bottom' export type BracketType = 'left' | 'right' | 'top' | 'bottom'
export interface RoughAnnotationConfig extends RoughAnnotationConfigBase { export interface RoughAnnotationConfig extends RoughAnnotationConfigBase, Partial<ResolvedOptions> {
type: RoughAnnotationType type: RoughAnnotationType
multiline?: boolean multiline?: boolean
rtl?: boolean rtl?: boolean
} }
export interface RoughAnnotationConfigBase extends Partial<ResolvedOptions> { export interface RoughAnnotationConfigBase {
animate?: boolean // defaults to true animate?: boolean // defaults to true
animationDuration?: number // defaults to 1000ms animationDuration?: number // defaults to 1000ms
color?: string // defaults to currentColor color?: string // defaults to currentColor
@@ -27,6 +27,7 @@ export interface RoughAnnotationConfigBase extends Partial<ResolvedOptions> {
iterations?: number // defaults to 2 iterations?: number // defaults to 2
brackets?: BracketType | BracketType[] // defaults to 'right' brackets?: BracketType | BracketType[] // defaults to 'right'
delay?: number // defaults to 0 delay?: number // defaults to 0
opacity?: number // defaults to 1
/** /**
* Additional class to add to the root SVG element * Additional class to add to the root SVG element
*/ */