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

vue3-sketch-ruler

v2.2.6

Published

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

Downloads

1,287

Readme

vue3-sketch-ruler

In using vue3, the zoom operation used for page presentation

build status

Cloud Studio Template

🚀 Features

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

issues

  1. 1X版本的问题, 已经不会再修改, 除非自己提pr我来合或者升级更强大的2X版本
  2. 2X正常修改, 欢迎提pr

✨ 升级特性(同1X比较)

  1. 在原来1X版本中满足基本的缩放和标注辅助线的功能, 但是缩放时, 是固定以画面左上角位缩放点, 这样子在实际操作中会很不方便,所以这里对缩放功能进行了改进,以鼠标为中心缩放页面,这样在操作中会更方便。缩放采用改造过的pazoom插件,加了些方法使得更适配我的插件, 详情见pazoom
  2. 对辅助线做了调整, 减少了细刻度的绘制, 因为已经有刻度显示, 删除后画面更加简洁
  3. 辅助线位置显示跟随鼠标移动
  4. 删除辅助线是以拖拽线条到编辑框外即可
  5. 新增还原, 放大, 缩小的API,自动居中对齐
  6. 修改引用方式, 减少繁琐的配置
  7. 对标墨刀, 修改新增和删除参考线
  8. 初始化自动居中对齐
  9. 新增辅助线对刻度有吸附效果
  10. 新增阴影刻度显示效果

升级过程简单写了一篇掘金文章, 同行或感兴趣的可以留言交流

掘金:1X 大屏页面缩放插件---升级改造

掘金:2X vue3-sketch-ruler插件的蜕变与升级

🔑 说明

  1. 插件应用范围: 适合作为低代码平台操作页面缩放工具,比如做图工具如, 大屏可视化, 做图工具图怪兽等,类似ps的缩放效果.
  2. 由1X 版本升级2X可以参考GoView 2X 应用源码地址 的提交修改记录进行
  3. 此master最新2X版本只在vue3中使用, 如果需要学习vue-demi关于vue2/vue3通用组件的,或者希望用到原来风格的, 请切换到1x分支, 使用1X版本。
  4. 注意2X版本作为加强版,重构了内核与1X版本使用方法有较大的变革,不兼容,请谨慎升级!继续使用1X版本的同学,请切换到1x分支阅读使用文档1x

🦄 demo

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

CodePen 示例

安装

支持全局导入和模块导入

npm install --save vue3-sketch-ruler

yarn add vue3-sketch-ruler  -S

引入方式

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

import SketchRule from 'vue3-sketch-ruler'
import 'vue3-sketch-ruler/lib/style.css'
// ts需要时引入类型
import type { SketchRulerProps } from 'vue3-sketch-ruler'

CDN 引入, 详情参见 CDN demo

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

const SketchRule = window.SketchRuler
const App = {
  components: { 'sketch-rule': SketchRule },
  setup() {}
}
...

支持的功能

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

未来计划

  • [] 加入单元测试功能

使用

<SketchRule
  :thick="state.thick"
  v-model:scale="state.scale"
  :width="rectWidth"
  :height="rectHeight"
  :canvasWidth="canvasWidth"
  :canvasHeight="canvasHeight"
  ref="sketchrule"
  :isShowReferLine="state.isShowReferLine"
  @onCornerClick="handleCornerClick"
  :lines="state.lines"
>
  <template #default>
    <div data-type="page" :style="canvasStyle">
      <img class="img-style" :src="bgImg" alt="" />>
    </div>
  </template>
  <template #btn="{ resetMethod, zoomInMethod, zoomOutMethod }">
    <div class="btns">
      <button class="btn reset-btn" @click="resetMethod">还原</button>
      <button class="btn zoomin-btn" @click="zoomInMethod">放大</button>
      <button class="btn zoomout-btn" @click="zoomOutMethod">缩小</button>
    </div>
  </template>
</SketchRule>

import Vue from 'vue';
import {SketchRule} from "vue-sketch-ruler";
import 'vue3-sketch-ruler/lib/style.css'
const rectWidth = 1600
const rectHeight = 800
const canvasWidth = 1000
const canvasHeight = 500

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

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

| 事件名称 | 描述 | 回调参数 | | ------------- | ----------------- | ----------------------------------------------------------- | | onCornerClick | 左上角点击事件 | | | zoomchange | 画布移动,缩放事件 | {dimsOut:{elem: {}, parent: {}},originalEvent:{},scale,x,y} |

使用说明

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

// 让按下中键才能移动画布, mousedown
document.addEventListener('pointerdown', function (e) {
  if (e.button === 1) {
    sketchruleRef.value.cursorClass = 'grabCursor'
    panzoomInstance.bind()
    panzoomInstance.handleDown(e)
    e.preventDefault()
  }
})

document.addEventListener('pointerup', function (e) {
  if (e.button === 1) {
    panzoomInstance.destroy()
    sketchruleRef.value.cursorClass = 'defaultCursor'
  }
})

插槽提供方法

| 事件名称 | 描述 | 回调参数 | | -------- | ------------ | -------- | | reset | 画布重置位置 | | | zoomIn | 画布放大 | | | zoomIn | 画布缩小 | |

插件兼容问题

  1. 不能和selecto一起使用,会冲突

🌈 Who is using this?

avue大屏可视化工具 image

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

GoView 2X 应用源码地址

open a PR to add your library ;)

QQ 技术交流群:

贡献者

最后

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

引用

vue标尺组件 vue-sketch-ruler