Jump to content

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


geekmonster
 Share

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

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...