使用 javascript 中的 mousemove 事件在画布内的图像上绘制矩形-前端问题

Draw a rectangle on a image inside a canvas using mousemove event in javascript(使用 javascript 中的 mousemove 事件在画布内的图像上绘制矩形)

本文介绍了使用 javascript 中的 mousemove 事件在画布内的图像上绘制矩形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 mousemove 事件在画布内的图像上绘制一个矩形.但是由于 clearRect ，我在图像上得到了矩形，矩形中填充了颜色.谁能弄清楚我.如何在图像上绘制一个只有边框的矩形.下面是我实现它的代码.

I am trying to draw a rectangle on an image that is inside canvas using mousemove event . But i am getting rectangle on the image with color filled in the rectangle because of clearRect . can anyone figure me out . how to draw a rectangle with just a border on the image . Below is the code that i followed to achieve it .

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rect = {},
    drag = false;
	function init() {
		var imageObj = new Image();

      imageObj.onload = function() {
        ctx.drawImage(imageObj, 0, 0);
      };
      imageObj.src = "aHR0cDovL3d3dy5odG1sNWNhbnZhc3R1dG9yaWFscy5jb20vZGVtb3MvYXNzZXRzL2RhcnRoLXZhZGVyLmpwZw==";
	  canvas.addEventListener('mousedown', mouseDown, false);
	  canvas.addEventListener('mouseup', mouseUp, false);
	  canvas.addEventListener('mousemove', mouseMove, 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) {
		rect.w = (e.pageX - this.offsetLeft) - rect.startX;
		rect.h = (e.pageY - this.offsetTop) - rect.startY ;
		ctx.clearRect(rect.startX, rect.startY,rect.w,rect.h);
		draw();
	  }
	}
	function draw() {
	  ctx.clearRect(rect.startX, rect.startY, rect.w, rect.h);
	  ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
	}

<head>
<meta charset="utf-8" />
<title>Draw a rectangle!</title>
</head>

<body onload="init();">
<canvas id="canvas" width="500" height="500"></canvas>
</body>

推荐答案

您可能需要先使用 clearRect 清除整个画布，然后立即绘制您的 imageObj，画笔画.所有这些都发生在 mouseMove 函数中，因此它基本上会持续不断地绘制这些元素.

You probably need to first clear the entire canvas using clearRect, then draw your imageObj immediately and finally, draw the stroke. All of this happening inside the mouseMove function so it basically keeps drawing these elements on a continuous basis.

试试下面的这段代码:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = {};
var drag = false;
var imageObj = null;

function init() {
    imageObj = new Image();
    imageObj.onload = function () { ctx.drawImage(imageObj, 0, 0); };
    imageObj.src = "aHR0cDovL3d3dy5odG1sNWNhbnZhc3R1dG9yaWFscy5jb20vZGVtb3MvYXNzZXRzL2RhcnRoLXZhZGVyLmpwZw==";
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, 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(imageObj, 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);
    }
}
//
init();

<canvas id="canvas" width="500" height="500"></canvas>

希望这正是您所寻找的，并能以某种方式帮助您.

Hope this is what you were looking for and helps you in some way.

附:我特意在笔划上应用了 red 颜色.你当然可以删除它.

P.S. I have intentionally applied the red colour on the stroke. You can remove it of course.

这篇关于使用 javascript 中的 mousemove 事件在画布内的图像上绘制矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！