Ruler

Ruler

A Ruler component that can draw grids and scroll infinitely.

Constructor

new Ruler(parentElement, optionsopt)

Source:
Implements:
Name Type Default Description
parentElement HTMLElement container
options? Partial<Ruler.RulerProps> {} options

Methods

destroy()

Source:
Remove Ruler

resize(nextZoomopt)

Source:
Name Type Description
nextZoom? number

scroll(scrollPos, zoomopt)

Source:
Name Type Description
scrollPos number
zoom? number

Type Definitions

RulerInterface

Source:
Properties:
scroll
scroll: (scrollPos: number) => void
Scroll to that location. It can be used when the scrollPos prop is not used.
resize
resize: () => void
Recalculate the style of the ruler.
getScrollPos
getScrollPos: () => number
Gets the scroll position of the ruler.
draw
draw: (options?: DrawRulerOptions) => void
draw a ruler
Type:
  • TSInterface

RulerProps

Source:
Properties:
type optional
Default Value: "horizontal"
type?: "horizontal" | "vertical"
ruler's direction
width optional
Default Value: target's offsetWidth
width?: number
ruler's width
height optional
Default Value: target's offsetHeight
height?: number
ruler's height
unit optional
Default Value: 50
unit?: number
main scale unit
Examples 
```
1px (Default) zoom: 1, unit: 50 (every 50px)
1cm = 37.7952px zoom: 37.7952 unit: 1 (every 1cm)
1in = 96px = 2.54cm zoom: 9 unit: 1 (every 1in)
```
zoom optional
Default Value: 1
zoom?: number
zoom
Examples 
```
1px (Default) zoom: 1, unit: 50 (every 50px)
1cm = 37.7952px zoom: 37.7952 unit: 1 (every 1cm)
1in = 96px = 2.54cm zoom: 9 unit: 1 (every 1in)
```
direction optional
Default Value: "end"
direction?: "start" | "center" | "end"
line's direction (align)
textAlign optional
Default Value: "start"
textAlign?: "left" | "center" | "right"
text align
font optional
Default Value: "10px sans-serif"
font?: string
font and size
segment optional
Default Value: 10
segment?: number
Number of areas to divide between two main lines
mainLineSize optional
Default Value: "100%"
mainLineSize?: string | number
main line size
longLineSize optional
Default Value: 10
longLineSize?: string | number
long line size
shortLineSize optional
Default Value: 7
shortLineSize?: string | number
short line size
lineOffset optional
Default Value: [0, 0]
lineOffset?: number[]
line's position offset
textOffset optional
Default Value: [0, 0]
textOffset?: number[]
text's position offset
negativeRuler optional
Default Value: true
negativeRuler?: boolean
Whether to display the ruler in the negative direction.
range optional
Default Value: [-Infinity, Infinity]
range?: [number, number]
The range to show the ruler's scales
scrollPos optional
Default Value: undefined
scrollPos?: number
you can set scroll position by prop. If you use the scrollPos prop, you can't use the scroll method.
defaultScrollPos optional
Default Value: 0
defaultScrollPos?: number
you can set scroll position by prop for init. don't use `scrollPos` prop
style optional
style?: IObject<any>
ruler canvas style
backgroundColor optional
Default Value: "#333333"
backgroundColor?: string
ruler's background color
rangeBackgroundColor optional
Default Value: "transparent"
rangeBackgroundColor?: string
background color within range in ruler
lineColor optional
Default Value: "#777777"
lineColor?: string
ruler's line color
textColor optional
Default Value: "#ffffff"
textColor?: string
ruler's text color
textBackgroundColor optional
Default Value: "transparent"
textBackgroundColor?: string
The background color that wraps the text
textFormat optional
Default Value: ownself
textFormat?: (scale: number) => string
text foramt
marks optional
Default Value: []
marks?: number[]
positions to mark
markColor optional
Default Value: "#f55"
markColor?: string
lineWidth optional
Default Value: 1
lineWidth?: number
Ruler's line width
warpSelf optional
warpSelf?: boolean
Whether to warp self
selectedRanges optional
selectedRanges?: number[][]
You can paint the selected area(selectedranges) with the `selectedBackgroundColor` color.
selectedBackgroundColor optional
Default Value: "#555555"
selectedBackgroundColor?: string
background color within selected range in ruler with `selectedRanges` area
selectedRangesText optional
Since: 0.16.0
Default Value: false
selectedRangesText?: boolean
Text is displayed in the selected ranges. If it overlaps existing text, only the selected range text is visible.
selectedRangesTextOffset optional
Since: 0.16.0
Default Value: "0, 0"
selectedRangesTextOffset?: number[]
Position offset of text in selected ranges
selectedRangesTextColor optional
Since: 0.16.0
Default Value: "#44aaff"
selectedRangesTextColor?: string
Color of text in selected ranges
defaultPixelScale optional
Default Value: 2
defaultPixelScale?: number
Scale value of canvase when device high density is 1. Less than 2 may cause pixels to blur. If device high density is greater than 1, it is forcibly set to 3.
useResizeObserver optional
useResizeObserver?: boolean
Whether to use the resize observer. When the size changes, the resize method is automatically called.
Type:
  • TSInterface