增加尺寸变化重新计算刻度，组件resize函数

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.

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
+<template>
+<div>
+  <DswRuler
+    ref="ruler"
+    :minNum="0"
+    :maxNum="100"
+    :orientation="1"
+    @move="moveHandle"
+    @click="clickHandle"
+  />
+</div>
+</template>
+```
+### 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/).

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"
+  }
 }

src/App.vue

@@ -1,7 +1,11 @@
 <template>
   <div id="app">
-    <DswRuler class="horizontal" :minNum="-107" :maxNum="1500" @move="callback" @click="callback"></DswRuler>
+    <DswRuler class="horizontal" :minNum="-107" :maxNum="num" @move="callback" @click="callback"></DswRuler>
     <!-- <DswRuler class="vertical" :orientation="1" :minNum="-107" :maxNum="150"></DswRuler> -->
+    <div class="btn">
+      <button @click="sub">-</button>
+      <button @click="add">+</button>
+    </div>
   </div>
 </template>
 
@@ -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;
+}
 </style>

src/components/dsw-ruler/index.vue

@@ -2,7 +2,8 @@
 <div>
   <canvas
     id="ruler"
-    :style="{'width': '100%', 'height': '100%', 'position':position}"
+    ref="ruler"
+    :style="{'width': '100%', 'height': '100%', 'position': 'relative'}"
     ></canvas>
 </div>
 </template>
@@ -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);
     }
   }
 }