npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-sketch-ruler

v1.2.6

Published

> In using react, the zoom operation used for page presentation

Downloads

85

Readme

react-sketch-ruler

In using react, the zoom operation used for page presentation

build status

Cloud Studio Template

🚀 Features

  • 💡 以鼠标为中心缩放页面, 可以使用pazoom的特性
  • 📦 减化配置
  • 💎 提供还原, 放大, 缩小的功能
  • 📦 平台与业务代码通过插槽的方式进行分离, 也就是你只需要专注你的业务代码, 其他交给平台

🔑 说明


插件应用范围: 适合作为低代码平台操作页面缩放工具,比如做图工具如, 大屏可视化, 做图工具图怪兽等,类似ps的缩放效果.

🌈 应用案例(目前只有vue版):

GoView 高效拖拽式低代码数据可视化开发平台

GoView 2X 应用源码地址

🦄 demo

案例浏览: https://kakajun.github.io/react-sketch-ruler image

安装

支持全局导入和模块导入

npm install --save react-sketch-ruler

yarn add react-sketch-ruler  -S

引入方式

将打包后的dist包拷贝,用import导入,支持下面两种引用方式

import SketchRule from 'react-sketch-ruler'
import 'react-sketch-ruler/lib/style.css'

CDN 引入

<script src="https://unpkg.com/react-sketch-ruler/lib/index.umd.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/react-sketch-ruler/lib/style.css" />

const SketchRule = window.SketchRuler

详情参见 CDN demo

支持的功能

  • [x] 标尺渲染
  • [x] 缩放内容,重绘标尺
  • [x] 按Ctrl+鼠标滚轮缩放, 根据鼠标位置发生变化
  • [x] 按空格拖动画布
  • [x] 切换标尺状态,显示或隐藏
  • [x] 参考线管理(增加删除)
  • [x] 支持参考线任意地方拖拽
  • [x] 左上角的眼睛,点击能控制红线显影
  • [x] 初始化自动居中
  • [x] 提供右下角按钮缩放,还原所需API
  • [x] 刻度吸附效果
  • [x] 选中阴影阴影响应
  • [x] 阴影刻度数字响应

未来支持功能

  • [] 加入单元测试功能

参考一个完整的例子,点击这里

api

属性

| 属性名称 | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | | scale | 初始化标尺的缩放及画布 | Number | 1 | | rate | 初始化标尺的缩放 | Number | 1 | | thick | 标尺的厚度 | Number | 16 | | width | 放置标尺窗口的宽度 | Number | 1400 | | height | 放置标尺窗口的高度 | Number | 900 | | paddingRatio | 画布与外框间隔 | Number | 20% (基于外框宽高最小长度) | | autoCenter | 自动居中对齐 | Boolean | true (设为false,那么需要在panzoomOption中传入startX,startY) | | eyeIcon | 睁眼图标 | String | - | | closeEyeIcon | 闭眼图标 | String | - | | canvasWidth | 画布宽 | Number | 1000 | | canvasHeight | 画布高 | Number | 700 | | isShowReferLine | 是否显示标线 | Boolean | true | | showRuler | 是否显示尺规 | Boolean | true | | showShadowText | 是否显示阴影文字 | Boolean | true | | lines | 初始化水平标尺上的参考线 | object | {h:[],v:[]} | | snapsObj | 吸附刻度集合 | object | {h:[],v:[]} | | snapThreshold | 吸附距离 | Number | 5 | | shadow | 阴影配置 | object | {x: 0,y: 0, width: 0, height: 0} | | gridRatio | 刻度分散比例 | Number | 1 | | selfHandle | 自己处理监听移动和缩放 | Boolean | false | | panzoomOption | panzoom相关的扩展参数 | object | - | | palette | 标尺的样式配置参数 | Object | 如下表 |

| 属性名称 | 描述 | 默认值 | | --------------- | ---------------- | ------------------------------ | | bgColor | 画布背景 | #f6f7f9 | | longfgColor | 刻度背景 | #BABBBC | | fontColor | 刻度字体颜色 | #7D8694 | | fontShadowColor | 刻度阴影字体颜色 | #106ebe | | shadowColor | 激活阴影背景 | #E8E8E8 | | lineColor | 对准线颜色 | #51d6a9 | | lineType | 对准线类型 | solid (solid \dashed \ dotted) | | lockLineColor | 锁定对准线颜色 | #d4d7dc | | hoverColor | 标签颜色字体 | #fff | | hoverBg | 标签颜色背景 | #000 | | borderColor | 尺子外边框颜色 | #eeeeef |

更多pazoom插件的配置的panzoomOption参数,可以参考pazoom document

Event

| 事件名称 | 描述 | 回调参数 | | --- | --- | --- | | onHandleCornerClick | 左上角点击事件 | | | updateScale | 更新scale事件 | | | handleLine | 更新标线事件 | | | onZoomChange | 画布移动,缩放事件 | {dimsOut:{elem: {}, parent: {}},originalEvent:{},scale,x,y} |

使用说明

  1. 同时按Ctrl+鼠标滚轮缩放, 根据鼠标位置发生页面缩放
  2. 同时按空格+鼠标左键, 拖动画布
  3. 有些需要自己定义监听移动和缩放,不想按空格移动, 或者不想Ctrl+weel 移动, 那么可以设置selfHandle为true,然后通过ref获取到组件实例,然后通过实例调用组件的方法, 自定义监听按键
  4. 具体操作参见我插件里面的监听移动和缩放方法
const panzoomInstance = sketchruleRef.panzoomInstance

document.addEventListener('wheel', function (e) {
  if (e.ctrlKey || e.metaKey) {
    panzoomInstance.zoomWithWheel(e)
  }
})

// 让按下空格键才能移动画布
document.addEventListener('keydown', function (e) {
  if (e.key === ' ') {
    panzoomInstance.bind()
    e.preventDefault()
  }
})

document.addEventListener('keyup', function (e) {
  if (e.key === ' ') {
    panzoomInstance.destroy()
  }
})

插槽提供方法

| 事件名称 | 描述 | 回调参数 | | ----------- | ----------------- | -------- | | reset | 画布重置位置 | | | zoomIn | 画布放大 | | | zoomOut | 画布缩小 | | | initPanzoom | 初始化panzoom实例 | |

插槽ref

panzoomInstance panzoom实例

QQ 技术交流群:

欢迎大家一起参与插件建设

贡献者

最后

这是个开源业余做的功能,欢迎加强该插件的小伙伴加入, 如果插件react-sketch-ruler对您有帮助,请给个star,您的鼓励是我最大的动力。

引用

vue3标尺组件 vue3-sketch-ruler