Chào các bác,
Em đang làm 1 project có xử dụng tới html canvas và hiện tại đang gặp 1 issue như sau:
- Load 1 bức ảnh vào canvas
- Xử dụng chuột để chấm các điểm trong bức ảnh và hiển thị lên (Demo em làm đơn giản cho dễ hình dung ạ)
- Zoom ảnh (Sử dụng bánh xe, zoom vào điểm chuột trỏ vào => đại loại là chỉ vào đâu thì zoom vào đó)
Và tại bước 3 e đang gặp issue là không tính toán được vị trí của con trỏ chuột so với ảnh sau khi đã zoom lên (vì nó bị lệch đi so với khung canvas) dẫn đến không thể vẽ được chính xác điểm tại vị trí con trỏ (Đoạn này hơi khó hiểu, các bác tải code về run thử giúp e)
Bác nào biết giúp em với, em cám ơn 
<html>
<head>
</head>
<body>
<style>
body {
margin: 0px;
padding: 0px;
}
#canvas {
border-style: solid;
}
.zoomHolder {
width: 100%;
height: auto;
position: relative;
overflow: hidden
}
</style>
<canvas id="canvas"></canvas>
<div>
<br />
<input type="file" name="filename" accept="image/gif, image/jpeg, image/png" onchange="getImage(this);">
</div>
<div>
<br />
<!-- <input type="button" class="form-control" value="Find Centroid" onclick="FindCentroid()" /> -->
<p id="position"></p>
</div>
<script type="text/javascript">
var points = [];
var pCentroid;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var background = new Image();
var originPos = {
x: 0,
y: 0
};
var scale = 1;
var zoomIntensity = 0.2;
var width = 0;
var height = 0;
var visibleWidth = width;
var visibleHeight = height;
var viTriLech = {
x: 0,
y: 0
}
canvas.addEventListener("mousemove", e => {
var mousePos = getMousePos(canvas, e);
// $("#position").html(mousePos.x + "," + mousePos.y);
});
canvas.addEventListener("mousedown", e => {
var mousePos = getMousePos(canvas, e);
mousePos = {
x: mousePos.x,
y: mousePos.y
};
points.push(mousePos);
reDraw();
});
canvas.addEventListener("mousewheel", event => {
event.preventDefault();
zoom(event);
});
function getMousePos(canvas, evt) {
// var rect = canvas.getBoundingClientRect();
// return {
// x: evt.clientX - rect.left,
// y: evt.clientY - rect.top
// };
return {
x: evt.clientX - canvas.offsetLeft,
y: evt.clientY - canvas.offsetTop
};
}
function getImage(input) {
if (input.files && input.files[0]) {
points = [];
var reader = new FileReader();
reader.onload = function (e) {
background.src = e.target.result;
background.onload = function () {
canvas.width = background.width;
canvas.height = background.height;
width = background.width;
height = background.height;
visibleWidth = width;
visibleHeight = height;
context.drawImage(background, 0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(200, 200, 5, 0, 2 * Math.PI, true);
context.fill();
context.closePath();
}
};
reader.readAsDataURL(input.files[0]);
}
}
function reDraw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(background, 0, 0, canvas.width, canvas.height);
// if (points.length > 1) {
// context.beginPath();
// context.arc(points[0].x, points[0].y, 5, 0, 2 * Math.PI, true);
// context.fill();
// context.closePath();
// context.moveTo(points[0].x, points[0].y);
// for (var i = 1; i < points.length; i++) {
// context.beginPath();
// context.arc(points[i].x, points[i].y, 5, 0, 2 * Math.PI, true);
// context.fill();
// context.closePath();
// context.save();
// context.beginPath();
// context.lineTo(points[i].x, points[i].y);
// context.stroke();
// }
// }
points.forEach(item => {
context.beginPath();
context.arc(item.x, item.y, 5, 0, 2 * Math.PI, true);
context.fill();
context.closePath();
});
context.beginPath();
context.arc(200, 200, 5, 0, 2 * Math.PI, true);
context.fill();
context.closePath();
}
function zoom(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
let mousePos = getMousePos(canvas, event);
let wheel = event.deltaY < 0 ? 1 : -1;
// Compute zoom factor.
let zoom = Math.exp(wheel * zoomIntensity);
// Translate so the visible origin is at the context's origin.
context.translate(originPos.x, originPos.y);
originPos.x -= mousePos.x / (scale * zoom) - mousePos.x / scale;
originPos.y -= mousePos.y / (scale * zoom) - mousePos.y / scale;
// Scale it (centered around the origin due to the trasnslate above).
context.scale(zoom, zoom);
context.translate(-originPos.x, -originPos.y);
// Update scale and others.
scale *= zoom;
visibleWidth = width / scale;
visibleHeight = height / scale;
context.drawImage(background, 0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(200, 200, 5, 0, 2 * Math.PI, true);
context.fill();
context.closePath();
points.forEach(item => {
context.beginPath();
context.arc(item.x, item.y, 5, 0, 2 * Math.PI, true);
context.fill();
context.closePath();
});
}
</script>
</body>
<footer></footer>
</html>
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?