|
效果
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;
}}
} |
