2012-07-17 68 views
7

Xin chào tất cả chúng ta có thể đặt chức năng kéo và thả bên trong canvas bằng cách sử dụng html5 ??Chức năng kéo và thả bên trong canvas bằng cách sử dụng HTML5

Yêu cầu thực tế của tôi là kéo hình ảnh vào hộp văn bản cần được thực hiện bên trong khung hình ... vui lòng chia sẻ ý tưởng của bạn .. Liên kết sau đây được sử dụng để tìm hiểu kéo và thả nhưng cần được thực hiện bên trong canvas. .

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop

+0

Bạn nên đăng vấn đề cụ thể của bạn và mẫu mã mà không làm việc. –

Trả lời

3

bạn có thể tìm hiểu thêm trong hướng dẫn này: http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/

Từ mô tả hạn chế của bạn trong câu hỏi của bạn, có vẻ như bạn kéo các mục trong vải và hướng dẫn này có thể phù hợp nhất.

Đây là mã thực tế bạn có thể dán vào tập tin và cởi mở trong HTML5 trình duyệt tuân thủ và nó sẽ làm việc:

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>Canvas Drag and Drop Test</title> 
</head> 
<body> 
<section> 

<div> 
<canvas id="canvas" width="400" height="300"> 
This text is displayed if your browser does not support HTML5 Canvas. 
</canvas> 
</div> 

<script type="text/javascript"> 

var canvas; 
var ctx; 
var x = 75; 
var y = 50; 
var WIDTH = 400; 
var HEIGHT = 300; 
var dragok = false; 

function rect(x,y,w,h) { 
ctx.beginPath(); 
ctx.rect(x,y,w,h); 
ctx.closePath(); 
ctx.fill(); 
} 

function clear() { 
ctx.clearRect(0, 0, WIDTH, HEIGHT); 
} 

function init() { 
canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 
return setInterval(draw, 10); 
} 

function draw() { 
clear(); 
ctx.fillStyle = "#FAF7F8"; 
rect(0,0,WIDTH,HEIGHT); 
ctx.fillStyle = "#444444"; 
rect(x - 15, y - 15, 30, 30); 
} 

function myMove(e){ 
if (dragok){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
} 
} 

function myDown(e){ 
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
e.pageY > y -15 + canvas.offsetTop){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    dragok = true; 
    canvas.onmousemove = myMove; 
} 
} 

function myUp(){ 
dragok = false; 
canvas.onmousemove = null; 
} 

init(); 
canvas.onmousedown = myDown; 
canvas.onmouseup = myUp; 

</script> 

</section> 
</body> 
</html> 
+0

Xin chào @Mike có giao diện http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop –

+0

làm theo hướng dẫn trong liên kết bài viết tôi đã đăng và bạn sẽ có thể. đó cũng là một ví dụ làm việc ở gần cuối hướng dẫn, bạn có thể kéo một hộp đen xung quanh khung trắng. –

+0

Cảm ơn bạn @Mark S. Nhưng xin vui lòng đi qua liên kết tôi đưa ra cho http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop nó không phải là động js sử dụng một javascript đơn giản của nó để bạn có thể để biết cách triển khai cùng một tính năng trong kineticJS –

Các vấn đề liên quan