HTML 5绘图应用程序中的拖动特性
Drag feature in HTML 5 paint application
我使用html 5画布和java脚本创建了一个简单的绘画应用程序。我想在我的应用程序中添加拖动功能,即圆圈可以从一个地方拖到另一个地方,就像我们在ms paint中看到的那样。
需要在我的代码中做什么更改才能拖动功能工作。请帮助。
我的代码如下
<!doctype html>
<html>
<head>
<title>Paint</title>
<style type="text/css">
#paintbg {
background-color: #333333;
}
#realCanvas, #tempCanvas {
position: absolute;
left:350px;
top:55px;
border: 5px double gray;
cursor: crosshair;
}
#toolset {
width: 80px;
position: absolute;
left:240px;
top:50px;
background:#35d128;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#colorset{
background:#aaaaaa;
position: absolute;
left:350px;
top:520px;
border:1px solid #888888;
}
#tools{
background:#358128;
color:#f3f3f3;
width:80px;
height:25px;
border:1px solid #33842a;
-webkit-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
}
#tools:hover{
color:#edebda;
-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
}
#tools:active{
background:#014400;
width:75px
}
</style>
</head>
<body id="paintbg">
<form>
<fieldset id="toolset">
<br><button id="tools" type="button" onclick="curr_tool('circle')">Circle</button></br>
<br><button id="tools" type="button" onclick="clears()">Clear</button></br>
</fieldset>
</form>
<div>
<canvas id="realCanvas" width="700" height="450" style=" background-color: #ffffff; z-index: 0" ></canvas>
<canvas id="tempCanvas" width="700" height="450" style="z-index: 1"></canvas>
</div>
<fieldset id="colorset">
<table >
<tr>
<td><input type="checkbox" id="fill"/>Fill</td>
<td><button onclick="fillcolor('#000000')" style="background-color: #000000; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#ff0000')" style="background-color: #ff0000; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#ff7f00')" style="background-color: #ff7f00; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#ffff00')" style="background-color: #ffff00; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#ffffff')" style="background-color: #ffffff; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#00ff00')" style="background-color: #00ff00; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#008800')" style="background-color: #008800; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#00ffff')" style="background-color: #00ffff; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#0000ff')" style="background-color: #0000ff; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#8b00ff')" style="background-color: #8b00ff; height: 20px; width: 20px;"></button></td>
</tr>
<tr>
<td><input type="checkbox" id="outline" checked="checked"/>Outline</td>
<td><button onclick="linecolor('#000000')" style="background-color: #000000; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#ff0000')" style="background-color: #ff0000; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#ff7f00')" style="background-color: #ff7f00; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#ffff00')" style="background-color: #ffff00; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#ffffff')" style="background-color: #ffffff; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#00ff00')" style="background-color: #00ff00; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#008800')" style="background-color: #008800; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#00ffff')" style="background-color: #00ffff; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#0000ff')" style="background-color: #0000ff; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#8b00ff')" style="background-color: #8b00ff; height: 20px; width: 20px;"></button></td>
</table>
</fieldset>
<script>
var board = document.getElementById("realCanvas");
var tmp_board = document.getElementById("tempCanvas");
b_width = board.width;
b_height = board.height;
var ctx = board.getContext("2d");
var tmp_ctx = tmp_board.getContext("2d");
var x ;
var y ;
var hold = false;
var fill = false;
var stroke = true;
var tool = 'pencil';
tmp_ctx.lineJoin = 'round';
tmp_ctx.lineCap = 'round';
function curr_tool(selected){tool = selected;}
function attributes(){
if (document.getElementById("fill").checked)
fill = true;
else
fill = false;
if (document.getElementById("outline").checked)
stroke = true;
else
stroke = false;
}
function clears(){
ctx.clearRect(0, 0, b_width, b_height);
}
function linecolor(scolor){
if (document.getElementById("outline").checked)
tmp_ctx.strokeStyle = scolor;
}
function fillcolor(fcolor){
if (document.getElementById("fill").checked)
tmp_ctx.fillStyle = fcolor;
}
tmp_board.onmousedown = function(e) {
attributes();
x = e.pageX - this.offsetLeft;
y = e.pageY -this.offsetTop;
hold = true;
begin_x = x;
begin_y = y;
tmp_ctx.beginPath();
tmp_ctx.moveTo(begin_x, begin_y);
}
tmp_board.onmousemove = function(e) {
if (x == null || y == null) {
return;
}
if(hold){
x = e.pageX - this.offsetLeft;
y = e.pageY - this.offsetTop;
goDraw();
}
}
tmp_board.onmouseup = function(e) {
ctx.drawImage(tmp_board,0, 0);
tmp_ctx.clearRect(0, 0, tmp_board.width, tmp_board.height);
x = null;
y = null;
hold = false;
}
tmp_board.ondblclick=function(e) {
goDraws();
}
function goDraw(){
if (tool == 'circle'){
tmp_ctx.clearRect(0, 0, b_width, b_height);
tmp_ctx.beginPath();
tmp_ctx.arc(begin_x, begin_y, Math.abs(y - begin_y), 0 , 2 * Math.PI, false);
if(stroke)
tmp_ctx.stroke();
if(fill)
tmp_ctx.fill();
}
}
function goDraws(){
tmp_ctx.beginPath();
tmp_ctx.arc(begin_x, begin_y, 100, 0 , 2 * Math.PI, false);
tmp_ctx.fillStyle = 'white';
tmp_ctx.fill()
ctx.drawImage(tmp_board,0, 0);
tmp_ctx.clearRect(0, 0, tmp_board.width, tmp_board.height);
x = null;
y = null;
hold = false;
}
</script>
</body>
</html>
JSFiddle您的代码http://jsfiddle.net/M2sQK/
在不提供代码本身的情况下,我将介绍实现move特性的问题和步骤。你必须填空。
- 这些是绘制的形状,而不是对象。您需要将每个圆的数据存储为对象
{shape:'circle', x:0, y:0, radius:0}
。 创建抓取工具。为鼠标移动和鼠标下移附加(或添加)监听器。 - 每次移动动作开始时,脚本将不得不遍历形状/圆形对象的集合/数组以找到要抓取的对象(反向迭代数组并抓取第一个与#4中检查匹配的对象)。
- 要找到你点击的圆圈,你需要包含某种"碰撞检测"(对于圆圈,我建议检查鼠标x/y是否在圆圈中心的半径内)。
if(Math.sqrt((circles[i].x - mouse.x) * (circles[i].x - mouse.x) + (circles[i].y - mouse.y) * (circles[i].y - mouse.y)) < circles[i].radius)
- 更新活动对象x,y,并在活动圆圈移动时将所有其他圆圈重新绘制到画布上。
这是我使用类似迭代/检测的画布实验之一。http://jsfiddle.net/4ACYq/当圆到达其他圆的一定半径内时,就会画线
相关文章:
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 删除对HTML元素的拖动
- jQuery UI可排序-多连接列表拖动
- 禁用SVG拖动
- 旋转后拖动对象
- JQuery UI可拖动潜水与滚动棒到鼠标
- jsPlumb-拖动克隆而不进行复制
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 如何使元素在可拖动元素内可单击
- 如何在使用Kinetic拖动同一对象后,在旋转动画中保持先前的偏移
- 在d3中拖动一条线
- 使元素在iframe中可拖动
- 通过拖动可以更改三维模型对象在Three.js场景中的位置
- 如何使所有绘制的(矩形、圆形、直线、多边形)都可拖动?纯JS
- 拖动开始时更改可拖动元素的大小
- 如何正确拖动jqgrid编辑表单
- 高图表可拖动的绘图线与对数轴刻度
- javascript+html5画布:在移动设备上绘图而不是拖动/滚动
- 如何在HTML5的画布上拖动绘图
- HTML 5绘图应用程序中的拖动特性