Open Technical Blog: HTML5 Canvas - Drag & Drop Circle and Action Buttons

This script shows how to create a drag-n-drop effect in a HTML5 Canvas.
A drag-n-drop circle object is defined. You can move any circle by dragging its centre, and resize the circle by dragging the handle on the right of the centre.
A fixed button object is defined.
A framework for handling drag-n-drop objects is defined.
An action is defined and can be called from the button object.
Source Code

<script type="text/javascript">

// fixed button
var fxButton = function(pX, pY, pW, pH, pText){
  var obj = {
    x : pX,
    y : pY,
    w : pW,
    h : pH,
    text : pText,
    // Check whether a point is 
    // in the rectangle
    // (px,py) - screen (x,y) of the point
    inObj: 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; },
    // draw object
    draw: function(pCtx){
      var mx;
      var my;
      pCtx.fillStyle = "#888888";
      pCtx.beginPath();
      pCtx.rect(obj.x,obj.y,obj.w,obj.h);
      pCtx.closePath();
      pCtx.fill();
      mx = obj.x+obj.w/2;
      my = obj.y+obj.h/2;
      pCtx.font = "bold 10pt Sans-Serif";
      pCtx.fillStyle = "white";
      pCtx.textAlign = "center";
      pCtx.textBaseline = "middle";
      pCtx.fillText(obj.text, mx, my); }
  };
  return obj;
}

// drag-n-drop circle
var ddCircle = function(pX, pY, pR, pText){
  var obj = {
    x : pX,
    y : pY,
    r : pR,
    text : pText,
    oldX : 0, // x of centre when start drag
    oldY : 0, // y of centre when start drag
    vsx : null,  // x of vector when start drag
    vsy : null,  // y of vector when start drag
    chgRad : false,
    // Check whether a point is 
    // in the circle
    // (px,py) - screen (x,y) of the mouse
    inDDObj: function(px, py){
      var mInside = false;
      if (Math.abs(px-obj.x) <= 4 &&
          Math.abs(py-obj.y) <= 4) {
        mInside = true; }
      return mInside; },
    // start drag operation
    // (px,py) - vector starting position
    dragObj: function(px, py){
      obj.vsx = px;
      obj.vsy = py;
      obj.oldX = obj.x;
      obj.oldY = obj.y;
      return ; },
    // stop drag operation
    dropObj: function(){
        obj.oldX = 0;
        obj.oldY = 0;
        obj.vsx = null;
        obj.vsy = null;
        obj.chgRad = false;
      return ; },
    // move object
    // (px,py) - screen (x,y) of the 
    //           current pos. of drag point
    move: function(px, py){
      if (obj.vsx == null && obj.vsy == null) {
        return; };
      if (obj.chgRad) {
        // change radius
        obj.r = obj.oldY + px - obj.vsx; }
      else {
        // move circle
        obj.x = obj.oldX + px - obj.vsx;
        obj.y = obj.oldY + py - obj.vsy; }
      // boundaries
      if (obj.x<0) {
        obj.x = 0;};
      if (obj.y<0) {
        obj.y = 0;};
      // change radius
      if (obj.r < 10) {
        obj.r = 10;};
      return; },
    // check whether the handle
    // is press
    onHandle: function(px, py) {
      var mPress = false;
      var mx;
      var my;
      mx = obj.x+obj.r;
      my = obj.y;
      if (Math.abs(px-mx)<= 5 &&
          Math.abs(py-my)<= 5) {
        mPress = true; }
      return mPress; },
    // start drag handle
    // (px,py) - vector starting position
    dragHandle: function(px, py){
      obj.vsx = px;
      obj.vsy = py;
      obj.oldX = obj.x+obj.r;
      obj.oldY = obj.r;
      obj.chgRad = true;
      return ; },
    // draw object
    draw: function(pCtx){
      var mx;
      var my;
      // colour the ring
      pCtx.strokeStyle = "#FF9999";
      pCtx.beginPath();
      pCtx.arc(obj.x, obj.y, obj.r, 0, Math.PI*2);
      pCtx.closePath(); 
      pCtx.stroke();
      pCtx.closePath();
      // draw handle
      pCtx.fillStyle = "#FF9999";
      pCtx.beginPath();
      mx = obj.x+obj.r-2;
      my = obj.y-2;
      pCtx.rect(mx,my,4,4);
      pCtx.closePath();
      pCtx.fill();
      // colour the centre
      pCtx.fillStyle = "#990000";
      pCtx.beginPath();
      pCtx.arc(obj.x, obj.y, 4, 0, Math.PI*2);
      pCtx.closePath(); 
      pCtx.fill();
      // draw text
      pCtx.font = "bold 10pt Sans-Serif";
      pCtx.fillStyle = "black";
      pCtx.textAlign = "center";
      pCtx.textBaseline = "middle";
      pCtx.fillText(obj.text, obj.x, obj.y-12); }
  };
  return obj;
}

// ====================================================

// canvas and mouse
var gCanvas;
var gCtx;
var gMsx = 0;   // mouse x
var gMsy = 0;   // mouse y
// graphic objects
var gCir01 = ddCircle(400,140,80,"S1");
var gCir02 = ddCircle(320,279,80,"S2");
var gCir03 = ddCircle(480,279,80,"S3");
var gButReset = fxButton(10,360,80,30,"Reset");
var gMessage = "";

// main function
function init() {
  var mi;
  var mdot;
  gCanvas = document.getElementById("_cnv190716");
  gCtx = gCanvas.getContext("2d");
  gCanvas.onmousedown = msDownHdlr;
  gCanvas.onmouseup = msUpHdlr;
  gCanvas.onclick = msClickHdlr;
  return setInterval(draw, 20);
}


function draw() {
  var mCanW = gCanvas.width;
  var mCanH = gCanvas.height;
  var mi;
  // clear the canvas
  gCtx.clearRect(0,0,mCanW,mCanH);
  // text
  gCtx.font = "bold 10pt Sans-Serif";
  gCtx.fillStyle = "black";
  gCtx.textAlign = "start";
  gCtx.textBaseline = "alphabetic";
  gCtx.fillText(gMessage, 20, 20);
  gCir01.draw(gCtx);
  gCir02.draw(gCtx);
  gCir03.draw(gCtx);
  gButReset.draw(gCtx);
}

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

function msDownHdlr(e){
  getMousePos(e);
  if (gCir01.inDDObj(gMsx,gMsy)) {
    gCanvas.onmousemove = myMove;
    gCir01.dragObj(gMsx,gMsy); }
  else if (gCir01.onHandle(gMsx,gMsy)) {
    gCanvas.onmousemove = myMove;
    gCir01.dragHandle(gMsx,gMsy); }
  else if (gCir02.inDDObj(gMsx,gMsy)) {
    gCanvas.onmousemove = myMove;
    gCir02.dragObj(gMsx,gMsy); }
  else if (gCir02.onHandle(gMsx,gMsy)) {
    gCanvas.onmousemove = myMove;
    gCir02.dragHandle(gMsx,gMsy); }
  else if (gCir03.inDDObj(gMsx,gMsy)) {
    gCanvas.onmousemove = myMove;
    gCir03.dragObj(gMsx,gMsy); }
  else if (gCir03.onHandle(gMsx,gMsy)) {
    gCanvas.onmousemove = myMove;
    gCir03.dragHandle(gMsx,gMsy); }
  else if (gButReset.inObj(gMsx,gMsy)) {
    resetPosition(); }
}

function myMove(e){
  getMousePos(e);
  gCir01.move(gMsx,gMsy);
  gCir02.move(gMsx,gMsy);
  gCir03.move(gMsx,gMsy);
  gMessage = "x: "+gMsx+"  y: "+gMsy;
}

function msUpHdlr(){
  gCanvas.onmousemove = null;
  gCir01.dropObj();
  gCir02.dropObj();
  gCir03.dropObj(); 
}

function msClickHdlr(e){
  getMousePos(e);
  //gMessage = "x: "+gMsx+"  y: "+gMsy;
}


// reset the positions of the circles
function resetPosition() {
  gCir01.x = 400;
  gCir01.y = 140;
  gCir01.r = 80;
  gCir02.x = 320;
  gCir02.y = 279;
  gCir02.r = 80;
  gCir03.x = 480;
  gCir03.y = 279;
  gCir03.r = 80;
  gMessage = "The circles are reset.";
}

init();


</script>
Open Technical Blog

Tuesday, 16 July 2019

HTML5 Canvas - Drag & Drop Circle and Action Buttons

Source Code

No comments:

Post a Comment
