All geek questions in one place

Draw an application in canvas

I am working on a project on canvas in Html in which I have to:

  • let the user draw a circle by dragging the mouse and it should be colorless.
  • and enter the color of the circle from the list of options, but this should be done after creating the circle.

and now I can make empty circles (without colors in them) in the canvas, but there are many drawbacks to this: Let's now skip the drag part

questions:

  • I can only make a circle when I move the mouse left-right, if I try to create a circle at the top bottom or vice versa, a different position will not happen
  • I can create an empty circle, but I am not able to fill the colors, and if I create a circle and move the mouse back to the starting point without releasing it, it will be created as several circles inside each other.

I can’t think of anything. I put all my code. I hope someone can help me: -

    <head>
    <title></title>
    <script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery.color.js"></script>
    <script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery-1.11.1.min.js"></script>
    <script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery.easing.1.3.js"></script>
    <script src="C:\Users\marvMG\Documents\HTML\jquery-ui-1.11.3\jquery-ui.js"></script>
    <style type="text/css">            
        .clrPicker
        {
            width: 30px;
            height: 30px;
            border: 1px solid #808080;
            margin-bottom: 5px;
            cursor:pointer;
        }
    </style>
</head>
<body>       
    <div class="tr0">                    
        <div class="td">
            Select Drawing tool : <br />
            <!--<input type="radio" name="dTool" id="dToolR" value="Rectangle" /> <label for="dToolR">Rectangle</label>-->
            <input type="radio" name="dTool" id="dToolC" value="Circle" /> <label for="dToolC" onclick="DrawCircle()">Circle</label>
        </div>
    </div>    
   <div id="board" style="width: 930px;">
       <div>
            <canvas id="kfCanvas" width="800px" height="500px;" style="border: 3px dotted #000;cursor:crosshair;">
                Sorry, your browser doesn't support canvas technology.
            </canvas>        
           <div style="float: right;">
                <div>
                    Color picker: 
                    <div class="clrPicker" style="background-color:black;" onclick="SetBrushColor('black')"></div>
                    <div class="clrPicker" style="background-color:red;" onclick="SetBrushColor('red')"></div>
                    <div class="clrPicker" style="background-color:blue;" onclick="SetBrushColor('blue')"></div>
                    <div class="clrPicker" style="background-color:green;" onclick="SetBrushColor('green')"></div>
                    <div class="clrPicker" style="background-color:orange;" onclick="SetBrushColor('orange')"></div>
                    <div class="clrPicker" style="background-color:yellow;" onclick="SetBrushColor('yellow')"></div>       
                </div>
           </div>
       </div>                     
       <script>            
            var curColor = 'black';          
            var context;
            var startX, startY;
            var canvasX, canvasY;
            var width, height;
            var toolSelected;

            var kfCanvas = document.getElementById("kfCanvas"); // jQuery doesn't work as .getContext throw error
            if (kfCanvas) {
                var isDown = false;
                ctx = kfCanvas.getContext("2d");

                DrawAWhiteBase(); // Draw a white base on the canvas
                $(kfCanvas).mousedown(function (e) {
                    isDown = true;
                    startX = e.pageX - kfCanvas.offsetLeft;
                    startY = e.pageY - kfCanvas.offsetTop;
                    toolSelected = $("input[type='radio'][name='dTool']:checked");

                }).mousemove(function (e) {
                    if (isDown != false) {
                        canvasX = e.pageX - kfCanvas.offsetLeft;
                        canvasY = e.pageY - kfCanvas.offsetTop;
                        width = Math.abs(canvasX - startX);
                        height = Math.abs(canvasY - startY);

                        var beginrad = startX;
                        var endrad = canvasX;
                        var radius = endrad - beginrad;  //to calculate circle radius

                        var toolSelected = $("input[type='radio'][name='dTool']:checked");
                        //if (toolSelected.length > 0)
                        //{
                            //toolSelected = toolSelected.val();                             
                            //if (toolSelected == 'Circle')
                            //{
                                DrawCircle(startX, startY, radius);
                            //}
                        //}
                    }
                }).mouseup(function (e) {
                    isDown = false;
                    ctx.closePath();
                });
            }
           //DrawAWhiteBase is for teh canvas background
            function DrawAWhiteBase() {
                ctx.beginPath();
                ctx.fillStyle = "white";
                ctx.fillRect(0, 0, kfCanvas.width, kfCanvas.height);
                ctx.closePath();
            }
            function DrawCircle(x, y, r) {
                ctx.beginPath();
                //ctx.fillStyle = curColor;
                ctx.arc(x, y, r, 0, Math.PI * 2, true);
                ctx.stroke();
                ctx.closePath();

                ctx.fill();
            }
            //function SetBrushColor(c) {
            //    //if (c == 'Text') {
            //    //    c = $("#clrText").val();
            //    //}
                //curColor = c;
                //$("#divSelectedColor").css('background-color', curColor);
                //ctx.fill();
            //}
        </script>  
    </div>
</body>
0
source share
1 answer

Here is one way to draw a circle by dragging and dropping:

  • mousedown announces the center point of the circle and starts dragging.
  • mousemove sets the time radius of the circle (== distance from the mouse to the center point) and draws an empty circle.
  • mouseup sets the radius of the circle and draws a filled circle.

Sample code and demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();

var isDown=false;
var cx,cy,mx,my;

var PI2=Math.PI*2;
var fill='red';

ctx.lineWidth=3;
ctx.strokeStyle='gray';

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

// change fill color
$('input[type=radio][name=group1').change(function(){
  fill=this.value;
});        



function draw(cx,cy,mx,my,fill){
  var dx=mx-cx;
  var dy=my-cy;
  var radius=Math.sqrt(dx*dx+dy*dy)
  ctx.clearRect(0,0,cw,ch);
  ctx.beginPath();
  ctx.arc(cx,cy,radius,0,PI2);
  ctx.closePath();
  if(fill){
    ctx.fillStyle=fill;
    ctx.fill();
  }
  ctx.stroke();
  if(!fill){
    ctx.beginPath();
    ctx.arc(cx,cy,3,0,PI2);
    ctx.closePath();
    ctx.fillStyle='black';
    ctx.fill();
  }
}


function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  cx=parseInt(e.clientX-offsetX);
  cy=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();

  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  // Put your mouseup stuff here
  isDown=false;

  draw(cx,cy,mx,my,fill);

}

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

  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  draw(cx,cy,mx,my);

}
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 to draw circle (Circle expands from center).</h4>
<input type=radio name=group1 value='red' checked>Red
<input type=radio name=group1 value='gold'>Gold
<br><canvas id="canvas" width=300 height=300></canvas>
Run codeHide result

And if you also want to display previous circles:

  • save each circle in a JS object: var newCircle={cx:10,cy:10,radius:10,fill:'gold'}
  • add each object circle to the array: var circles=[]; circles.push(newCircle);
  • and iterate over the array and redraw every previous circle in draw()
0
source

Source: https://habr.com/ru/post/1622292/

More articles:


All Articles