这两天项目需要一个优先级刻度线,并且带鼠标拖动 值变换。度娘了下,发现没有符合要求的,想想自己写了一个,放在这,万一以后还用的着呢!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑动刻度线</title> </head> <body onload="init()"> <div> <canvas id="scaleLine" width=450 height=60 style="border:1px solid grey;"></canvas> </div> <script> var myCanvas = document.getElementById("scaleLine"),ctx = myCanvas.getContext("2d"); var w = 420,h = 60,x,y,ax,ay; //画刻度线,刻度值 function draw() { ctx.clearRect(0,450var max = parseInt(9),min = parseInt(1); var ratio = (max - min) / 400; 0.02 var tickSize = 50,tickCnt = 9; var unit = tickSize * ratio; 1 ctx.beginPath(); ctx.moveTo(20,30); ctx.lineTo(w,30for (var i = 0; i < tickCnt; i++) { ctx.moveTo(20 + tickSize * i,35); ctx.lineTo(20 + tickSize * i,25); ctx.textAlign = 'center'; ctx.fillText((min + unit * i),20 + tickSize * i,20); ctx.fillStyle = 'green'; } ctx.stroke(); ctx.closePath(); } 画标识圆圈 drawArc(x,y) { ctx.beginPath(); ctx.lineWidth = 2; ctx.arc(x,5,0 * Math.PI,2 * Math.PI); ctx.fillStyle = "red" ctx.fill(); ctx.stroke(); ctx.closePath(); }; 事件绑定,鼠标按下 myCanvas.onmousedown = (e) { 事件绑定,鼠标移动 myCanvas.onmousemove = (e) { x = e.offsetX; y = e.offsetY; if (x < 20) { 限定X方向移动位置,只能在刻度线上移动 ax = 20 } else if (x > 420) { ax = 420 } (x < 420 && x > 20) ? x = e.offsetX : x = ax; y = 30; Y方向坐标值限定,只能在刻度线上移动 先清除之前图像,然后重新绘制 ctx.clearRect(0,0事件绑定,鼠标松开。同时清除myCanvas绑定事件 myCanvas.onmouseup = () { myCanvas.onmousemove = null; myCanvas.onmouseup = ; }; } 页面加载完成,初始化方法 init() { draw() drawArc(20,1)">); } </script> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。