在使用javascript在矩形上显示选择句柄时需要帮助

Question

I am trying to add something to my code so as to select the image after drawing ( the selection handler should appear in the corners and in the middle of edge) and then drag or increase/decrease the height and width?

My sample code is in the fiddle , in this I am drawing a rectangle using the mouse event handlers. I want to select the rectangle and modify/alter it using the selection handlers instead of drawing it again.

Click the button ROI, metrics and then you can draw it using the mouse events.

http://jsfiddle.net/AhdJr/53/

 var oImageBuffer = document.createElement('img');
  var oCanvas=document.getElementById("SetupImageCanvas");
  var o2DContext=oCanvas.getContext("2d");
  var oRect = {};
  var oROI = {};
var oMetrics ={};
  var oLayers = new Array();
  var bDragging = false;
  var bSetROI = false;
  var bSetLayers = false;
  InitMouseEvents();
  var oSelect = document.getElementById("ImageList");
  oSelect.onchange=function() {
    changeCanvasImage(oSelect[oSelect.selectedIndex].value);
  }


  // Canvas event handlers (listeners).
  function InitMouseEvents() {
    oCanvas.addEventListener('mousedown', MouseDownEvent, false);
    oCanvas.addEventListener('mouseup', MouseUpEvent, false);
    oCanvas.addEventListener('mousemove', MouseMoveEvent, false);
    oCanvas.addEventListener('mouseout', MouseOutEvent, false);
  }
  function MouseDownEvent(e) {
    oRect.startX = e.pageX - this.offsetLeft;
    oRect.startY = e.pageY - this.offsetTop;
    bDragging = true;
  }
  function MouseUpEvent() {
    bDragging = false;
  }
  function MouseOutEvent() {
    document.getElementById("MouseCoords").innerHTML="";
  }
  function MouseMoveEvent(e) {
    if (bDragging) {
      oRect.w = (e.pageX - this.offsetLeft) - oRect.startX;
      oRect.h = (e.pageY - this.offsetTop) - oRect.startY;
      oCanvas.getContext('2d').clearRect(0,0,oCanvas.width, oCanvas.height);

        var oROI = document.getElementById("btnROI");
      if (oROI.checked) {
        SetROI();
      }
      var oLayer = document.getElementById("btnLAYER");
      if (oLayer.checked) {
        SetLayer();
      }

          var oMetrics = document.getElementById("btnMetrics");
          if (oMetrics.checked) {
            SetMetrics();
          }
    }

    if (bSetROI) {
      DrawROI();
    }

    if (bSetLayers) {
      DrawLayers();
    }

     if(bSetMetrics){
        DrawMetrics();

    }
    // Display the current mouse coordinates.
    ShowCoordinates(e);
  }

  function ShowCoordinates(e) {
    x=e.clientX;
    y=e.clientY;
    document.getElementById("MouseCoords").innerHTML="(" + x + "," + y + ") " + document.getElementById('txtPatchCount').value;
  }

  // Interactively draw ROI rectangle(s) on the canvas.
  function SetROI() {
    bSetROI = true;
    oROI.startX = oRect.startX;
    oROI.startY = oRect.startY;
    oROI.w = oRect.w;
    oROI.h = oRect.h;    
  }

  function DrawROI() {
    o2DContext.lineWidth=1.5;
    o2DContext.strokeStyle = '#0F0';
    o2DContext.strokeRect(oROI.startX, oROI.startY, oROI.w, oROI.h);

    var iPatches = document.getElementById('txtPatchCount').value;
    o2DContext.beginPath();
    var iTop = oROI.startY;
    var iBottom = oROI.startY + oROI.h;
    var iLeft = oROI.startX;
    var iX = iLeft;
    for (var iPatch=1; iPatch<iPatches; ++iPatch) {
      iX = iLeft + iPatch*oROI.w/iPatches;
      o2DContext.moveTo(iX, iTop);
      o2DContext.lineTo(iX, iBottom);
    }
    o2DContext.lineWidth=0.25;
    o2DContext.stroke();
  }

function SetMetrics() {
    bSetMetrics = true;
    oMetrics.startX = oRect.startX;
    oMetrics.startY = oRect.startY;
    oMetrics.w = oRect.w;
    oMetrics.h = oRect.h;    
  }

  function DrawMetrics(){

       o2DContext.strokeStyle = 'black';
      o2DContext.strokeRect(oMetrics.startX, oMetrics.startY, oMetrics.w, oMetrics.h);
      o2DContext.beginPath();
      var iTop = oMetrics.startY;
    var iBottom = oMetrics.startY + oMetrics.h;
    var iLeft = oMetrics.startX;
    var iX = iLeft;
      o2DContext.moveTo(iX, iTop);
      o2DContext.lineTo(iX, iBottom);
       o2DContext.stroke();
        }
  // Interactively draw layer boundaries on the canvas.
  function SetLayer() {
    bSetLayers = true;
    oLayers.length = 0;
    oLayers.push(oRect.startY);
    oLayers.push(oRect.startY + oRect.h);
  }
  function DrawLayers() {
    o2DContext.lineWidth=0.25;
    o2DContext.strokeStyle = '#F00';

    o2DContext.beginPath();
    var iY = oLayers[0];
    var iLeft = 0;
    var iRight = oCanvas.width;
    for (var iLayer=0; iLayer<oLayers.length; ++iLayer) {
      iY = oLayers[iLayer];
      o2DContext.moveTo(iLeft, iY);
      o2DContext.lineTo(iRight, iY);
      o2DContext.stroke();
    }
  }

The below blog is doing the same thing but I am not sure how to add this functionality in my code.

http://simonsarris.com/blog/225-canvas-selecting-resizing-shape

Please guide me how to add the same in mine.

Really appreciate the help.

Answer 1

try the following link. It is doing somewhat you want to achieve.

http://simonsarris.com/blog/225-canvas-selecting-resizing-shape