NDAid/common/js/slider_ruler.js

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}
	console.log(center);
	var right ={x:center.x-harfline,y:0}
	var left ={x:center.x+harfline,y:0} 
	context.moveTo(right.x, 0);
	context.lineTo(left.x, 0);
	context.lineTo(center.x, center.y+5);
	context.closePath();
	context.setFillStyle(cursorcolor) 
	context.fill();
	context.beginPath()
	context.moveTo(center.x, 0);
	context.lineTo(center.x, 50);
	context.setLineWidth(lineWidth1)
	context.setStrokeStyle(cursorcolor)
	context.stroke();
	context.closePath();
	// context.draw(true)
	setTimeout(()=>{// uni-app必须加上延迟，不然显示不出来， 亲测
	  context.draw() 
	}, 50)
	
	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}