Question

我正在使用Html进行画布上的项目，我必须：

让用户通过拖动鼠标绘制一个圆圈，它应该是无色的。
并从选项列表中填充圆圈颜色，但这应该在创建圆圈后完成。

现在我可以在画布中制作空心圆圈（其中没有颜色），但是这里有很多错误：让我们暂时跳过拖放部分

的问题：

当我从左向右移动鼠标时，我只能制作圆圈，如果我尝试在上下创建一个圆圈，反之亦然，而另一个位置没有任何反应
我能够创建一个空圆但无法填充颜色，如果我创建一个圆圈并将鼠标向上移动到起始点而不释放它，则会在彼此内部创建多个圆圈。

我无法想到任何事情。我正在整理我的代码。希望有人能帮助我： -

    <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>

Answer 1

这是通过拖动绘制圆圈的一种方法：

mousedown声明圆圈的中心点并开始拖动。
mousemove设置临时圆半径（==从鼠标到中心点的距离）并绘制未填充的圆。
mouseup设置圆半径并绘制实心圆。

示例代码和演示：

＆＃13;

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);

}

＆＃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 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>

＆＃13;

如果您还想显示前一个圈子：

将每个圆圈保存在JS对象中：var newCircle={cx:10,cy:10,radius:10,fill:'gold'}
将每个圈子对象添加到数组中：var circles=[]; circles.push(newCircle);
并遍历数组并重新绘制draw()

在画布上绘制应用程序

1 个答案: