Как не использовать canvas clearRect () для нескольких рисунков? - PullRequest
Новая
       4

Как не использовать canvas clearRect () для нескольких рисунков?

2 голосов
/ 02 июля 2019

Я хочу сделать несколько рисунков на изображении, используя холст.

В моем коде я использую ctx.clearRect(0,0,canvas.width,canvas.height);, поэтому он не позволяет мне делать несколько рисунков.Если я не использовал clearRect(), программа работает неправильно.Кроме того, я попытался изменить место на clearRect(), но у меня это тоже не сработало.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.clearRect(0,0,canvas.width,canvas.height); //clear canvas
ctx.beginPath();
var width = mousex-last_mousex;
var height = mousey-last_mousey;
ctx.rect(last_mousex,last_mousey,width,height);
ctx.strokeStyle = "blue";
ctx.lineWidth = 10;
ctx.stroke();


//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;

//Mousedown
$(canvas).on('mousedown', function(e) {
  last_mousex = parseInt(e.clientX - canvasx);
  last_mousey = parseInt(e.clientY - canvasy);
  mousedown = true;
});

//Mouseup
$(canvas).on('mouseup', function(e) {
  mousedown = false;
});

//Mousemove
$(canvas).on('mousemove', function(e) {
  mousex = parseInt(e.clientX - canvasx);
  mousey = parseInt(e.clientY - canvasy);
  if (mousedown) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    var width = mousex - last_mousex;
    var height = mousey - last_mousey;
    ctx.rect(last_mousex, last_mousey, width, height);
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 10;
    ctx.stroke();
  }
  //Output
  $('#output').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown);
});
canvas {
  cursor: crosshair;
  border: 1px solid #000000;
  background-image: url("kroki2v3.png");
  background-repeat: no-repeat;
}
<html>

<head>
  <meta charset="utf-8" />
  <script src="https://code.jquery.com/jquery-2.1.3.js" integrity="sha256-goy7ystDD5xbXSf+kwL4eV6zOPJCEBD1FBiCElIm+U8=" crossorigin="anonymous"></script>

</head>

<body>
  <canvas id="canvas" width="3200" height="1400"></canvas>
  <div id="output"></div>
</body>

</html>

1 Ответ

2 голосов
/ 02 июля 2019

Вы должны хранить каждую позицию и размер прямоугольника в массиве и печатать циклически. 

jQuery(document).ready(function($) {
	
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.clearRect(0,0,canvas.width,canvas.height); //clear canvas
ctx.beginPath();
var width = mousex-last_mousex;
var height = mousey-last_mousey;
ctx.rect(last_mousex,last_mousey,width,height);
ctx.strokeStyle = "blue";
ctx.lineWidth = 10;
ctx.stroke();
//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = 0;
var last_mousey = 0;
var mousex = 0; 
var mousey = 0;
var mousedown = false;
var shapes = [];
var width;
var height;
//Mousedown
$(canvas).on('mousedown', function(e) {
  last_mousex = parseInt(e.clientX - canvasx);
  last_mousey = parseInt(e.clientY - canvasy);
  mousedown = true;
});

//Mouseup
$(canvas).on('mouseup', function(e) {
  const lastPos = {
  	lastMouseX : last_mousex,
  	lastMouseY : last_mousey,
  	rectWidth : width,
  	rectHeight : height
  }
  shapes.push(lastPos);
  mousedown = false;
});

//Mousemove
$(canvas).on('mousemove', function(e) {
  mousex = parseInt(e.clientX - canvasx);
  mousey = parseInt(e.clientY - canvasy);
  if (mousedown) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    width = mousex - last_mousex;
    height = mousey - last_mousey;
    if (shapes.length > 0){
    	for(var i in shapes){
		    ctx.rect(shapes[i].lastMouseX, shapes[i].lastMouseY, shapes[i].rectWidth, shapes[i].rectHeight);
    	}
    }
    ctx.rect(last_mousex, last_mousey, width, height);
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 10;
    ctx.stroke();
  }
  //Output
  $('#output').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown);
});
});
canvas {
	cursor: crosshair;
	border: 1px solid #000000;
	background-image: url("kroki2v3.png");
	background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" width="3200" height="1400"></canvas>
<div id="output"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...