Jquery Brush Size Slider for Canvas HTML5

问题

Hello I'm trying to create a brush size slider for my Canvas drawing app, would anyone be able to assist in how to go about this?? A few of the approaches I have found weren't compatible with my Jquery library that I have running my app.

thank you :)

回答1:

Easy:

Create an input element of type range:

<input type=range min=1 max=100 id=brushSize>
Read its value and apply to lineWidth of the context:

$("#brushSize").on("input", function(e) { ctx.lineWidth = $(this).val() });

$("#brushSize").on("input", function(e) {
  var v = $(this).val();            // brush size value, example usage:
  //ctx.lineWidth = v;              // context line-width
  $("#val").html($(this).val());    // textual repr.
  $("#val").width(v).height(v);     // brush size rep.
});

#val {
  display:inline-block;
  border-radius:50%;
  background:#000;
  color:#f00;
  width:50px;
  height:50px;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type=range min=1 max=100 id=brushSize> <span id=val>50</span>

回答2:

Your question is a bit brief on details :-O

Here's how to use an input-type-range to change context.lineWidth.

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 startX,startY;

ctx.lineCap='round';
var linewidth=5;
ctx.lineWidth=linewidth;
$myslider=$('#myslider');
$myslider.attr({min:1,max:25}).val(linewidth);
$myslider.on('input change',function(){
    linewidth=ctx.lineWidth=parseInt($(this).val());
});

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUpOut(e);});
$("#canvas").mouseout(function(e){handleMouseUpOut(e);});

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  
  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);

  // Put your mousedown stuff here
  isDown=true;
}

function handleMouseUpOut(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  // Put your mouseup stuff here
  isDown=false;
}

function handleMouseMove(e){
  if(!isDown){return;}
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  ctx.beginPath();
  ctx.moveTo(startX,startY);
  ctx.lineTo(mouseX,mouseY);
  ctx.stroke();
  
  startX=mouseX;
  startY=mouseY;
}

body{ background-color: ivory; }
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag mouse to draw variable width line.</h4>
Line Width:&nbsp <input id=myslider type=range><br>
<canvas id="canvas" width=300 height=300></canvas>

来源：https://stackoverflow.com/questions/36944583/jquery-brush-size-slider-for-canvas-html5

标签

javascript

jquery

html5-canvas