Jump to content
geekmonster

need help adding a drag and drop event (with either javascript or jquery)

Recommended Posts

Hello

I'm trying to add a drag and drop event to my js/jquery code in which after my shape is rendered to the canvas I need to move the shape around by selecting it then dragging it into position. I'm not sure if I need to use jquery or just plain old javascript. I've been tinkering around with it but its not working for me. Can somebody give me a hint please?


function drawCircle(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.arc(100, 75, 25, 0, 2 * Math.PI);
    ctx.stroke();
}

function clearArea() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    return false;
}

function drawEllipse(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.ellipse(100, 100, 50, 80, 90 * Math.PI/180, 0, 2 * Math.PI);
    ctx.stroke();

}

function drawP(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "12px serif";
    ctx.fillText("p", 50, 100);
}

function drawQ(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "12px serif";
    ctx.fillText("q", 50, 100);
}
function OnClickDraw() {
    var drawtype = $('#drawType').val().toLowerCase();
    switch(drawtype) {
        case 'c':
            drawCircle();
            break;
        case 'e':
            drawEllipse();
            break;
        case 'p':
            drawP();
            break;
        case 'q':
            drawQ();
            break;
    }
    return false;
}


As you can see I'm using jquery already in my switch statement...

Share this post


Link to post
Share on other sites

Canvas elements don't really have support for drawing shapes around, the "shape" is just a collection of pixels instead of a formal object. When you call functions like beginPath, arc, and stroke, for example, you don't save a reference to that new circle because there is no reference. All it did was color in some pixels on the canvas. I think you would have to keep track yourself of which things are on the canvas and when you click you need to determine what they clicked on and then re-draw the canvas as they move the mouse.

Share this post


Link to post
Share on other sites

Once something is printed onto the canvas it stops being a real entity and just becomes a mass of pixels. It cannot be moved, only drawn over.

 

What you would need to do is create what's referred to as a "scene graph". A Javascript data structure with information about the objects that are supposed to be drawn on the canvas, such as shape, position, radius and other things.

 

Then you could continually redraw the canvas using the data in the scene graph. It is a complicated system to implement, not something you could do in one afternoon if you intend to include clicking, dragging, resizing or other features.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...