javascript - JQuery - 在图像上绘制矩形

Question

我试图在图像上绘制一个红色矩形，但不知何故我的矩形不是从我用鼠标单击的坐标开始的。这是代码:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let img = new Image();
let fileName = "";

let rect = {};
let drag = false;
  // Add image to canvas
reader.addEventListener(
    "load",
    () => {
      // Create image
      img = new Image();
      // Set image src
      img.src = reader.result;
      // On image load add to canvas
      img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
        canvas.removeAttribute("data-caman-id");
      };
      canvas.addEventListener('mousedown', mouseDown, false);
      canvas.addEventListener('mouseup', mouseUp, false);
      canvas.addEventListener('mousemove', mouseMove, false);
    },
    false
  );
});


function mouseDown(e) {
    rect.startX = e.pageX - this.offsetLeft;
    rect.startY = e.pageY - this.offsetTop;
    drag = true;
}

function mouseUp() { drag = false; }

function mouseMove(e) {
    if (drag) {
        ctx.clearRect(0, 0, 500, 500);
        ctx.drawImage(img, 0, 0);
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY;
        ctx.strokeStyle = 'red';
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
        console.log("rect.startX: " + rect.startX + " - rect.startY: " +rect.startY)
    }
}

这是我得到的返回:

截屏时我无法显示我的鼠标位置，所以我在图像上标记了它。基本上，我从左上角开始，矩形似乎从右下角开始绘制。我做错了什么？

Answer 1

好的，我的回答与(原始)问题标题更相关，还有一点 jQuery 的乐趣。

您的(原始)问题代码涉及 canvas没有 jQuery代码，只是 javascript。

这个答案更像是一个原始的 jQuery方法。

下面是一个非常粗略的概念，使用 jQuery .on处理事件...

• mousedown开始绘制矩形的事件
• resize更新图像大小和偏移量的事件
• mousemove更新矩形绘制位置的事件
• mouseup在设定位置设置矩形的事件

以上所有 .on在文档选择器 resize 中运行的事件(不包括 .area 事件) , 有一个 child img下面这个例子中的元素。

Please note I have not coded this example for multiple usages of .area div, you will need go even deeper with the script logic in my example to accommodate multiple usages of .area div.

我下面的脚本示例代码可能会激励您到达您想要的位置，也可能不会。

我正在做的主要关键事情是将图像中的像素光标位置转换为百分比整数。使用百分比作为 xy positions 意味着呈现的结果将与 window 相同或 .area响应式调整大小(没有 javascript)。

这是一个jQuery和 CSS下面是一个有趣的例子。

jsFiddle 版本:https://jsfiddle.net/joshmoto/w5bcx9o8/2/

查看代码中的注释以了解正在发生的事情...

// our updatable variable objects to use globally
let img = {};
let position = {};

// image matrix function to update img object variable
function imgMatrix() {

  // our image object inside area
  let $img = $('IMG', '.area');

  // offset data of image
  let offset = $img.offset();

  // add/update object key data
  img.width = $img.outerWidth();
  img.height = $img.outerHeight();
  img.offsetX = offset.left - $(document).scrollLeft();
  img.offsetY = offset.top - $(document).scrollTop();

}

// position matrix function to update position object variable
function positionMatrix(e, mousedown = false) {

  // if mousedown param is true... for use in 
  if (mousedown) {

    // set the top/left position object data with percentage position
    position.top = (100 / img.height) * ( (e.pageY - $(document).scrollTop()) - img.offsetY);
    position.left = (100 / img.width) * ( (e.pageX - $(document).scrollLeft()) - img.offsetX);

  }

  // set the right/bottom position object data with percentage position
  position.right = 100 - ((100 / img.width) * ((e.pageX - $(document).scrollLeft()) - img.offsetX));
  position.bottom = 100 - ((100 / img.height) * ((e.pageY - $(document).scrollTop()) - img.offsetY));

}

// mouse move event function in area div
$(document).on('mousemove', '.area', function(e) {

  // update img object variable data upon this mousemove event
  imgMatrix();

  // if this area has draw class
  if ($(this).hasClass('draw')) {

    // update position object variable data passing current event data
    positionMatrix(e);

    // if image x cursor drag position percent is negative to mousedown x position
    if ((100 - position.bottom) < position.top) {

      // update rectange x negative positions css
      $('.rect', this).css({
        top: (100 - position.bottom) + '%',
        bottom: (100 - position.top) + '%'
      });

    // else if image x cursor drag position percent is positive to mousedown x position
    } else {

      // update rectange x positive positions css
      $('.rect', this).css({
        bottom: position.bottom + '%',
        top: position.top + '%',
      });

    }

    // if image y cursor drag position percent is negative to mousedown y position
    if ((100 - position.right) < position.left) {

      // update rectange y negative positions css
      $('.rect', this).css({
        left: (100 - position.right) + '%',
        right: (100 - position.left) + '%'
      });

    // else if image y cursor drag position percent is positive to mousedown y position
    } else {

      // update rectange y positive positions css
      $('.rect', this).css({
        right: position.right + '%',
        left: position.left + '%'
      });

    }

  }

});

// mouse down event function in area div
$(document).on('mousedown', '.area', function(e) {

  // remove the drawn class
  $(this).removeClass('drawn');

  // update img object variable data upon this mousedown event
  imgMatrix();

  // update position object variable data passing current event data and mousedown param as true 
  positionMatrix(e, true);

  // update rectange xy positions css
  $('.rect', this).css({
    left: position.left + '%',
    top: position.top + '%',
    right: position.right + '%',
    bottom: position.bottom + '%'
  });

  // add draw class to area div to reveal rectangle
  $(this).addClass('draw');

});

// mouse up event function in area div
$(document).on('mouseup', '.area', function(e) {

  // update img object variable data upon this mouseup event
  imgMatrix();

  // if this area had draw class
  if ($(this).hasClass('draw')) {

    // update position object variable data passing current event
    positionMatrix(e);

    // math trunc on position values if x and y values are equal, basically no drawn rectangle on mouseup event
    if ((Math.trunc(position.left) === Math.trunc(100 - position.right)) && (Math.trunc(position.top) === Math.trunc(100 - position.bottom))) {
      
      // remove draw and drawn classes
      $(this).removeClass('draw drawn');

    // else if x and y values are not equal, basically a rectange has been drawn
    } else {

      // add drawn class and remove draw class
      $(this).addClass('drawn').removeClass('draw');

    }

  }

});

// on window resize function
$(window).on('resize', function(e) {
  
  // update img object variable data upon this window resize event
  imgMatrix();

});

/* area div */
.area {
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
}

/* area div hover cursor */
.area:hover {
  cursor: crosshair;
}

/* img tag in area div */
.area IMG {
  display: block;
  width: 100%;
  pointer-events: none;
  user-select: none;
}

/* rectangle div in area div */
.area .rect {
  opacity: 0;
  transition: all 0s ease;
  position: absolute;
  border: 1px solid red;
  z-index: 1;
}

/* rectangle div css when in draw or drawn mode */
.area.draw .rect,
.area.drawn .rect {
  opacity: 1;
}

/* below css is for fun rendering outer exclusion area of drawn rectangle div with a opaque overlay */

/* rectange exclusing pseudo elems base css */
.area.drawn .rect .exclusion-x::before,
.area.drawn .rect .exclusion-x::after,
.area.drawn .rect .exclusion-y::before,
.area.drawn .rect .exclusion-y::after {
  position: absolute;
  content: '';
  display: block;
  background: #000;
  opacity: .75;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

/* rectange outer opaque x above css */
.area.drawn .rect .exclusion-x::before {
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  height: 200vh;
  width: 200vw;
}

/* rectange outer opaque x below css */
.area.drawn .rect .exclusion-x::after {
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  height: 200vh;
  width: 200vw;
}

/* rectange outer opaque y left css */
.area.drawn .rect .exclusion-y::before {
  right: calc(100% + 1px);
  top: -1px;
  bottom: -1px;
  width: 200vw;
}

/* rectange outer opaque y right css */
.area.drawn .rect .exclusion-y::after {
  left: calc(100% + 1px);
  top: -1px;
  bottom: -1px;
  width: 200vw;
}

<div class="area">
  <img src="https://dragonballsuper-france.fr/wp-content/uploads/2017/10/DIHQF2OXoAAJi4n-660x330.jpg" alt="" />
  <div class="rect">
    <div class="exclusion-x"></div>
    <div class="exclusion-y"></div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>