canvas-color-disc 1.0.13 → 1.1.0

package/README.md

@@ -14,52 +14,61 @@
 ![avatar](https://udfs.unisiot.com/group1/M00/03/85/rBEBA2FqlXOAfw1hAAECEWBl9Kc837.png)
 
 <img src="https://udfs.unisiot.com/group1/M00/03/85/rBEBA2FqlXOAfw1hAAECEWBl9Kc837.png" width="50%">
+
 ## Build Setup
 
 ``` bash
 # install dependencies
-npm install
+npm i canvas-color-disc --save
 ```
-
+yarn
 ``` bash
-# serve examples at localhost:8080
-npm run start
+# install dependencies
+yarn add canvas-color-disc
+```
+main.js添加组件
+```
+import CanvasColorDisc from 'canvas-color-disc'
+Vue.use(CanvasColorDisc)
+
 ```
 
 ```vue
 <template>
     <div id="app">
         <p>RGB: {{RGB}}</p>
+        <p>Hex: {{Hex}}</p>
         <p>changing RGB: {{changingRGB}}</p>
-        <canvas-color-disc
-            vals="0"
-            :rgb="RGB"
+        <p>changing Hex: {{changingHex}}</p>
+        <CanvasColorDisc
+            id="0"
+            :color="RGB"
             :width="300"
             :height="240"
             @changing="changing"
-            @change="change"></canvas-color-disc>
+            @change="changeColor"></CanvasColorDisc>
     </div>
 </template>
 
 <script>
-import CanvasColorDisc from './components/CanvasColorDisc.vue'
 export default {
     name: 'App',
-    components: {
-        CanvasColorDisc,
-    },
     data() {
         return {
             RGB: { r: 255, g:255, b:255 },
             changingRGB: '',
+            changingHex: '',
+            Hex: '',
         }
     },
     methods: {
-        change(newRgb, utils) {
+        changeColor(newRgb, utils) {
             this.RGB = newRgb
+            this.Hex = `#${utils.RGBToHex(`(${newRgb.r}, ${newRgb.g}, ${newRgb.b})`)}`.toUpperCase()
         },
         changing(newRgb, utils) {
             this.changingRGB = JSON.stringify(newRgb)
+            this.changingHex = `#${utils.RGBToHex(`(${newRgb.r}, ${newRgb.g}, ${newRgb.b})`)}`.toUpperCase()
         },
     },
 }
@@ -72,3 +81,16 @@ export default {
 </style>
 ```
 
+| 参数        | 说明    | 类型                                        | 默认值 |
+| ------------- | ----------- | ----------------------------------------------- | ------ |
+| id | canvas id拼接  | String                              | "0" |
+| color | 默认颜色 | Object | {"r": 255, "g": 255, "b": 255} |
+| width | canvas画板宽度 |    Number                      | window.innerWidth * 0.7 |
+| height | canvas画板高度 | Number                         | window.innerWidth * 0.78 |
+
+
+
+| 事件        | 说明    | 回调参数 |
+| ------------- | ----------- | ----------------------------------------------- |
+| changing | 滑动选择回调  | rgb: 颜色, Util: 内置util，可以转换颜色（Util.hvsToRGB、Util.RGBToHvs、Util.RGBToHex、Util.hexToRGB、Util.RGBToHsv、Util.hsvToRgb） |
+| change | 选择结束回调 | rgb: 颜色, Util: 内置util，可以转换颜色（Util.hvsToRGB、Util.RGBToHvs、Util.RGBToHex、Util.hexToRGB、Util.RGBToHsv、Util.hsvToRgb） |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-color-disc",
-  "version": "1.0.13",
+  "version": "1.1.0",
   "description": "Color disc realized by canvas",
   "private": false,
   "main": "src/index.js",
@@ -40,15 +40,11 @@
     "babel-jest": "^21.0.2",
     "babel-loader": "^7.1.1",
     "babel-plugin-dynamic-import-node": "^1.2.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
-    "chalk": "^2.0.1",
-    "chromedriver": "^2.27.2",
     "copy-webpack-plugin": "^4.0.1",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
@@ -62,25 +58,19 @@
     "eslint-plugin-standard": "^3.0.1",
     "eslint-plugin-vue": "^5.2.3",
     "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "glob-all": "^3.1.0",
     "html-webpack-plugin": "^2.30.1",
     "jest": "^22.0.4",
     "jest-serializer-vue": "^0.3.0",
-    "mockjs": "^1.0.1-beta3",
-    "nightwatch": "^0.9.12",
     "node-notifier": "^5.1.2",
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "ora": "^1.2.0",
-    "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "purify-css": "^1.2.5",
     "purifycss-webpack": "^0.7.0",
-    "quill": "^1.3.6",
     "rimraf": "^2.6.0",
     "sass-loader": "^7.3.1",
     "selenium-server": "^3.0.1",

package/src/App.vue

@@ -9,10 +9,12 @@
 <template>
     <div id="app">
         <p>RGB: {{RGB}}</p>
+        <p>Hex: {{Hex}}</p>
         <p>changing RGB: {{changingRGB}}</p>
+        <p>changing Hex: {{changingHex}}</p>
         <CanvasColorDisc
-            vals="0"
-            :rgb="RGB"
+            id="0"
+            :color="RGB"
             :width="300"
             :height="240"
             @changing="changing"
@@ -27,14 +29,18 @@ export default {
         return {
             RGB: { r: 255, g:255, b:255 },
             changingRGB: '',
+            changingHex: '',
+            Hex: '',
         }
     },
     methods: {
         changeColor(newRgb, utils) {
             this.RGB = newRgb
+            this.Hex = `#${utils.RGBToHex(`(${newRgb.r}, ${newRgb.g}, ${newRgb.b})`)}`.toUpperCase()
         },
         changing(newRgb, utils) {
             this.changingRGB = JSON.stringify(newRgb)
+            this.changingHex = `#${utils.RGBToHex(`(${newRgb.r}, ${newRgb.g}, ${newRgb.b})`)}`.toUpperCase()
         },
     },
 }

package/src/components/CanvasColorDisc.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="rgb-color" style="width:100%;">
-        <div class="colorPalatte" :class="`colorPalatte${vals}`">
+        <div class="colorPalatte" :class="`colorPalatte${id}`">
             <canvas
                 class="cans"
                 :width="width"
-                :id="`canvasBg${vals}`"
+                :id="`canvasBg${id}`"
                 :height="height" />
             <canvas
-                class="cans ids" :width="width" :id="`canvasSelector${vals}`" :height="height" @touchmove="handle"
+                class="cans ids" :width="width" :id="`canvasSelector${id}`" :height="height" @touchmove="handle"
                 @touchend="endhandle" @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp" />
         </div>
     </div>
@@ -20,29 +20,33 @@ import Util from './../uitl.js';
 export default {
   name: 'CanvasColorDisc',
   props: {
-    vals: {
+    // canvas id
+    id: {
       type: String,
       default: '0',
       required: true,
     },
-    rgb: {
+    // 颜色值，可以是rgb的JSON格式，也可以是String
+    color: {
       type: Object,
       default: () => {
         return { r: 255, g: 255, b: 255 };
       },
       required: true,
     },
+    // 画布宽度
     width: {
       type: Number,
       default: window.innerWidth * 0.7, // 画布宽
     },
+    // 画布高度
     height: {
       type: Number,
       default: window.innerWidth * 0.78, // 画布高
     },
   },
   watch: {
-    rgb: {
+    color: {
       handler: function (val) {
         this.r = val.r;
         this.g = val.g;
@@ -77,16 +81,16 @@ export default {
     };
   },
   mounted() {
-    const cpt = window.document.querySelector(`#canvasSelector${this.vals}`);
+    const cpt = window.document.querySelector(`#canvasSelector${this.id}`);
     this.centerX = this.width / 2;
     this.centerY = this.height / 2;
     // this.leftColor = (document.body.clientWidth-this.width)/2;
-    this.canvasBg = window.document.querySelector(`#canvasBg${this.vals}`).getContext('2d');
-    this.cstor = window.document.querySelector(`#canvasSelector${this.vals}`);
-    this.canvasSelector = window.document.querySelector(`#canvasSelector${this.vals}`).getContext('2d');
+    this.canvasBg = window.document.querySelector(`#canvasBg${this.id}`).getContext('2d');
+    this.cstor = window.document.querySelector(`#canvasSelector${this.id}`);
+    this.canvasSelector = window.document.querySelector(`#canvasSelector${this.id}`).getContext('2d');
 
     //解决锯齿
-    var canvas = window.document.querySelector(`#canvasBg${this.vals}`);
+    var canvas = window.document.querySelector(`#canvasBg${this.id}`);
     var width = canvas.width;
     var height = canvas.height;
     if (window.devicePixelRatio) {
@@ -169,11 +173,22 @@ export default {
     },
     mouseMove(e) {
       if (this.mouseStart) {
-        this.endClick(e)
+        e.preventDefault();
+        const xl = e.clientX;
+        const yl = e.clientY;
+        let nx = xl - this.cstor.getBoundingClientRect().left;
+        let ny = yl - this.cstor.getBoundingClientRect().top;
+        this.getRgbbyxy(nx, ny);
       }
     },
     mouseUp(e) {
       this.mouseStart = false;
+      e.preventDefault();
+      const xl = e.clientX;
+      const yl = e.clientY;
+      let nx = xl - this.cstor.getBoundingClientRect().left;
+      let ny = yl - this.cstor.getBoundingClientRect().top;
+      this.getRgbbyxyend(nx, ny);
     },
     endClick(e) {
       e.preventDefault();
@@ -186,7 +201,7 @@ export default {
     getRgbbyxyend(xt, yt) {
       const rad = Util.getSelectorRadians(xt, yt, this.centerX, this.centerY, this.radius);
       if (rad.r > this.radius) return;
-      const rgbs = Util.hvStoRGB(rad.radian, 255, rad.r);
+      const rgbs = Util.hvsToRGB(rad.radian, 255, rad.r);
       if (rad.r < 8) {
         rgbs.r = 255; rgbs.g = 255; rgbs.b = 255;
       }
@@ -209,7 +224,7 @@ export default {
     getRgbbyxy(xt, yt) {
       const rad = Util.getSelectorRadians(xt, yt, this.centerX, this.centerY, this.radius);
       if (rad.r > this.radius) return;
-      const rgbs = Util.hvStoRGB(rad.radian, 255, rad.r);
+      const rgbs = Util.hvsToRGB(rad.radian, 255, rad.r);
       if (rad.r < 8) {
         rgbs.r = 255; rgbs.g = 255; rgbs.b = 255;
       }

package/src/uitl.js

@@ -4,7 +4,7 @@ class Util {
   static drawColorDisk (ctx, x, y, r) {
     for (let i = 0; i <= r; i+=0.4) {
       for (let j = 0; j < Math.PI*2; j+= Math.PI/90) {
-        const rgbarr = this.hvStoRGB(j,255,i);
+        const rgbarr = this.hvsToRGB(j,255,i);
         ctx.strokeStyle = 'rgb('+rgbarr.r+','+rgbarr.g+','+rgbarr.b+')';
         ctx.beginPath();
         ctx.arc(x,y,i,-j,-j-Math.PI/90,true);
@@ -13,7 +13,7 @@ class Util {
     }
     return false;
   }
-  static hvStoRGB(hi, vi, si) {
+  static hvsToRGB(hi, vi, si) {
     let h = hi * 180 / Math.PI;
     const rgb = {};
     h = Math.round(h);
@@ -40,7 +40,7 @@ class Util {
       b: rgb.b < 0 ? 0 : Math.round(rgb.b)
     };
   }
-  static RGBtoHvs(r, g, b) {
+  static RGBToHvs(r, g, b) {
     const rgb = {
       r: r,
       g: g,
@@ -71,7 +71,7 @@ class Util {
     return hsb;
   }
   static selectorLocation (rgb) {
-    const hsb = this.RGBtoHvs(rgb.r, rgb.g, rgb.b);
+    const hsb = this.RGBToHvs(rgb.r, rgb.g, rgb.b);
     let r = hsb.s;
     let h =360 - hsb.h;
     let y = Math.sin(h * Math.PI/180)*r;
@@ -92,7 +92,7 @@ class Util {
     return { x: x, y: y };
   }
   static rMax (rgb) {
-    const hsb = this.RGBtoHvs(rgb.r, rgb.g, rgb.b);
+    const hsb = this.RGBToHvs(rgb.r, rgb.g, rgb.b);
     let r = hsb.s;
     let h =360-hsb.h;
     let y = Math.sin(h * Math.PI/180)*r;
@@ -153,7 +153,7 @@ class Util {
   }
 
   // rgb转16进制
-  static rgbToHex (color){
+  static RGBToHex (color){
     if(color.indexOf("#") != -1) {
       return color;
     }
@@ -166,7 +166,7 @@ class Util {
     return value.slice(1);
   }
 
-  static hexTorgb (hex){
+  static hexToRGB (hex){
     var hexNum = hex;
     var rgb = {};
     hexNum = '0x' + (hexNum.length < 6 ? repeatLetter(hexNum, 2) : hexNum);
@@ -190,7 +190,7 @@ class Util {
         return result;
     }
 }
-  static rgbToHsv (arr){
+  static RGBToHsv (arr){
     var h = 0, s = 0, v = 0;
     var r = arr[0], g = arr[1], b = arr[2];
     arr.sort(function (a, b) {