preface

Front end colleagues who have worked as web side editors will more or less contact ruler plug-ins, similar to plug-ins in ps or PPT software.

Older web plug-ins, such as jqury, produce a lot of dom, so they write a ruler drawn with pure TS and canvas, which does not rely on any third-party library. The usage of the document is as follows. Welcome to use, contribute and issue!

PS: the auxiliary line function is not supported yet. It will be launched as soon as possible

The plug-in also refers to another Daniel's ruler plug-in in some ideas daybrush/ruler

light-ruler

DEMO / Github

Main features

• Drawing with canvas supports infinite scrolling and does not generate multiple DOM S and cause page redrawing
• Support custom ruler background color, text color, scale color and unit
• Support translate mode, that is, after drawing the ruler in canvas for the first time, the scrolling is realized through css transform
• It is written in Typescript and does not rely on any third-party library. After packaging, the file is only 26KB (including styles)
• Supports scaling scale values
• There are currently 2 ruler theme styles available
• Multi instance controller is provided to manage multiple ruler instances

Installation

npm i light-ruler

Use (Useage)

• Basic use

import LightRuler from "light-ruler";

const ruler = new LightRuler({
    mode: "infinite",
    wrapperElement: document.getElementById("box"),
    scrollElement: document.getElementById("wrap"),
    rulerId: "my-ruler",
    width: 30000,
    height: 30000,
    style: {
        mode: "right",
    },
    onScroll: (x, y) => {
        console.log(x, y);
    },
});

• React use

import React, { useRef, useEffect } from "react";
import LightRuler from "light-ruler";

export default function () {
    const rulerRef = useRef(null);

    useEffect(() => {
        const ruler = new LightRuler({
            mode: "infinite",
            mountRef: rulerRef.current,
            scrollElement: document.getElementById("wrap"),
            rulerId: "ruler",
            width: 30000,
            height: 30000,
            onScroll: (x, y) => {
                console.log(x, y);
            },
        });
    }, []);
    return (
        <div id="root">
            <div id="box">
                <div id="wrap">...</div>
                <div id="ruler" ref={rulerRef}></div>
            </div>
        </div>
    );
}

• Vue3 use

<template>
    <div id="gomi-homePage">
        <div
            id="box"
            :style="{ position: 'relative', width: '800px', height: '600px', overflow: 'hidden', background: 'red' }"
        >
            <div id="s" :style="{ width: '100%', height: '100%', overflow: 'auto' }">
                <div id="wrap" :style="{ width: '30000px', height: '4600px' }"></div>
            </div>
            <div id="ruler" ref="ruler"></div>
        </div>
        <footer>
        </footer>
    </div>
</template>

<script lang="ts">
import LightRuler from 'light-ruler';
import { onMounted, ref, defineComponent } from "vue";

export default defineComponent({
    name: "Home",
    props: {},
    setup: () => {
        const ruler = ref(null);
        onMounted(() => {
            const myRuler = new LightRuler({
                mountRef: ruler.value,
                mode: "infinite",
                scrollElement: "#s",
                rulerId: "hh",
                width: 30000,
                height: 30000,
                style: {
                    mode: 'right'
                },
                onScroll: (x, y) => {
                    console.log(x, y);
                },
            })
        });

        return {  ruler };
    },
});
</script>

<style scoped lang="scss">
</style>

Tips: because the ruler uses position: absolute, the container wrapping the ruler must set the position attribute.
At the same time, the ruler shall be fixed. The element monitoring the rolling shall not be the element wrapping the ruler

Configuration (Config)

• style attribute

• unit attribute

API

scale

Set the scale scaling factor, and the scale value will change according to the scaling factor

params

ruler.scale(0.5);

resize

Reset ruler width, height or size

params

ruler.resize({
    width: 1920,
    height: 1080,
    size: 18,
});

update

Update ruler style

params

ruler.update({
    fontColor: "#fff",
    unit: {
        text: "mm",
    },
});

changeScrollElement

Change the scrolling object that the ruler listens to

params

ruler.changeScrollElement("#wrap");

show

Display ruler

ruler.show();

hide

Hide Rulers

ruler.hide();

destroy

Clear ruler

ruler.destroy();