Datav-vite NPM

vue-sketch-ruler

A sketch like ruler in vue

Live Demo

Install

npm install --save vue-sketch-ruler

Supported features

ruler render
ruler render when scale
ruler render when srolling
switch status of ruler(show or hide)
reference line management
switch status of reference line (show or hide)

Upcoming features

[] contextmenu of ruler
[] add event on corner
[] separate css style
[] international

Usage

<template>
    <SketchRule
        :lang="lang"
        :thick="thick"
        :scale="scale"
        :width="582"
        :height="482"
        :startX="startX"
        :startY="startY"
        :shadow="shadow"
        :horLineArr="lines.h"
        :verLineArr="lines.v"
        :cornerActive="true"
        @handleLine="handleLine"
        @onCornerClick="handleCornerClick"
    >
</template>
<script>
import Vue from 'vue';
import SketchRule from "vue-sketch-ruler";
const rectWidth = 160;
const rectHeight = 200;
export default Vue.extend({
    data() {
        return {
            scale: 2, //658813476562495, //1,
            startX: 0,
            startY: 0,
            lines: {
                h: [100, 200],
                v: [100, 200]
            },
            thick: 20,
            lang: "zh-CN",
            isShowRuler: true,
            isShowReferLine: true
        }
    },
    components: {
        SketchRule
    }
});
</script>

A complete example can be found here

api

Interface

interface Lines {
    h: number[],
    v:  Array<Number>,
}
interface Shadow {
    x: number,
    y: number,
    width: number,
    height: number
}
interface Palette {
    bgColor: string, // ruler bg color
    longfgColor: string, // ruler longer mark color
    shortfgColor: string, // ruler shorter mark color
    fontColor: string, // ruler font color
    shadowColor: string, // ruler shadow color
    lineColor: string,
    borderColor: string',
    cornerActiveColor: string,
}

Attributes

Attributes	Description	Type	Default
lang	init language lang	String	zh-CN
scale	ruler scale size	Number	2
thick	thick size	Number	16
width	the window width of the currently loaded ruler	Number	-
height	the window height of the currently loaded ruler	Number	-
startX	x at the beginning of the ruler	Number	0
startY	y at the beginning of the ruler	Number	0
shadow	size and the start coordinates on the ruler of the shadow	Shadow	0
startY	y at the beginning of the ruler	Number	{x: 200,y: 100,width: 200,height: 400}
horLineArr	Initial values for horizontal reference lines	Array	[]
verLineArr	Initial values for vertical reference lines	Array	[]
palette	the palette of sketch ruler	Palette	{bgColor: 'rgba(225,225,225, 0)',longfgColor: '#BABBBC',shortfgColor: '#C8CDD0',fontColor: '#7D8694', shadowColor: '#E8E8E8',lineColor: '#EB5648', borderColor: '#DADADC',cornerActiveColor: 'rgb(235, 86, 72, 0.6)',}