威纶通JS自定义滑动开关源码公布

成精的年糕

效果



JS元件接口定义



HmiAddr：滑动开关地址，可修改

max：量程-最大

min：量程-最小

TextHide：是否隐藏文本

TextFontSize：文本大小

SlidWayColor：滑杆颜色

SlideBlockColor：滑杆背景颜色

SlidDisable：滑杆禁止操作开关

SlidDisableMode：禁止操作模式，0锁定，1隐藏

代码块



var  cavSlidWay = new Canvas();var  cavSlideBlock = new Canvas();var  cavTxt = new Canvas();var  mouseArea = new MouseArea();
//widget.add按照添加顺序，最新添加的是最底层，最后添加的是最上层this.widget.add(cavSlidWay);
this.widget.add(cavSlideBlock);
this.widget.add(cavTxt);
this.widget.add(mouseArea);var  self = this;
let isDragging = false;
let dragStartX = 0;
let Txtdrag=false;//########滑轨相关参数定义########可修改---------
var  SlidWay = {
w: cavSlidWay.width-Math.round(cavSlidWay.height/5)*3,h: Math.round(cavSlidWay.height/5),x: Math.round(3*cavSlidWay.height/10),y: Math.round(cavSlidWay.height/2-Math.floor(cavSlidWay.height/5)/2),Color: this.config.SlidWayColor, //'#ccc',  //滑轨颜色r: Math.floor(cavSlidWay.height/5)/1//滑轨圆角半径};
//JS元件的尺寸虽然可以通过代码赋值的方式再次修改//并可在UI上看到修改后的大小，但是鼠标事件可点击区域并没有随之改变//鼠标操作区域仍然是静态放置的位置区域，重定义大小在本例不能使用//滑轨高度根据JS元件高度按占比设置//########滑块和填充相关参数定义########可修改---------//滑块使用圆形定义
var  SlideBlock = {
x: SlidWay.x,y: SlidWay.y+Math.round(SlidWay.h/2),Color: this.config.SlideBlockColor, //'#369',//滑块及填充颜色r: SlidWay.h,//滑块半径txtHide: this.config.TextHide,  //文本隐藏 =true隐藏文本txtFontSize: this.config.TextFontSize  //文本字号};
//########hmi交互地址定义########
var  HmiVAL = {
max: this.config.max,  //最大值
min: this.config.min,  //最小值
ratio: SlidWay.w/(this.config.max-this.config.min)  //1单位量程需要多少像素+
};
  
//####启用关闭功能######
var  SlidDisable;var  DisableMode=this.config.SlidDisableMode;
//####启用关闭功能#######this.config.SlidDisable.onResponse((err, data) =>{
if (err) {
console.log('Error: ' + err.message);
} else{
SlidDisable = data.values[0];
DisableMode=this.config.SlidDisableMode;
//关闭模式：0锁定，非0时隐藏if (!SlidDisable)  {
let V = this.config.HmiAddr.latestData.values[0];
if(V<HmiVAL.min){
V=HmiVAL.min;
}if(V>HmiVAL.max){
V=HmiVAL.max;
}   driver.setData(self.config.HmiAddr.address,V);
  let x=(V-HmiVAL.min)*HmiVAL.ratio+SlidWay.x;
updateSlideBlockPosition(x);
DrwTxt(x,SlideBlock.y,'#000','middle');
} if(SlidDisable)   {
DisableModeCtrl();
}  }});//########重绘滑动条########functiondrawSlider() {
// 清除滑块画布cavSlideBlock.clearRect(0, 0, cavSlideBlock.width, cavSlideBlock.height);
cavSlideBlock.clearRect(0, 0, cavSlidWay.width, cavSlidWay.height);
//绘制滑轨----最底层---roundRect(cavSlidWay,SlidWay.x, SlidWay.y, SlidWay.w, SlidWay.h,SlidWay.r,SlidWay.Color);//绘制填充部分---------//cavSlideBlock.beginPath();
//cavSlideBlock.fillStyle = SlideBlock.Color;
roundRect(cavSlideBlock,SlidWay.x, SlidWay.y, SlideBlock.x-SlidWay.h, SlidWay.h,SlidWay.r,SlideBlock.Color);
// 绘制滑块--圆形，边框+内部颜色与滑轨一致----cavSlideBlock.beginPath();
cavSlideBlock.lineWidth=SlideBlock.r;
cavSlideBlock.strokeStyle =SlideBlock.Color;
cavSlideBlock.arc(SlideBlock.x, SlideBlock.y, SlideBlock.r/2, 0, Math.PI * 2);
cavSlideBlock.stroke();
//cavSlideBlock.fillStyle = SlidWay.Color;
cavSlideBlock.fillStyle = '#fff';
cavSlideBlock.fill();
}// 更新滑块位置functionupdateSlideBlockPosition(x) {
//滑点x坐标计算SlideBlock.x=x;
if(x<SlidWay.x){
   SlideBlock.x= SlidWay.x;
  }if(x>(SlidWay.x+SlidWay.w)){
SlideBlock.x= SlidWay.x+SlidWay.w;
//SlidWay.x+SlidWay.h}drawSlider();
}//###鼠标按下事件###mouseArea.on('mousedown', (e) => {
DisableModeCtrl();
  if(!SlidDisable){
isDragging = true;
Txtdrag=true;
//文字移到上方DrwTxt(e.x,SlideBlock.y-SlidWay.h,'#000','bottom');
}});
//###鼠标移动事件###mouseArea.on('mousemove', (e) => {
DisableModeCtrl();
if(!SlidDisable){
if (isDragging)   {
updateSlideBlockPosition(e.x);
DrwTxt(SlideBlock.x,SlideBlock.y-SlidWay.h,'#000','bottom');
  }}});
//###鼠标抬起事件###mouseArea.on('mouseup', (e) => {
DisableModeCtrl();
if(!SlidDisable){
  updateSlideBlockPosition(e.x);
  setTimeout(dlyRst, 150)//数值文字移动到滑点内部  Txtdrag=false;
  DrwTxt(SlideBlock.x,SlideBlock.y,'#000','middle');
//更新hmi  driver.setData(self.config.HmiAddr.address,wrHmiVal(SlideBlock.x));
}});//######hmi更新值########functionwrHmiVal(x){
let V=Math.round((x-SlidWay.x)/HmiVAL.ratio)+HmiVAL.min;
if(V<HmiVAL.min){
V=HmiVAL.min;
}if(V>HmiVAL.max){
V=HmiVAL.max;
}   return V;
}
//########绘制字体#########functionDrwTxt(x,y,color,Baseline){
cavTxt.clearRect(0, 0, cavTxt.width, cavTxt.height);
let fs=Txtdrag? SlideBlock.txtFontSize+5 : SlideBlock.txtFontSize;
cavTxt.font =fs+"px 宋体";
cavTxt.fillStyle=color;
cavTxt.textAlign = 'center';
//水平居中//cavTxt.textBaseline='bottom';
cavTxt.textBaseline=Baseline;
let txt=wrHmiVal(x);
if(!SlideBlock.txtHide){
cavTxt.fillText(txt, x, y);
}}
//####hmi外部地址值变化时，更新滑块#####-----------this.config.HmiAddr.onResponse((err, data) =>{
if(isDragging){
return;
}if (err) {
console.log('Error: ' + err.message);
} else{
if(!SlidDisable) {
let V = data.values[0];
if(V<HmiVAL.min){
V=HmiVAL.min;
}if(V>HmiVAL.max){
V=HmiVAL.max;
}   driver.setData(self.config.HmiAddr.address,V);
  let x=(V-HmiVAL.min)*HmiVAL.ratio+SlidWay.x;
updateSlideBlockPosition(x);
DrwTxt(x,SlideBlock.y,'#000','middle');
  }if(SlidDisable && DisableMode==0)  {
let V = data.values[0];
if(V<HmiVAL.min){
V=HmiVAL.min;
}if(V>HmiVAL.max){
V=HmiVAL.max;
}  driver.setData(self.config.HmiAddr.address,V);
  let x=(V-HmiVAL.min)*HmiVAL.ratio+SlidWay.x;
updateSlideBlockPosition(x);
DrwTxt(x,SlideBlock.y,'#000','middle');
}}});//###初始化拖动标记---functiondlyRst(){
isDragging=false;
}
//####绘制圆角矩形#######functionroundRect(cav,x,y,w,h,r,color){
//起点xy，宽度w，高度h，圆角半径rif(w<=2*r){
r=w/2-0;
}if(h<=2*r){
r=h/2-0;
}
//cav.strokeStyle ='#c8c8c8';
//cav.lineWidth=1;
cav.beginPath();
cav.moveTo(x+r,y);
cav.lineTo(x+w-r,y);
cav.arcTo(x+w,y,x+w,y+r,r);
//右上cav.lineTo(x+w,y+h-r);cav.arcTo(x+w,y+h,x,y+h,r);
//右下cav.lineTo(x+r,y+h);
cav.arcTo(x,y+h,x,y,r);
//左下cav.lineTo(x,y+r);cav.arcTo(x,y,x+r,y,r);
//左上//cav.stroke();
cav.closePath();
//填充cav.fillStyle=color;
cav.fill();
   
}  
//######关闭操作功能#####functionDisableModeCtrl(){
if (SlidDisable) {
if(DisableMode==0){
return;
   }if(DisableMode!=0){
cavSlidWay.clearRect(0, 0, cavSlidWay.width, cavSlidWay.height);
cavSlideBlock.clearRect(0, 0, cavSlideBlock.width, cavSlideBlock.height);
cavTxt.clearRect(0, 0, cavTxt.width, cavTxt.height);
return;
}}  
}