canvas - 基础知识 - 橡皮筋式选取框或可用作放大缩小

html页面代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Rubber bands with layerd elements</title>
    <style>
      body {
        background: rgba(100, 145, 250, 0.3);
      }
      #canvas {
        margin-left: 20px;
        margin-right: 0;
        margin-bottom: 20px;
        border: thin solid #aaa;
        cursor: pointer;
        padding: 0;
      }
      #controls {
        margin: 20px 0px 20px 20px;
      }
      #rubberbandDiv {
        position: absolute;
        border: 3px solid blue;
        cursor: crosshair;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="controls">
      <input type="button" id="resetButton" value="Reset" />
    </div>
    <div id="rubberbandDiv"></div>
    <canvas id="canvas" width="800" height="520">
      canvas not supported
    </canvas>
    <script src="rubberbanding.js"></script>

  </body>
</html>

js代码如下：

// 使用div元素实现橡皮筋式选取框
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    rubberbandDiv = document.getElementById('rubberbandDiv'),
    resetButton = document.getElementById('resetButton'),
    image = new Image(),
    mousedown = {},
    rubberbandRectangle = {},
    dragging = false;

// functions ..........

function rubberbandStart(x, y ) {
  mousedown.x = x;
  mousedown.y = y;

  rubberbandRectangle.left = mousedown.x;
  rubberbandRectangle.top = mousedown.y;

  moveRubberbandDiv();
  showRubberbandDiv();

  dragging = true;
}

function rubberbandStretch(x, y) {
  rubberbandRectangle.left = x <mousedown.x ? x : mousedown.x;
  rubberbandRectangle.top = y < mousedown.y ? y : mousedown.y;

  rubberbandRectangle.width = Math.abs(x-mousedown.x);
  rubberbandRectangle.height = Math.abs(y-mousedown.y);

  moveRubberbandDiv();
  resizeRubberbandDiv();
}

function rubberbandEnd() {
  var bbox = canvas.getBoundingClientRect();
  try{
    context.drawImage(canvas,
                      rubberbandRectangle.left - bbox.left,
                      rubberbandRectangle.top - bbox.top,
                      rubberbandRectangle.width,
                      rubberbandRectangle.height,
                      0,0,canvas.width, canvas.height);
  }catch(e) {

  }
  resetRubberbandRectangle();

  rubberbandDiv.style.width = 0;
  rubberbandDiv.style.height = 0;

  hideRubberbandDiv();

  dragging = false;
}

function moveRubberbandDiv() {
  rubberbandDiv.style.top = rubberbandRectangle.top + 'px';
  rubberbandDiv.style.left = rubberbandRectangle.left + 'px';
}

function resizeRubberbandDiv() {
  rubberbandDiv.style.width = rubberbandRectangle.width + 'px';
  rubberbandDiv.style.height = rubberbandRectangle.height + 'px';
}

function showRubberbandDiv() {
  rubberbandDiv.style.display = 'inline';
}
function hideRubberbandDiv() {
  rubberbandDiv.style.display = 'none';
}

function resetRubberbandRectangle() {
  rubberbandRectangle = {top: 0, left: 0, width: 0, height: 0};
}

// event handles......

canvas.onmousedown = function(e) {
  var x = e.clientX,
      y = e.clientY;

      e.preventDefault();
      rubberbandStart(x,y);
}

window.onmousemove = function(e) {
    var x = e.clientX,
        y = e.clientY;

      e.preventDefault();
      if (dragging) {
        rubberbandStretch(x, y);
      }
}

window.onmouseup = function(e) {
  e.preventDefault();
  rubberbandEnd()
};

image.onload = function() {
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
}
resetButton.onclick = function(e) {
  context.clearRect(0,0, context.canvas.width, context.canvas.height);
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
}

// initialization

image.src = 'timg.jpeg';

文章中需要用的图片，可以自行配置。

效果图如下

最终效果如下：

canvas - 基础知识 - 橡皮筋式选取框或可用作放大缩小

猜你喜欢