如何在画布中将轴更改为左下角后修复鼠标事件

Question

我通过

context.translate(0, canvas.height);
context.scale(1,-1);

所以画布会颠倒过来，现在的问题是当我想画一个矩形时鼠标事件不匹配。就像当我把鼠标放在画布底部画画时，矩形会出现在顶部

谁能帮帮我。 请给我一些指导或参考

我使用此链接作为参考

将画布原点设置为左下角

这里是代码片段：

var ColorCanvas = document.getElementById('ColorCanvas');
var ctx1 = ColorCanvas.getContext('2d');
var TransCanvas = document.getElementById('TransCanvas');
var ctx2 = TransCanvas.getContext('2d');

var rect = {},
drag = false;
var bg = new Image();
bg.src = "Jellyfish.jpg";
bg.onload = function () {
ctx1.drawImage(bg, 0, 0);
}
var annotation = {
x: 0,
y: 0,
w: 0,
h: 0,
a: this.x,
printCoordinates: function () {
console.log(`X: ${this.x}px, Y: ${this.y}px, Width: ${this.w}px, Height: ${this.h}px`);   
}     
};
//the array of all rectangles
var boundingBoxes = [];
// the actual rectangle, the one that is being drawn
var o = {};

// a variable to store the mouse position
var m = {},
// a variable to store the point where you begin to draw the rectangle
start = {};
// a boolean
var isDrawing = false;
ctx2.translate(0, TransCanvas.height);
ctx2.scale(1, -1);
function handleMouseDown(e) {
start = oMousePos(TransCanvas, e);
isDrawing = true;
}

function handleMouseMove(e) {
if (isDrawing) {
m = oMousePos(TransCanvas, e);
draw();  
}
}
function handleMouseUp(e) {
isDrawing = false;
if (boundingBoxes.length < 2) {
var box = Object.create(annotation);
box.x = o.x;
box.y = o.y;
box.w = o.w;
box.h = o.h;
boundingBoxes.push(box);
draw();
box.printCoordinates();
}
}
function draw() {
if (boundingBoxes.length <= 2) {
o.x = start.x;  // start position of x
o.y = start.y;  // start position of y
o.w = m.x - start.x;  // width
o.h = m.y - start.y;  // height

ctx2.clearRect(0, 0, TransCanvas.width, TransCanvas.height);
// draw all the rectangles saved in the rectsRy
boundingBoxes.map(r => { drawRect(r) })
// draw the actual rectangle
ctx2.fillRect(x, TransCanvas.height - y, size, size);
drawRect(o);
}
}
TransCanvas.addEventListener("mousedown", handleMouseDown);
TransCanvas.addEventListener("mousemove", handleMouseMove);
TransCanvas.addEventListener("mouseup", handleMouseUp);
function drawRect(o) {

ctx2.beginPath(o);
ctx2.strokeStyle = "black";
ctx2.lineWidth = 1;
ctx2.rect(o.x, o.y, o.w, o.h);
ctx2.stroke();
}
// Function to detect the mouse position
function oMousePos(TransCanvas, evt) {
var ClientRect = TransCanvas.getBoundingClientRect();
return {
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
}
}

#TransCanvas {
position: absolute;
background-color: rgba(255,255,255,0.1);
left: 0;
top: 0;
}
#ColorCanvas {
position: absolute;
left: 0;
top: 0;
}
#down {
position: absolute;
right: 0px;
}
body {
background-color: ivory;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main-container">
<canvas id="ColorCanvas" width="700" height="900" style="border:1px solid #000000"></canvas>
<canvas id="TransCanvas" width="700" height="800"></canvas>
</div>

Answer 1

而是使用e.clientY使用TransCanvas.height - e.clientY

// Function to detect the mouse position
function oMousePos(TransCanvas, evt) {
var ClientRect = TransCanvas.getBoundingClientRect();
return {
x: Math.round(evt.clientX - ClientRect.left),
y: canvas.height-Math.round(evt.clientY - ClientRect.top)
}
}

var ColorCanvas = document.getElementById('ColorCanvas');
var ctx1 = ColorCanvas.getContext('2d');
var TransCanvas = document.getElementById('TransCanvas');
var ctx2 = TransCanvas.getContext('2d');

var rect = {},
drag = false;
var bg = new Image();
bg.src = "Jellyfish.jpg";
bg.onload = function () {
ctx1.drawImage(bg, 0, 0);
}
var annotation = {
x: 0,
y: 0,
w: 0,
h: 0,
a: this.x,
printCoordinates: function () {
console.log(`X: ${this.x}px, Y: ${this.y}px, Width: ${this.w}px, Height: ${this.h}px`);   
}     
};
//the array of all rectangles
var boundingBoxes = [];
// the actual rectangle, the one that is being drawn
var o = {};

// a variable to store the mouse position
var m = {},
// a variable to store the point where you begin to draw the rectangle
start = {};
// a boolean
var isDrawing = false;
ctx2.translate(0, TransCanvas.height);
ctx2.scale(1, -1);
function handleMouseDown(e) {
start = oMousePos(TransCanvas, e);
isDrawing = true;
}

function handleMouseMove(e) {
if (isDrawing) {
m = oMousePos(TransCanvas, e);
draw();  
}
}
function handleMouseUp(e) {
isDrawing = false;
if (boundingBoxes.length < 2) {
var box = Object.create(annotation);
box.x = o.x;
box.y = o.y;
box.w = o.w;
box.h = o.h;
boundingBoxes.push(box);
draw();
box.printCoordinates();
}
}
function draw() {
if (boundingBoxes.length <= 2) {
o.x = start.x;  // start position of x
o.y = start.y;  // start position of y
o.w = m.x - start.x;  // width
o.h = m.y - start.y;  // height

ctx2.clearRect(0, 0, TransCanvas.width, TransCanvas.height);
// draw all the rectangles saved in the rectsRy
boundingBoxes.map(r => { drawRect(r) })
// draw the actual rectangle
ctx2.fillRect(x, TransCanvas.height - y, size, size);
drawRect(o);
}
}
TransCanvas.addEventListener("mousedown", handleMouseDown);
TransCanvas.addEventListener("mousemove", handleMouseMove);
TransCanvas.addEventListener("mouseup", handleMouseUp);
function drawRect(o) {

ctx2.beginPath(o);
ctx2.strokeStyle = "black";
ctx2.lineWidth = 1;
ctx2.rect(o.x, o.y, o.w, o.h);
ctx2.stroke();
}
// Function to detect the mouse position
function oMousePos(TransCanvas, evt) {
var ClientRect = TransCanvas.getBoundingClientRect();
return {
x: Math.round(evt.clientX - ClientRect.left),
y: TransCanvas.height-Math.round(evt.clientY - ClientRect.top)
}
}

#TransCanvas {
position: absolute;
background-color: rgba(255,255,255,0.1);
left: 0;
top: 0;
}
#ColorCanvas {
position: absolute;
left: 0;
top: 0;
}
#down {
position: absolute;
right: 0px;
}
body {
background-color: ivory;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main-container">
<canvas id="ColorCanvas" width="700" height="900" style="border:1px solid #000000"></canvas>
<canvas id="TransCanvas" width="700" height="800"></canvas>
</div>