From 2b2198794d92504a1afd01783e8847941fc39fef Mon Sep 17 00:00:00 2001 From: ivo Date: Sun, 22 May 2022 13:10:29 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B0=BA=E5=AF=B8=E5=8F=98?= =?UTF-8?q?=E5=8C=96=E9=87=8D=E6=96=B0=E8=AE=A1=E7=AE=97=E5=88=BB=E5=BA=A6?= =?UTF-8?q?=EF=BC=8C=E7=BB=84=E4=BB=B6resize=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- LICENSE | 21 +++++++++ README.md | 56 +++++++++++++++++------- package.json | 14 +++++- src/App.vue | 22 +++++++++- src/components/dsw-ruler/index.vue | 69 +++++++++++++++++++++++------- 5 files changed, 147 insertions(+), 35 deletions(-) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..04bc7da --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 Neo Han + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md index 0d935b8..835b645 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,48 @@ # dsw-ruler -## Project setup +## Description +vue2 ruler tool + +## Installation ``` -npm install +npm install dsw-ruler ``` -### Compiles and hot-reloads for development +### Template ``` -npm run serve + +``` +### Script +``` +import DswRuler from 'dsw-ruler'; + +export default { + name: 'example', + components: { + DswRuler + }, + method: { + moveHandle(val) { + console.log("mouse move to: ", val); + }, + clickHandle(val) { + console.log("mouse click on: ", val); + }, + resize() { + this.$refs.ruler.resize() + } + } +} ``` -### Compiles and minifies for production -``` -npm run build -``` - -### Lints and fixes files -``` -npm run lint -``` - -### Customize configuration -See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/package.json b/package.json index ff8e4b1..ae4c123 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "dsw-ruler", "version": "0.1.0", - "main": "dist/ruler.dsw.min.js", + "main": "dist/dsw-ruler.umd.min.js", "private": false, "jsx": "preserve", "scripts": { @@ -42,5 +42,15 @@ "> 1%", "last 2 versions", "not dead" - ] + ], + "keywords": [], + "author": "dsw", + "license": "MIT", + "files": [ + "dist" + ], + "repository": { + "type": "git", + "url": "http://git.shao5.net/dsw0000/dsw_ruler.git" + } } diff --git a/src/App.vue b/src/App.vue index 2b4c2c4..2dd184f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,11 @@ @@ -12,9 +16,20 @@ export default { components: { DswRuler }, + data() { + return { + num: 1500, + } + }, methods: { callback(val) { console.log(val); + }, + sub() { + this.num -= 100; + }, + add() { + this.num += 100; } } } @@ -42,4 +57,9 @@ export default { height: 100%; width: 20px; } +.btn { + position: absolute; + top: 100px; + left: 100px; +} diff --git a/src/components/dsw-ruler/index.vue b/src/components/dsw-ruler/index.vue index a1f3777..683e0e9 100644 --- a/src/components/dsw-ruler/index.vue +++ b/src/components/dsw-ruler/index.vue @@ -2,7 +2,8 @@
@@ -40,32 +41,33 @@ export default { scale: 1, } }, + watch: { + maxNum(val, oldVal) { + this.resize() + console.log("inputVal = " + val + " , oldValue = " + oldVal) + this.scale = this.windowWidth / (this.maxNum - this.minNum); + this.clearGrid() + this.drawGrid() + } + }, mounted() { let canvas = document.getElementById('ruler'); canvas.addEventListener('mousemove', this.dottedLineMove, true) - canvas.addEventListener('click', this.dottedLineMove, true) + canvas.addEventListener('click', this.dottedLineClick, true) this.init(); }, methods: { init() { - this.windowHeight = this.height - - // const style = window.getComputedStyle(this.$el.parentNode,null) - // this.windowWidth = parseInt(style.getPropertyValue('width'), 10) - - console.log(this.windowWidth); - console.log(this.windowHeight); - let canvas = document.getElementById('ruler'); if (this.orientation) { this.windowWidth = canvas.getBoundingClientRect().height; - console.log('windowWidth', this.windowWidth); + // console.log('windowWidth', this.windowWidth); canvas.height = this.windowWidth; canvas.width = 20; } else { this.windowWidth = canvas.getBoundingClientRect().width; - console.log(this.windowWidth); + // console.log(this.windowWidth); canvas.width = this.windowWidth; canvas.height = 20; } @@ -74,8 +76,14 @@ export default { this.drawGrid() }, + clearGrid() { + let canvas = document.getElementById('ruler'); + let w = canvas.getBoundingClientRect().width; + let h = canvas.getBoundingClientRect().height; + let ctx = canvas.getContext("2d"); + ctx.clearRect(0, 0, w, h); + }, drawGrid() { - console.log('draw'); let canvas = document.getElementById('ruler'); if (!canvas.getContext) return; @@ -91,8 +99,8 @@ export default { let rulerLength = this.maxNum - this.minNum; let unitSize = maxPixel / rulerLength - console.log(this.maxNum - this.minNum); - console.log(unitSize); + // console.log(this.maxNum - this.minNum); + // console.log(unitSize); let unit = 40 if (unitSize < 0.25) { @@ -107,7 +115,7 @@ export default { unit = 2 } - console.log(unit); + // console.log(unit); let ctx = canvas.getContext("2d"); ctx.fillStyle = "#ACACAC"; @@ -162,6 +170,35 @@ export default { this.$emit('move', position) + }, + dottedLineClick(e) { + let position = 0; + if (this.orientation) { + // console.log(Math.floor((e.pageY) / this.scale) + this.minNum); + position = Math.floor((e.pageY) / this.scale) + this.minNum + } else { + // console.log(Math.floor((e.pageX) / this.scale) + this.minNum); + position = Math.floor((e.pageX) / this.scale) + this.minNum + } + + this.$emit('click', position) + }, + resize() { + let canvas = document.getElementById('ruler'); + + if (this.orientation) { + this.windowWidth = canvas.getBoundingClientRect().height; + // console.log('windowWidth', this.windowWidth); + canvas.height = this.windowWidth; + canvas.width = 20; + } else { + this.windowWidth = canvas.getBoundingClientRect().width; + // console.log(this.windowWidth); + canvas.width = this.windowWidth; + canvas.height = 20; + } + + this.scale = this.windowWidth / (this.maxNum - this.minNum); } } }