एचटीएमएल 5

का उपयोग कर कैनवास के अंदर कार्यक्षमता खींचें और छोड़ें हैलो हम सभी html5 का उपयोग कर कैनवास के अंदर खींचें और ड्रॉप कार्यक्षमता डाल सकते हैं ??एचटीएमएल 5

मेरी वास्तविक आवश्यकता छवि को टेक्स्टबॉक्स में खींचना है जो कैनवास के अंदर किया जाना चाहिए ... कृपया अपने विचार साझा करें .. निम्नलिखित लिंक मैं ड्रैग और ड्रॉप सीखने के लिए उपयोग करता था लेकिन इसे कैनवास के अंदर किया जाना चाहिए। ।

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

स्रोत

2012-07-17 Anonymous

आप अपने विशिष्ट समस्या और नमूना कोड है कि काम नहीं किया पोस्ट करना चाहिए। –

आप इस ट्यूटोरियल में अधिक जान सकते हैं http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/

अपने प्रश्न में अपने सीमित वर्णन है, उससे लगता है जैसे आप कैनवास से अधिक आइटम खींचें और इस ट्यूटोरियल की संभावना सर्वश्रेष्ठ है।

यह वास्तविक कोड आप फ़ाइल और HTML5 संगत ब्राउज़र में खुले में पेस्ट कर सकते है और यह काम करेगा:

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

स्रोत

2012-07-17 04:27:33

हैलो @ माइक पर एक नज़र डालें http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop –

मैंने पोस्ट किए गए आलेख लिंक में दिए गए निर्देशों का पालन करें और आप सक्षम होंगे। ट्यूटोरियल के अंत के पास एक कामकाजी उदाहरण भी है जो आप सफेद कैनवास के चारों ओर एक ब्लैक बॉक्स खींच सकते हैं। –

धन्यवाद @ मार्क एस। लेकिन कृपया मुझे दिए गए लिंक से http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop पर जाएं, यह एक सरल जावास्क्रिप्ट का उपयोग करने के लिए गतिशील जेएस नहीं है, तो आप सक्षम कर सकते हैं kineticJS में एक ही सुविधा को कार्यान्वित करने के तरीके को बताने के लिए –

एचटीएमएल 5

उत्तर

संबंधित मुद्दे