canvas-color-disc - npm Package Compare versions

Comparing version 1.0.14 to 1.1.0

package.json

 {
   "name": "canvas-color-disc",
-  "version": "1.0.14",
+  "version": "1.1.0",
   "description": "Color disc realized by canvas",
@@ -43,11 +43,7 @@ "private": false,
     "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",
@@ -66,3 +62,2 @@ "cross-spawn": "^5.0.1",
     "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
@@ -73,9 +68,5 @@ "glob-all": "^3.1.0",
     "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",
@@ -82,0 +73,0 @@ "postcss-loader": "^2.0.8",

README.md

@@ -17,2 +17,3 @@ <!--
 <img src="https://udfs.unisiot.com/group1/M00/03/85/rBEBA2FqlXOAfw1hAAECEWBl9Kc837.png" width="50%">
+
 ## Build Setup
@@ -29,3 +30,8 @@
 ```
+main.js添加组件
+```
+import CanvasColorDisc from 'canvas-color-disc'
+Vue.use(CanvasColorDisc)
 
+```
 
@@ -36,10 +42,12 @@ ```vue
         <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"
-            @change="change"></CanvasColorDisc>
+            @change="changeColor"></CanvasColorDisc>
     </div>
@@ -49,8 +57,4 @@ </template>
 <script>
-import CanvasColorDisc from 'CanvasColorDisc'
 export default {
     name: 'App',
-    components: {
-        CanvasColorDisc,
-    },
     data() {
@@ -60,10 +64,14 @@ return {
             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()
         },
@@ -81,1 +89,14 @@ },
 
+| 参数        | 说明    | 类型                                        | 默认值 |
+| ------------- | ----------- | ----------------------------------------------- | ------ |
+| 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） |

src/uitl.js

@@ -7,3 +7,3 @@ /* eslint-disable */
       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+')';
@@ -17,3 +17,3 @@ ctx.beginPath();
   }
-  static hvStoRGB(hi, vi, si) {
+  static hvsToRGB(hi, vi, si) {
     let h = hi * 180 / Math.PI;
@@ -45,3 +45,3 @@ const rgb = {};
   }
-  static RGBtoHvs(r, g, b) {
+  static RGBToHvs(r, g, b) {
     const rgb = {
@@ -77,3 +77,3 @@ r: r,
   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;
@@ -99,3 +99,3 @@ let h =360 - hsb.h;
   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;
@@ -161,3 +161,3 @@ let h =360-hsb.h;
   // rgb转16进制
-  static rgbToHex (color){
+  static RGBToHex (color){
     if(color.indexOf("#") != -1) {
@@ -175,3 +175,3 @@ return color;
 
-  static hexTorgb (hex){
+  static hexToRGB (hex){
     var hexNum = hex;
@@ -200,3 +200,3 @@ var rgb = {};
 }
-  static rgbToHsv (arr){
+  static RGBToHsv (arr){
     var h = 0, s = 0, v = 0;
@@ -203,0 +203,0 @@ var r = arr[0], g = arr[1], b = arr[2];

No alert changes

Improved metrics

Total package byte prevSize

56259

increased by3.62%

Dev dependency count

53

decreased by-14.52%

Number of lines in readme file

97

increased by27.63%

No dependency changes