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

我尝试在代码中添加一些东西，以便在绘制之后选择图像（选择处理程序应该出现在角落和边缘的中间），然后拖动或增加/减小高度和宽度？

我的示例代码在fiddle中，在这里我使用鼠标事件处理程序绘制了一个矩形。我希望选择矩形并使用选择处理程序修改/更改它，而不是再次绘制它

单击按钮ROI、metrics，然后可以使用鼠标事件绘制它

var oImageBuffer=document.createElement（'img'）；
var oCanvas=document.getElementById（“SetupImageCanvas”）；
var o2DContext=oCanvas.getContext（“2d”）；
var-oRect={}；
var oROI={}；
变量计量学={}；
var oLayers=新数组（）；
var bDragging=false；
var bSetROI=假；
var bSetLayers=false；
InitMouseEvents（）；
var oSelect=document.getElementById（“ImageList”）；
oSelect.onchange=函数（）{
changeCanvasImage（oSelect[oSelect.selectedIndex].value）；
}
//画布事件处理程序（侦听器）。
函数InitMouseEvents（）{
oCanvas.addEventListener（'mousedown'，MouseDownEvent，false）；
oCanvas.addEventListener（'mouseup'，MouseUpEvent，false）；
oCanvas.addEventListener（'mousemove'，MouseMoveEvent，false）；
oCanvas.addEventListener（'mouseout'，MouseOutEvent，false）；
}
功能MouseDownEvent（e）{
oRect.startX=e.pageX-this.offsetLeft；
oRect.startY=e.pageY-this.offsetTop；
bDraging=true；
}
函数MouseUpEvent（）{
bDraging=false；
}
函数MouseOutEvent（）{
document.getElementById（“MouseCoords”）.innerHTML=“”；
}
功能MouseMoveEvent（e）{
如果（b拖动）{
oRect.w=（e.pageX-this.offsetLeft）-oRect.startX；
oRect.h=（e.pageY-this.offsetTop）-oRect.startY；
getContext（'2d'）.clearRect（0,0，oCanvas.width，oCanvas.height）；
var oROI=document.getElementById（“btnROI”）；
如果（或已检查）{
SetROI（）；
}
var oLayer=document.getElementById（“btnLAYER”）；
如果（oLayer.checked）{
设置层（）；
}
var计量=document.getElementById（“btnMetrics”）；
if（计量学检查）{
SetMetrics（）；
}
}
国际单项体育联合会（英国广播公司）{
DrawROI（）；
}
if（bSetLayers）{
拉丝机（）；
}
如果（bSetMetrics）{
DrawMetrics（）；
}
//显示当前鼠标坐标。
显示坐标（e）；
}
函数显示坐标（e）{
x=e.clientX；
y=e.clientY；
document.getElementById（“MouseCoords”）.innerHTML=“（“+x+”，“+y+”）”+document.getElementById（“txtPatchCount”）.value；
}
//在画布上以交互方式绘制ROI矩形。
函数SetROI（）{
b轨道=正确；
oROI.startX=oRect.startX；
oROI.startY=oRect.startY；
oROI.w=oRect.w；
oROI.h=oRect.h；
}
函数DrawROI（）{
o2DContext.lineWidth=1.5；
o2DContext.strokeStyle='#0F0'；
o2DContext.strokeRect（oROI.startX、oROI.startY、oROI.w、oROI.h）；
var iPatches=document.getElementById（'txtPatchCount'）。值；
o2DContext.beginPath（）；
var iTop=oROI.startY；
var iBottom=oROI.startY+oROI.h；
var iLeft=oROI.startX；
var iX=iLeft；
对于（var iPatch=1；iPatch请尝试以下链接。
它正在做一些你想要实现的事情

看一看，这是一个正在使用的示例。可以为您节省一些时间吗work@andrew嗨，这不是我要找的。我已经有一个矩形，我只想在同一个矩形中有选择手柄。我不会按照这个博客裁剪任何东西。谢谢你。我会看看的
 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();
    }
  }