Open Technical Blog: HTML5 Canvas - Drop-n-Drop Free Objects

This script shows how to create a drag-n-drop effect in a HTML5 Canvas. The following features are adopted and can be used in other projects.

A drag-n-drop rectangle object is defined.
A drag-n-drop circle object is defined.
A framework for handling drag-n-drop objects is defined.
A boundary can be defined in a drag-n-drop object to bound the object in a specified region.

Two boundaries are defined in the script, the objects cannot move beyond the left and top edges of the canvas. Try to drag and push the objects in the canvas to the top left corner of the canvas to see the effect of a boundary.

Source Code

<script type="text/javascript">

// drag-n-drop rectangle
var ddRect = function(pX, pY, pW, pH){
  var obj = {
    x : pX,
    y : pY,
    w : pW,
    h : pH,
    dpx : null,  // drag point x w.r.t. obj.x
    dpy : null,  // drag point y w.r.t. obj.y
    // Check whether a point is 
    // in the rectangle
    // (px,py) - screen (x,y) of the point
    inDDObj: function(px, py){
      var mInside = false;
      if (obj.x<=px && px<=obj.x+obj.w &&
          obj.y<=py && py<=obj.y+obj.h) {
        mInside = true; }
      return mInside; },
    // start drag operation
    // (px,py) - relative (x,y) of drag point
    //           w.r.t. (obj.x,obj.y)
    dragObj: function(px, py){
      if (obj.dpx==null && obj.dpy==null) {
        obj.dpx = px-obj.x;
        obj.dpy = py-obj.y; };
      return ; },
    // stop drag operation
    dropObj: function(){
        obj.dpx = null;
        obj.dpy = null;
      return ; },
    // move object
    // (px,py) - screen (x,y) of the 
    //           current pos. of drag point
    move: function(px, py){
      if (obj.dpx!=null && obj.dpy!=null) {
        obj.x = px - obj.dpx;
        obj.y = py - obj.dpy; };
      // boundaries
      if (obj.x<0) {
        obj.x = 0;};
      if (obj.y<0) {
        obj.y = 0;};
      return; },
    // draw object
    draw: function(pCtx){
      pCtx.fillStyle = "red";
      pCtx.beginPath();
      pCtx.rect(obj.x,obj.y,obj.w,obj.h);
      pCtx.closePath();
      pCtx.fill(); }
  };
  return obj;
}
    
// drag-n-drop circle
var ddCircle = function(pX, pY, pR){
  var obj = {
    x : pX,
    y : pY,
    r : pR,
    dpx : null,  // drag point x w.r.t. obj.x
    dpy : null,  // drag point y w.r.t. obj.y
    // Check whether a point is 
    // in the circle
    // (px,py) - screen (x,y) of the point
    inDDObj: function(px, py){
      var mInside = false;
      var md;
      md = (obj.x-px)*(obj.x-px) +
           (obj.y-py)*(obj.y-py);
      if (md<=obj.r*obj.r) {
        mInside = true; }
      return mInside; },
    // start drag operation
    // (px,py) - relative (x,y) of drag point
    //           w.r.t. (obj.x,obj.y)
    dragObj: function(px, py){
      if (obj.dpx==null && obj.dpy==null) {
        obj.dpx = px-obj.x;
        obj.dpy = py-obj.y; };
      return ; },
    // stop drag operation
    dropObj: function(){
        obj.dpx = null;
        obj.dpy = null;
      return ; },
    // move object
    // (px,py) - screen (x,y) of the 
    //           current pos. of drag point
    move: function(px, py){
      if (obj.dpx!=null && obj.dpy!=null) {
        obj.x = px - obj.dpx;
        obj.y = py - obj.dpy; };
      // boundaries
      if (obj.x<obj.r) {
        obj.x = obj.r;};
      if (obj.y<obj.r) {
        obj.y = obj.r;};
      return; },
    // draw object
    draw: function(pCtx){
      pCtx.fillStyle = "red";
      pCtx.beginPath();
      pCtx.arc(obj.x, obj.y, obj.r, 0, Math.PI*2, true);
      pCtx.closePath();
      pCtx.fill(); }
  };
  return obj;
}


var canvas;
var ctx;
var msx = 0;   // mouse x
var msy = 0;   // mouse y
var WIDTH = 0;
var HEIGHT = 0;
var mbutt = false; // mouse button
var mddRect01 = ddRect(50,50,20,70);
var mddRect02 = ddRect(50,150,20,70);
var mddCir01 = ddCircle(200,100,20);
var mddCir02 = ddCircle(200,200,20);

// main function
function init() {
  canvas = document.getElementById("canv02");
  ctx = canvas.getContext("2d");
  WIDTH = canvas.width;
  HEIGHT = canvas.height;
  canvas.onmousedown = myDown;
  canvas.onmouseup = myUp;
  return setInterval(draw, 20);
}

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

function draw() {
  clear();
  // text
  ctx.font = "bold 10pt Sans-Serif";
  ctx.fillStyle = "black";
  ctx.fillText("x: "+msx, 20, 20);
  ctx.fillText("y: "+msy, 90, 20);
  mddRect01.draw(ctx);
  mddRect02.draw(ctx);
  mddCir01.draw(ctx);
  mddCir02.draw(ctx);
}

// event handlers
function getMousePos(pEvt){
  if (pEvt.offsetX != undefined) {
    msx = pEvt.offsetX;
    msy = pEvt.offsetY; }
  else {
    msx = pEvt.layerX;
    msy = pEvt.layerY;
  };
}

function myDown(e){
  getMousePos(e);
  if (mddRect01.inDDObj(msx,msy)) {
    canvas.onmousemove = myMove;
    mddRect01.dragObj(msx,msy); }
  if (mddRect02.inDDObj(msx,msy)) {
    canvas.onmousemove = myMove;
    mddRect02.dragObj(msx,msy); }
  if (mddCir01.inDDObj(msx,msy)) {
    canvas.onmousemove = myMove;
    mddCir01.dragObj(msx,msy); }
  if (mddCir02.inDDObj(msx,msy)) {
    canvas.onmousemove = myMove;
    mddCir02.dragObj(msx,msy); }
}

function myMove(e){
  getMousePos(e);
  mddRect01.move(msx,msy);
  mddRect02.move(msx,msy);
  mddCir01.move(msx,msy);
  mddCir02.move(msx,msy);
}

function myUp(){
  canvas.onmousemove = null;
  mddRect01.dropObj();
  mddRect02.dropObj();
  mddCir01.dropObj();
  mddCir02.dropObj();  
}

init();

</script>

Open Technical Blog

Thursday, 11 October 2012

HTML5 Canvas - Drop-n-Drop Free Objects

Source Code

No comments:

Post a Comment