在画布上绘制应用程序
[英]paint app in canvas
问题描述
我正在使用Html在canvas上创建一个项目，我必须：
- 让用户通过拖动鼠标绘制一个圆圈，它应该是无色的。
- 并从选项列表中填充圆圈颜色，但应在创建圆圈后完成。
现在我可以在画布中制作空心圆圈（其中没有颜色）但是这里有很多错误：让我们暂时跳过拖放部分
问题：
- 当我从左到右移动鼠标时，我只能制作圆圈，如果我尝试在上下创建一个圆圈，反之亦然另一个位置没有任何反应
- 我能够创建一个空圆但无法填充颜色，如果我创建一个圆圈并将鼠标向上移动到起始点而不释放它，它会在彼此内部创建多个圆圈。
我无法想到任何事情。 我正在整理我的代码。 希望有人可以帮助我： -
<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>
1 个解决方案
解决方案1
0 2015-02-26 07:08:18
这是通过拖动绘制圆形的一种方法：
- mousedown声明圆的中心点并开始拖动。
- mousemove设置临时圆半径（==从鼠标到中心点的距离）并绘制未填充的圆。
- mouseup设置圆半径并绘制实心圆。
示例代码和演示：
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>
如果您还想显示前一个圈子：
- 将每个圆保存在JS对象中：
var newCircle={cx:10,cy:10,radius:10,fill:'gold'} - 将每个圆对象添加到数组中：
var circles=[]; circles.push(newCircle);var circles=[]; circles.push(newCircle); - 并遍历数组并重绘
draw()每个前一个圆圈
用画布绘制应用程序
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.