Có cách nào dễ dàng để phóng to và thu nhỏ trong canvas (JavaScript) không? Về cơ bản tôi có canvas 400x400px và tôi muốn có thể phóng to bằng 'mousedown' (2x) và quay lại với 'mouseup'.HTML5 Canvas: Phóng to
Đã dành hai ngày qua googling, nhưng không có may mắn cho đến nay. :(
Nhờ sự giúp đỡ.
Xây dựng dựa trên đề xuất sử dụng drawImage, bạn cũng có thể kết hợp điều này với chức năng tỷ lệ.
Vì vậy, trước khi bạn vẽ quy mô hình ảnh bối cảnh đến mức zoom bạn muốn:
ctx.scale(2, 2) // Doubles size of anything draw to canvas.
tôi đã tạo ra một ví dụ nhỏ ở đây http://jsfiddle.net/mBzVR/4/ sử dụng drawImage và quy mô để phóng to trên mousedown và ra trên mouseup .
IIRC Canvas là một bitmap phong cách raster. Nó wont được Zoomable vì không có thông tin được lưu trữ để phóng to.
Tốt nhất là để giữ cho hai bản sao trong bộ nhớ (thu nhỏ và không) và trao đổi chúng trong việc kích chuột.
Nếu bạn có một hình ảnh nguồn hoặc thành phần vải và 400x400 canvas của bạn, bạn muốn vẽ vào bạn có thể sử dụng phương thức drawImage để đạt được phóng to.
vì vậy, ví dụ , vie w có thể là như thế này
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);Và một cái nhìn thu nhỏ có thể là như thế này
ctx.drawImage(img, img.width/4, img.height/4, img.width/2, img.height/2, 0, 0, canvas.width, canvas.height);Tham số đầu tiên để drawImage là yếu tố hình ảnh hoặc yếu tố canvas để vẽ, tiếp theo 4 là x, y , chiều rộng và chiều cao để lấy mẫu từ nguồn và 4 thông số cuối cùng là x, y, chiều rộng và chiều cao của vùng để vẽ trong canvas. Sau đó nó sẽ xử lý việc mở rộng quy mô cho bạn.
Bạn chỉ cần chọn chiều rộng và chiều cao cho mẫu nguồn dựa trên mức thu phóng và x và y dựa vào vị trí con chuột được nhấp trừ đi một nửa chiều rộng và chiều cao được tính toán (nhưng bạn sẽ cần phải đảm bảo hình chữ nhật không nằm ngoài giới hạn).
Chỉ cần cố gắng này ra:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
#wrapper {
position: relative;
border: 1px solid #9C9898;
width: 578px;
height: 200px;
}
#buttonWrapper {
position: absolute;
width: 30px;
top: 2px;
right: 2px;
}
input[type =
"button"] {
padding: 5px;
width: 30px;
margin: 0px 0px 2px 0px;
}
</style>
<script>
function draw(scale, translatePos){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(translatePos.x, translatePos.y);
context.scale(scale, scale);
context.beginPath(); // begin custom shape
context.moveTo(-119, -20);
context.bezierCurveTo(-159, 0, -159, 50, -59, 50);
context.bezierCurveTo(-39, 80, 31, 80, 51, 50);
context.bezierCurveTo(131, 50, 131, 20, 101, 0);
context.bezierCurveTo(141, -60, 81, -70, 51, -50);
context.bezierCurveTo(31, -95, -39, -80, -39, -50);
context.bezierCurveTo(-89, -95, -139, -80, -119, -20);
context.closePath(); // complete custom shape
var grd = context.createLinearGradient(-59, -100, 81, 100);
grd.addColorStop(0, "#8ED6FF"); // light blue
grd.addColorStop(1, "#004CB3"); // dark blue
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#0000ff";
context.stroke();
context.restore();
}
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var translatePos = {
x: canvas.width/2,
y: canvas.height/2
};
var scale = 1.0;
var scaleMultiplier = 0.8;
var startDragOffset = {};
var mouseDown = false;
// add button event listeners
document.getElementById("plus").addEventListener("click", function(){
scale /= scaleMultiplier;
draw(scale, translatePos);
}, false);
document.getElementById("minus").addEventListener("click", function(){
scale *= scaleMultiplier;
draw(scale, translatePos);
}, false);
// add event listeners to handle screen drag
canvas.addEventListener("mousedown", function(evt){
mouseDown = true;
startDragOffset.x = evt.clientX - translatePos.x;
startDragOffset.y = evt.clientY - translatePos.y;
});
canvas.addEventListener("mouseup", function(evt){
mouseDown = false;
});
canvas.addEventListener("mouseover", function(evt){
mouseDown = false;
});
canvas.addEventListener("mouseout", function(evt){
mouseDown = false;
});
canvas.addEventListener("mousemove", function(evt){
if (mouseDown) {
translatePos.x = evt.clientX - startDragOffset.x;
translatePos.y = evt.clientY - startDragOffset.y;
draw(scale, translatePos);
}
});
draw(scale, translatePos);
};
jQuery(document).ready(function(){
$("#wrapper").mouseover(function(e){
$('#status').html(e.pageX +', '+ e.pageY);
});
})
</script>
</head>
<body onmousedown="return false;">
<div id="wrapper">
<canvas id="myCanvas" width="578" height="200">
</canvas>
<div id="buttonWrapper">
<input type="button" id="plus" value="+"><input type="button" id="minus" value="-">
</div>
</div>
<h2 id="status">
0, 0
</h2>
</body>
</html>
Làm việc hoàn hảo cho tôi với phóng to và di chuyển chuột .. bạn có thể tùy chỉnh nó để lăn chuột lên & xuống NJOY !!!
Xin chào GOK, tự hỏi nếu nó có thể áp dụng mã của bạn vào một hình ảnh thay vì bản vẽ của riêng bạn? Tôi đã thử mã dưới đây nhưng nó không cho phép tôi kéo. Tôi có thể biết có chuyện gì không? 'var imageObj = new Image(); imageObj.onload = function() { context.drawImage (imageObj, 69, 50); }; imageObj.src = 'http: //www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; ' –
Thật hoàn hảo! tôi thích nó. – kobe
Một lựa chọn là sử dụng tính năng zoom css:
$("#canvas_id").css("zoom","x%");
CẢNH BÁO! Nếu bạn không quan tâm về hình ảnh của bạn nhận được pixelated này sẽ làm việc tốt. Nếu không, bạn nên nhân tất cả các kích thước và dữ liệu di chuyển của mình theo tỷ lệ. Bạn có thể lưu trữ nó trong một đối tượng máy ảnh và tạo ra một tỷ lệ dựa trên mức thu phóng. –
O và về lý thuyết, bạn sẽ có thể khắc phục pixelation bằng cách hiển thị hình ảnh ở kích thước lớn sau đó thực sự là vậy. –
Cũng nên nhớ rằng mọi thứ đều tăng lên, bao gồm cả đường viền. Nếu bạn muốn tăng kích thước hình dạng mà không làm dày đường viền, bạn sẽ phải nhân chiều rộng, chiều cao và vị trí của chúng theo cách thủ công khi bạn vẽ chúng. –