我试图在canvas元素上创建一个范围滑块,它返回一个值,然后我可以使用它来操作canvas元素。它需要在画布内,因为它是html5横幅广告。我知道我不能在画布中插入DOM元素,所以我想知道是否有用于使用画布创建范围滑块的库或插件?
我希望能够使用范围滑块操纵画布上的图像位置。即,当滑块向右移动时,图像位置向左移动,反之亦然。我知道我可以使用输入滑块执行此操作,但在画布上创建滑块时遇到问题。
答案 0 :(得分:3)
您的范围控制很容易自然创建 - 特别是如果您的范围控制是水平或垂直对齐的。
创建一个非常简单的水平范围控制
给出范围控制的这些值:
x,y
,width
,height
,pct
。显示范围控制:
[x,y]
和[x+width, y]
之间的水平线。[x+width*pct, y-height/2]
和[x+width*pct, y+height/2]
之间的垂直线。 设置拇指位置:
mousemove
个事件并获取当前mouseX
位置。pct=(mouseX-x)/width
其中mouseX被夹在x
& x+width
。使用pct
计算范围控制值:value=minValue+(maxValue-minValue)*pct
。
非轴对齐范围控件
如果您的范围控制没有水平或垂直放置,您需要计算鼠标栏上的最近点。然后你必须计算起点和起点之间点的百分比距离。范围栏的终点。之前的Q&A显示了如何找到最接近当前鼠标位置的线(line ==范围栏)上的点。
示例代码和演示:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
var isDown=false;
var range=makeRangeControl(50,40,200,25);
drawRangeControl(range);
canvas.onmousedown=(function(e){handleMouseDown(e);});
canvas.onmousemove=(function(e){handleMouseMove(e);});
canvas.onmouseup=(function(e){handleMouseUpOut(e);});
canvas.onmouseout=(function(e){handleMouseUpOut(e);});
function makeRangeControl(x,y,width,height){
var range={x:x,y:y,width:width,height:height};
range.x1=range.x+range.width;
range.y1=range.y;
//
range.pct=0.50;
return(range);
}
function drawRangeControl(range){
// clear the range control area
// bar
ctx.lineWidth=6;
ctx.lineCap='round';
ctx.beginPath();
ctx.moveTo(range.x,range.y);
ctx.lineTo(range.x1,range.y);
ctx.strokeStyle='black';
ctx.stroke();
// thumb
ctx.beginPath();
var thumbX=range.x+range.width*range.pct;
ctx.moveTo(thumbX,range.y-range.height/2);
ctx.lineTo(thumbX,range.y+range.height/2);
ctx.strokeStyle='rgba(255,0,0,0.25)';
ctx.stroke();
// legend
ctx.fillStyle='blue';
ctx.textAlign='center';
ctx.textBaseline='top';
ctx.font='10px arial';
ctx.fillText(parseInt(range.pct*100)+'%',range.x+range.width/2,range.y-range.height/2-2);
}
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// get mouse position
var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);
// test for possible start of dragging
isDown=(mx>range.x && mx<range.x+range.width && my>range.y-range.height/2 && my<range.y+range.height/2);
}
function handleMouseUpOut(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// stop dragging
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// get mouse position
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// set new thumb & redraw
range.pct=Math.max(0,Math.min(1,(mouseX-range.x)/range.width));
ctx.clearRect(range.x-12.5,range.y-range.height/2-15,range.width+25,range.height+20);
drawRangeControl(range);
}
&#13;
body{ background-color: ivory; }
#canvas{border:1px solid red; }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag the thumb on the range control</h4>
<canvas id="canvas" width=512 height=512></canvas>
&#13;