「Vue — 插件」标尺vue-sketch-ruler

昔不亏
• 阅读 2062

git地址

安装 npm install --save vue-sketch-ruler 示例

<template>
  <div class="wrapper" id="wrapper">
    <SketchRule
      :lang="lang"
      :thick="thick"
      :scale="scale"
      :width="width"
      :height="height"
      :startX="startX"
      :startY="startY"
      :shadow="shadow"
      :horLineArr="lines.h"
      :verLineArr="lines.v"
      :cornerActive="true"
      @handleLine="handleLine"
      @onCornerClick="handleCornerClick"
    ></SketchRule>
    <div ref="screensRef" id="screens" @wheel="handleWheel" @scroll="handleScroll">
      <div ref="containerRef" class="screen-container">
        <div id="canvas" :style="canvasStyle" />
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import SketchRule from 'vue-sketch-ruler'

const rectWidth = 960
const rectHeight = 720
export default Vue.extend({
    data() {
        return {
            scale: 1, 
            startX: 0,
            startY: 0,
            lines: {
                h: [100, 200],
                v: [100, 200],
            },
            thick: 20,
            width: 500,
            height: 400,
            lang: 'zh-CN', // 中英文
            isShowRuler: true, // 显示标尺
            isShowReferLine: false, // 显示参考线
        }
    },
    components: {
        SketchRule,
    },
    computed: {
        shadow() {
            return {
                x: 0,
                y: 0,
                width: rectWidth,
                height: rectHeight,
            }
        },
        canvasStyle() {
            return {
                width: rectWidth + 'px',
                height: rectHeight + 'px',
                transform: `scale(${this.scale})`,
            }
        },
    },
    methods: {
        handleLine(lines) {
            this.lines = lines
        },
        handleCornerClick() {

        },
        handleScroll() {
            const screensRect = document
            .querySelector('#screens')
            .getBoundingClientRect()
            const canvasRect = document
            .querySelector('#canvas')
            .getBoundingClientRect()

            // 标尺开始的刻度
            const startX = (screensRect.left + this.thick - canvasRect.left) / this.scale
            const startY = (screensRect.top + this.thick - canvasRect.top) / this.scale

            this.startX = startX >> 0
            this.startY = startY >> 0
        },
        // 控制缩放值
        handleWheel(e) {
            if (e.ctrlKey || e.metaKey) {
                e.preventDefault()
                const nextScale = parseFloat(
                    Math.max(0.2, this.scale - e.deltaY / 500).toFixed(2),
                )
                this.scale = nextScale
            }
            this.$nextTick(() => {
                this.handleScroll()
            })
        },
        initSize() {
            const wrapperRect = document
            .querySelector('#wrapper')
            .getBoundingClientRect()
            const borderWidth = 1
            this.width = wrapperRect.width - this.thick - borderWidth
            this.height = wrapperRect.height - this.thick - borderWidth
        },
    },
    mounted() {
        // 滚动居中
        this.$refs.screensRef.scrollLeft = this.$refs.containerRef.getBoundingClientRect().width / 2 - 300 // 300 = #screens.width / 2
        this.$nextTick(() => {
            this.initSize()
        })
    },
})
</script>
<style>
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow: hidden;
}

body * {
  box-sizing: border-box;
  user-select: none;
}

.wrapper {
  background-color: #f5f5f5;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 900px;
  height: 700px;
  border: 1px solid #dadadc;
}

#screens {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.line {
}

.screen-container {
  position: absolute;
  width: 5000px;
  height: 3000px;
}

.scale-value {
  position: absolute;
  left: 0;
  bottom: 100%;
}

.button {
  position: absolute;
  left: 100px;
  bottom: 100%;
}

.button-ch {
  position: absolute;
  left: 200px;
  bottom: 100%;
}

.button-en {
  position: absolute;
  left: 230px;
  bottom: 100%;
}

#canvas {
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -80px;
  width: 160px;
  height: 200px;
  background: lightblue;
  transform-origin: 50% 0;
}
</style>

效果图 「Vue — 插件」标尺vue-sketch-ruler

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这