import {isObject,isString,isArray,isLawfulType,isFunction} from "@/common/js/tools.js" let config ={ canvasid:{ type: "string", required: true, validator: function (value) { return value.length>0 }, value:"" }, canvascursorid:{ type: "string", required: true, validator: function (value) { return value.length>0 }, value:"" }, minvalue:{ type: "number", required: true, validator: function (value) { return value>0 }, value:0 }, maxvalue:{ type: "number", required: true, validator: function (value) { return value>0 }, value:0 }, interval:{ type: "number", required: true, validator: function (value) { return value>0 }, value:0 }, defaultvalue:{ type: "number", required: true, validator: function (value) { return value>0 }, value:0 }, precision:{ //小数点位数 type: "number", validator: function (value) { let values =[0,1,2] return values.indexOf(value)>=0; }, value:0 } } let screenWidth=0 let screenHeight=0 let heightDecimal=50 let heightDigit=25 let ratio=10 let fontSize=20 let canvasHeight=80 let harfline=5 let cursorheight=25 let lineWidth1= 1 let lineWidth2= 2 let rulecolor1 ="#FFA500" let rulecolor2 ="#FF8C00" let cursorcolor = '#0000FF' let canvasWidth=0 let value =0 let scroll_left = 0 function getvalue(key){ // console.log(key,config[key].value) return typeof config[key].value != "undefined" ?config[key].value:false; } function setconfig(param){ if(!isObject(param)){ throw new Error("drawruler param error") } Object.entries(config).forEach(([k, v]) => { if(v.required){ if(!param[k]){ throw new Error("param "+k +" required") } } let value = param[k]; if(v.type){ if(!isLawfulType(v.type,value)){ throw new Error("param "+k +" type error") } } if(isFunction(v.validator)){ if(!v.validator(value)){ throw new Error("param "+k +" value error") } } v.value = value config[k] = v }) } function dodrawruler(){ var context = uni.createCanvasContext(getvalue('canvasid')) let minvalue = getvalue('minvalue') let maxvalue = getvalue('maxvalue') let interval = getvalue('interval') let origionX = 0 let len = (maxvalue - minvalue)*ratio origionX = screenWidth/2 // if(len>=screenWidth){ // origionX = screenWidth/2 // }else{ // origionX = (screenWidth-len)/2 // } let origion = {x:origionX,y:0} let i = minvalue while(i <= maxvalue){ context.beginPath() let movetoX=origion.x + (i - minvalue) * ratio let movetoY=0 context.moveTo(movetoX, movetoY); let linetoX = origion.x + (i - minvalue) * ratio let linetoY = (i % ratio == 0 ? heightDecimal : heightDigit) context.lineTo(linetoX ,linetoY ) context.setLineWidth(lineWidth2) context.setStrokeStyle(i % ratio == 0 ? rulecolor1 : rulecolor2) context.stroke() context.setFillStyle('gray') if (i % ratio == 0) { context.setFontSize(fontSize); context.fillText(i == 0 ? ' ' + i : i, origion.x + (i - minvalue) * ratio - fontSize / 2, heightDecimal + 5 + fontSize) } context.closePath() // context.draw(true) i+=interval } setTimeout(()=>{// uni-app必须加上延迟,不然显示不出来, 亲测 context.draw() }, 50) } function setCanvasConfig(){ uni.getSystemInfo({ success: (res) => { screenWidth = res.windowWidth; // 屏幕宽度,单位为px screenHeight = res.windowHeight; // 屏幕高度,单位为px }, }); canvasWidth = (getvalue('maxvalue')- getvalue('minvalue')) * ratio + screenWidth; // canvasWidth =1000 config['canvasWidth']={ value:canvasWidth } config['canvasHeight']={ value:canvasHeight } } function getCanvasConfig(){ let use_config ={ canvasWidth:getvalue('canvasWidth'), canvasHeight:getvalue('canvasHeight'), screenWidth:screenWidth, screenHeight:screenHeight } // console.log(use_config) return use_config } function drowncursor(){ var context = uni.createCanvasContext(getvalue('canvascursorid')) var center = {x:screenWidth/2,y:0} center.y = harfline*Math.sqrt(3); var right ={x:center.x-harfline,y:0} var left ={x:center.x+harfline,y:0} context.beginPath() context.moveTo(right.x, 0); context.lineTo(left.x, 0); context.lineTo(center.x, center.y); context.closePath(); context.setFillStyle(cursorcolor) context.fill(); context.moveTo(center.x, 0); context.lineTo(center.x, 50); context.setLineWidth(lineWidth1) context.setStrokeStyle(cursorcolor) context.stroke(); context.draw(true) let defaultvalue = getvalue('defaultvalue') if(defaultvalue>0){ let minvalue = getvalue('minvalue') value = defaultvalue scroll_left = (value-minvalue)*10 }else{ let midvalue = (getvalue('maxvalue')-getvalue('minvalue'))/2 value = midvalue+getvalue('minvalue') scroll_left = canvasWidth/2-screenWidth/2 } } function getcursorvalue(){ return value } function getscrollleft(){ return scroll_left } function drawruler(param){ setconfig(param) setCanvasConfig() dodrawruler() drowncursor() } function setcursorvalue(scrollLeft,minvalue=0){ if(minvalue<=0){ minvalue = getvalue('minvalue') } let precision = getvalue('precision') let value = 0 if(precision==0){ value = Math.round(scrollLeft/10)+minvalue; }else{ value = parseFloat((scrollLeft/10).toFixed(precision))+minvalue } return value } export {drawruler,getCanvasConfig,getcursorvalue,setcursorvalue,getscrollleft}