Canvas

时间:2016-09-22 00:22:24

标签: html5 canvas slider

我试图在canvas元素上创建一个范围滑块,它返回一个值,然后我可以使用它来操作canvas元素。它需要在画布内,因为它是html5横幅广告。我知道我不能在画布中插入DOM元素,所以我想知道是否有用于使用画布创建范围滑块的库或插件?

我希望能够使用范围滑块操纵画布上的图像位置。即,当滑块向右移动时,图像位置向左移动,反之亦然。我知道我可以使用输入滑块执行此操作,但在画布上创建滑块时遇到问题。

1 个答案:

答案 0 :(得分:3)

您的范围控制很容易自然创建 - 特别是如果您的范围控制是水平或垂直对齐的。

创建一个非常简单的水平范围控制

给出范围控制的这些值:

  • 栏的起始位置:x,y
  • 条形图的宽度:width
  • 拇指的高度:height
  • 当前拇指位置以百分比表示:pct

显示范围控制:

  • 绘制范围栏:[x,y][x+width, y]之间的水平线。
  • 绘制范围缩略图:[x+width*pct, y-height/2][x+width*pct, y+height/2]之间的垂直线。

设置拇指位置:

  1. 倾听mousemove个事件并获取当前mouseX位置。
  2. 使用当前鼠标位置计算鼠标在开始和放置之间的百分比。范围的结尾:pct=(mouseX-x)/width其中mouseX被夹在x& x+width
  3. 使用新计算的拇指百分比重新显示范围。
  4. 使用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;
    &#13;
    &#13;