मैं कैनवास 2 पर सटीक स्थिति पर आयत बनाने के लिए गतिशील रूप से कैनवास पर एक आयत के निर्देशांक स्थानांतरित करने के लिए दूसरे कैनवास पर कुछ कोड का उपयोग कर रहा हूं।

मैंने विभिन्न समान प्रश्नों और समाधानों का अध्ययन किया है जैसे: link1 और स्टैकओवरफ्लो पर link2, लेकिन उनमें से कोई भी मेरे में काम नहीं कर रहा है मामला।

sendimg() फ़ंक्शन आयत निर्देशांकों को कैनवास1 से कैनवास2 में स्थानांतरित कर रहा है। चूंकि कैनवास 2 छवि को बड़े आकार में बढ़ाया गया है, आयत सही स्थिति पर नहीं आ रहे हैं।

विवरण के लिए कृपया संलग्न स्निपेट या कोडपेन लिंक देखें।

var canvas = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

var ctx = canvas.getContext("2d");
var ctx2 = canvas2.getContext("2d");

var img = new Image();
var rect = {};
var scale = 0;
var scale2 = 0;
var x = 0;
var y = 0;
var x2 = 0;
var y2 = 0;
var drag = false;


img.onload = function () {
	//Setting dpi for canvas1
	var dpi = window.devicePixelRatio || 1;
	canvas.setAttribute('width', canvas.clientWidth * dpi);
	canvas.setAttribute('height', canvas.clientHeight * dpi);
	
	//Setting dpi for canvas2
	var dpi = window.devicePixelRatio || 1;
	canvas2.setAttribute('width', canvas2.clientWidth * dpi);
	canvas2.setAttribute('height', canvas2.clientHeight * dpi);
				
	
	ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
	ctx.save();
	
	ctx2.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
	ctx2.save();
	
	//fitting image to canvas fill
	scale = Math.max(canvas.clientWidth / img.width, canvas.clientHeight / img.height); //canvas1 scale
	scale2 = Math.max(canvas2.clientWidth / img.width, canvas2.clientHeight / img.height); //canvas2 scale

    x = (canvas.clientWidth / 2) - (img.width / 2) * scale; //canvas1 x
    y = (canvas.clientHeight / 2) - (img.height / 2) * scale; //canvas1 y

	x2 = (canvas2.clientWidth / 2) - (img.width / 2) * scale2; //canvas2 x
    y2 = (canvas2.clientHeight / 2) - (img.height / 2) * scale2; //canvas2 y
	
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
	ctx2.drawImage(img, x2, y2, img.width * scale2, img.height * scale2);
	
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);

}
img.crossOrigin = "Anonymous";
img.src = 'https://i.imgur.com/1n8sbrF.jpg';

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

function mouseUp() { 
	drag = false; 
	console.log(rect);
}

function mouseMove(e) {
    if (drag) {
        ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
        ctx.save();
        ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
        rect.w = (e.clientX - this.offsetLeft) - rect.startX;
        rect.h = (e.clientY - this.offsetTop) - rect.startY;
		ctx.lineWidth  = 2;
        ctx.strokeStyle = 'red';
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
    }
}

function sendimg()
{
	if(rect.startX === undefined)
	{
		alert("draw any rectangle first on canvas1");
		return false;
	}
	ctx2.lineWidth = 2;
	ctx2.strokeStyle = "yellow";
	//Following code is not drawing rectangle on correct position
	ctx2.strokeRect(rect.startX * scale2 + x2 , rect.startY* scale2 + y2, rect.w * scale2 , rect.h * scale2);
  
}
html, body{
  width: 90%;
  height: 90%;
  }
#div1 {
  margin: 10px;
  width: 800px;
  height: 600px;
  border: 2px solid red;
}

#div2 {
  position: absolute;
  top: 20px;
  left: 900px;
  margin: 10px;
  width: 1200px;
  height: 800px;
  border: 2px solid red;
}

canvas {
  width: 100%;
  height: 100%;
}
<button type="button" onclick="sendimg();">Send Rectangle on Canvas2</button>
<div id="div1">
	<canvas id="canvas1"></canvas>
</div>

<div id="div2">
	<canvas id="canvas2"></canvas>
</div>
2
JackPaul 31 जिंदा 2020, 22:33

1 उत्तर

सबसे बढ़िया उत्तर

दूसरे कैनवास के अपने परिवर्तन और स्केलिंग कारकों को लागू करने से पहले आपको पहले कैनवास के अपने स्केलिंग और अनुवाद को उलटना होगा। यह वहां के 90% रास्ते की तरह है, Y अक्ष सही है, लेकिन X अक्ष का अनुवाद गलत है। ctx2.strokeRect पर मेरी कॉल देखें और यह कैसे स्केलिंग और अनुवाद को उलट देता है। मेरा कोड शायद जैक किया गया है क्योंकि कैनवास मूल ऊपर बाईं ओर है और अनुवाद और स्केलिंग के सूत्र मानते हैं कि यह नीचे बाईं ओर है।

संपादित करें: कोड फिक्स्ड - यह अभी सही होना चाहिए।

var canvas = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

var ctx = canvas.getContext("2d");
var ctx2 = canvas2.getContext("2d");

var img = new Image();
var rect = {};
var scale = 0;
var scale2 = 0;
var x = 0;
var y = 0;
var x2 = 0;
var y2 = 0;
var drag = false;


img.onload = function () {
	//Setting dpi for canvas1
	var dpi = window.devicePixelRatio || 1;
	canvas.setAttribute('width', canvas.clientWidth * dpi);
	canvas.setAttribute('height', canvas.clientHeight * dpi);
	
	//Setting dpi for canvas2
	var dpi = window.devicePixelRatio || 1;
	canvas2.setAttribute('width', canvas2.clientWidth * dpi);
	canvas2.setAttribute('height', canvas2.clientHeight * dpi);
				
	
	ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
	ctx.save();
	
	ctx2.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
	ctx2.save();
	
	//fitting image to canvas fill
	scale = Math.max(canvas.clientWidth / img.width, canvas.clientHeight / img.height); //canvas1 scale
	scale2 = Math.max(canvas2.clientWidth / img.width, canvas2.clientHeight / img.height); //canvas2 scale

    x = (canvas.clientWidth / 2) - (img.width / 2) * scale; //canvas1 x
    y = (canvas.clientHeight / 2) - (img.height / 2) * scale; //canvas1 y

	x2 = (canvas2.clientWidth / 2) - (img.width / 2) * scale2; //canvas2 x
    y2 = (canvas2.clientHeight / 2) - (img.height / 2) * scale2; //canvas2 y
	
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
	ctx2.drawImage(img, x2, y2, img.width * scale2, img.height * scale2);
	
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
    console.log(scale)
    console.log(scale2)
}
img.crossOrigin = "Anonymous";
img.src = 'https://i.imgur.com/1n8sbrF.jpg';

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

function mouseUp() { 
	drag = false; 
	console.log(rect);
}

function mouseMove(e) {
    if (drag) {
        ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
        ctx.save();
        ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
        rect.w = (e.clientX - this.offsetLeft) - rect.startX;
        rect.h = (e.clientY - this.offsetTop) - rect.startY;
		ctx.lineWidth  = 2;
        ctx.strokeStyle = 'red';
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
    }
}

function sendimg()
{
	if(rect.startX === undefined)
	{
		alert("draw any rectangle first on canvas1");
		return false;
	}
	ctx2.lineWidth = 2;
	ctx2.strokeStyle = "yellow";
	//Following code is not drawing rectangle on correct position
	ctx2.strokeRect( ((rect.startX - x )/scale) * scale2 + x2, 
                   ((rect.startY - y )/scale) * scale2 + y2, 
                   (rect.w/scale) * (scale2), 
                   (rect.h/scale) * (scale2));
  
}
html, body{
  width: 90%;
  height: 90%;
  }
#div1 {
  margin: 10px;
  width: 800px;
  height: 600px;
  border: 2px solid red;
}

#div2 {
  position: absolute;
  top: 20px;
  left: 900px;
  margin: 10px;
  width: 1200px;
  height: 800px;
  border: 2px solid red;
}

canvas {
  width: 100%;
  height: 100%;
}
<button type="button" onclick="sendimg();">Send Rectangle on Canvas2</button>
<div id="div1">
	<canvas id="canvas1"></canvas>
</div>

<div id="div2">
	<canvas id="canvas2"></canvas>
</div>
1
Jeff 1 फरवरी 2020, 01:28