Есть ли какой-либо простой способ увеличения и возврата в холст (JavaScript)? В основном у меня есть холст 400x400px, и я бы хотел увеличить масштаб с помощью mousedown (2x) и вернуться с помощью мыши.HTML5 Холст: Масштабирование
Провел последние два дня по поиску в Интернете, но пока не повезло. :(
Спасибо за помощь.
Основываясь на использовании drawImage, вы также можете комбинировать его с функцией масштабирования.
Поэтому, прежде чем сделать масштаб изображения контекст до уровня масштабирования вы хотите:
ctx.scale(2, 2) // Doubles size of anything draw to canvas.
Я создал небольшой пример здесь http://jsfiddle.net/mBzVR/4/, который использует DrawImage и масштаб, чтобы увеличить MouseDown и на MouseUp ,
IIRC Canvas является растровым стиль растровый. Он не будет масштабируемой, потому что нет сохраненной информации, чтобы увеличить до.
Лучше всего держать две копии в памяти (увеличенные и не) и обменять их на мыши.
Если у вас есть исходное изображение или холст элемент и ваш 400х400 холст, который вы хотите сделать в вы можете использовать метод DrawImage для достижения масштабирования.
Так, например, , полный vie ж может быть, как это
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);И увеличенное представление может быть, как это
ctx.drawImage(img, img.width/4, img.height/4, img.width/2, img.height/2, 0, 0, canvas.width, canvas.height);Первый параметр DrawImage является элементом изображения или холст элемент рисовать, следующий 4 являются х, у , ширина и высота для выборки из источника, а последние 4 параметра - это x, y, ширина и высота области для рисования в холсте. Затем он будет обрабатывать масштабирование.
Вам нужно будет просто выбрать ширину и высоту для исходного образца на основе уровня масштабирования и x и y на основе того, на что нажимается мышь, минус половину расчетной ширины и высоты (но вам нужно будет обеспечить прямоугольник не выходит за пределы).
Просто попробуйте это:
<!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>
Работает идеально подходит для меня масштабирование и перемещение мыши .. Вы можете настроить его на колесо мыши вверх & вниз Njoy !!!
Привет, GOK, интересно, возможно ли применить ваш код к изображению вместо собственного рисунка? Я пробовал код ниже, но это не позволяет мне перетаскивать. Могу я узнать, что с ним не так? 'var imageObj = new Image(); imageObj.onload = function() { context.drawImage (imageObj, 69, 50); }; imageObj.src = 'http: //www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; ' –
Это прекрасно! мне это нравится. – kobe
Одним из вариантов является использование CSS функции масштабирования:
$("#canvas_id").css("zoom","x%");
ВНИМАНИЕ! Если вы не заботитесь о том, чтобы ваши изображения были неровными, это будет работать нормально. В противном случае вы должны умножать все ваши размеры и данные движения на коэффициент. Вы можете сохранить его в объекте камеры и вывести соотношение, основанное на уровне масштабирования. –
O и теоретически вы должны иметь возможность исправить пикселирование, визуализируя изображение на большой размер, чем оно есть на самом деле. –
Также имейте в виду, что все масштабируется, включая границы. Если вы хотите увеличить размер фигур без утолщения контуров, вам придется умножать их ширину, высоту и положение вручную по мере их рисования. –