微信小程序

gaohaikuo1

1.注册  参照https://www.zhihu.com/question/277664094
2.下载开发平台 https://developers.weixin.qq.com ... tools/download.html
3.编写代码  
4.调试
5.发布

gaohaikuo1

最终代码

1. // index.js
   
2. Page({
   
3.   data: {
   
4.     editText: 'concentration'
   
5.   },
   
6.   //const maxValue = 10;
   
7.   inputChange(event) {
   
8.     //console.log(event.detail.value) // 输出input的值
   
9.     // 可以将获取的值传递给其他方法
   
10.     var y = (-8.678*Math.log(event.detail.value)-44.860)/100+0.36768;
    
11.     this.setData({
    
12.       editText: Math.round(y).toString()+" mg/L",   
    
13.     })
    
14. 
    
15.     this.changeColor(y,event.detail.value)
    
16.    
    
17.   },
    
18.   onReady: function () {
    
19.     this.changeColor('#ff0000',"input current")
    
20.   },
    
21.   changeColor: function (value,text) {
    
22.     wx.createSelectorQuery() .select('#myCanvas').fields({ node: true, size: true })
    
23.     .exec((res) => {
    
24.         // Canvas 对象
    
25.         const canvas = res[0].node
    
26.         console.log()
    
27.         // Canvas 画布的实际绘制宽高
    
28.         const renderWidth = res[0].width
    
29.         const renderHeight = res[0].height
    
30.         // Canvas 绘制上下文
    
31.         const ctx = canvas.getContext('2d')
    
32. 
    
33.         // 初始化画布大小
    
34.         const dpr = wx.getWindowInfo().pixelRatio
    
35.         canvas.width = renderWidth* dpr
    
36.         canvas.height = renderHeight* dpr
    
37.         ctx.scale(dpr, dpr)
    
38.         const x = 50, y = 50, w = 200, h = 200, r = 10;
    
39.         const BarNum = 50;
    
40.         ctx.beginPath();
    
41.         ctx.moveTo(x + r, y);
    
42.         ctx.lineTo(x + w - r, y);
    
43.         ctx.arcTo(x + w, y, x + w, y + r, r);
    
44.         ctx.lineTo(x + w, y + h - r);
    
45.         ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
    
46.         ctx.lineTo(x + r, y + h);
    
47.         ctx.arcTo(x, y + h, x, y + h - r, r);
    
48.         ctx.lineTo(x, y + r);
    
49.         ctx.arcTo(x, y, x + r, y, r);
    
50.         ctx.closePath();
    
51.         ctx.fillStyle = this.getColorMap(value,0,10);
    
52.         ctx.fill();
    
53.         for(let i = 0; i < BarNum; i++){
    
54.           this.drawColorBar(ctx,BarNum-i,Math.floor(h/BarNum),this.getColorMap(i,0,BarNum));
    
55.         }   
    
56.         //ctx.textAlign = "center";
    
57.         //ctx.font="24px Verdana";
    
58.         //ctx.fillStyle = "#FFFF00";
    
59.         //ctx.fillText(text,150,160);
    
60.     })
    
61.    
    
62.    
    
63.   },
    
64.   drawColorBar: function (ctx,i,h1,color) {   
    
65.     const x1 = 260, y1 = 50, w1 = 20 ;
    
66.     ctx.fillStyle = color;ctx.fillRect(x1,y1+i*h1,w1,h1);
    
67.   },
    
68.   getColorMap:function(colorNumber,startNum,EndNum){
    
69.     const topColorR = 0x00,topColorG = 0x00,topColorB = 0xFF;
    
70.     const bottomColorR = 0xFF ,bottomColorG =  0x00,bottomColorB =  0x00 ;
    
71.     var ratio = (colorNumber-startNum)/(EndNum-startNum);
    
72.     var R = Math.floor(topColorR+(bottomColorR-topColorR)*ratio);
    
73.     var G =  Math.floor(topColorG+(bottomColorG-topColorG)*ratio);
    
74.     var B =  Math.floor(topColorB+(bottomColorB-topColorB)*ratio);
    
75.     return "#"+this.NumToString(R)+this.NumToString(G)+this.NumToString(B);
    
76.   },
    
77.   NumToString:function(num) {
    
78.     var numlen = num.toString(16).length; //得到num的长度
    
79.     var strChar = "0";  //空缺位填充字符
    
80.     var str = num.toString(16);
    
81.     //console.log(str)
    
82.     for (var i = 0; i < 2 - numlen; i++) {
    
83.         str = strChar + str;
    
84.     }
    
85.     return str;
    
86. }
    
87. })
    

复制代码

gaohaikuo1

1. <!--index.wxml-->
   
2. <navigation-bar title="colorSet" back="{{false}}" color="black" background="#FFF"></navigation-bar>
   
3. <scroll-view class="scrollarea" scroll-y type="list">
   
4.   <view class="container">
   
5.    
   
6.     <view  class ="classICCAS">CAAS-CAS</view>
   
7.     <canvas id="myCanvas" height="800" type="2d"  class ="canvasClass" />
   
8.     <view  class ="inputClass"><input id="myInput" placeholder="current" bindinput="inputChange" /></view>
   
9.     <view  class ="inputClass1">10</view>
   
10.     <view  class ="inputClass2">0</view>
    
11.     <view  class ="inputClass3">{{editText}}</view>
    
12.     <view  class ="classConcentration">Concentration (mg/L)</view>
    
13.   </view>
    
14. </scroll-view>

复制代码

gaohaikuo1

1. /**index.wxss**/
   
2. page {
   
3.   height: 100vh;
   
4.   display: flex;
   
5.   flex-direction: column;
   
6. }
   
7. .scrollarea {
   
8.   flex: 1;
   
9.   overflow-y: hidden;
   
10. }
    
11. .canvasClass {
    
12.   position: absolute;
    
13.   top:6em;
    
14.   left: 0em;
    
15.   height: 20em;
    
16.   color: white;
    
17.   z-index: -1;
    
18. }
    
19. .inputClass{
    
20.   position: absolute;
    
21.   top:15em;
    
22.   left: 3.8em;
    
23.   color: yellow;
    
24.   z-index:10;
    
25.   text-align: center;
    
26. }
    
27. .inputClass1{
    
28.   position: absolute;
    
29.   top:8em;
    
30.   left: 16em;
    
31.   color: black;
    
32. }
    
33. .inputClass2{
    
34.   position: absolute;
    
35.   top:22em;
    
36.   left: 16.5em;
    
37.   color:  black;
    
38. }
    
39. .inputClass3{
    
40.   position: absolute;
    
41. 
    
42.   top:25em;
    
43.   left: 8em;
    
44.   color:  black;
    
45. }
    
46. .classConcentration{
    
47.   position: absolute;
    
48.   writing-mode:vertical-rl;
    
49.   top:10em;
    
50.   left: 17.5em;
    
51.   color:  black;
    
52. }
    
53. .classICCAS{
    
54.   position: absolute;
    
55.   top:8em;
    
56.   left: 7em;
    
57.   color:  black;
    
58. }

复制代码

gaohaikuo1

//index.json
{   
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  },

  "renderer": "webview"  
}