Bir noktaya Zoom (ölçek kullanarak ve tercüme)
Haritalar üzerinde yakınlaştırma gibi fare tekerleği ile tuval üzerine gelin fare altında zoom yapabiliyor olmak istiyorum.google.
Bunun için çalışıyorum gibi düz bir kod istiyorum
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var scale = 1;
var originx = 0;
var originy = 0;
function draw(){
context.fillStyle = "white";
context.fillRect(originx,originy,800/scale,600/scale);
context.fillStyle = "black";
context.fillRect(50,50,100,100);
}
setInterval(draw,100);
canvas.onmousewheel = function (event){
var mousex = event.clientX - canvas.offsetLeft;
var mousey = event.clientY - canvas.offsetTop;
var wheel = event.wheelDelta/120;//n or -n
//according to Chris comment
var zoom = Math.pow(1 Math.abs(wheel)/2 , wheel > 0 ? 1 : -1);
context.translate(
originx,
originy
);
context.scale(zoom,zoom);
context.translate(
-( mousex / scale originx - mousex / ( scale * zoom ) ),
-( mousey / scale originy - mousey / ( scale * zoom ) )
);
originx = ( mousex / scale originx - mousex / ( scale * zoom ) );
originy = ( mousey / scale originy - mousey / ( scale * zoom ) );
scale *= zoom;
}
</script>
CEVAP
Bu aslında çok zor bir sorun (matematiksel olarak) ve aynı şey, hemen hemen üzerinde çalışıyorum. Stackoverflow benzer bir soru sordum ama cevap veren olmadı, ama DocType (HTML/CSS StackOverflow) gönderildi ve bir tepki var. http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example çıkış yap
Bu (Google Maps kullanarak CSS3 Dönüşümler zoom tarzı) yapan bir jQuery eklentisi binanın tam ortasındayım. Fare imleci zoom bit iyi çalışıyor, hala kullanıcı Google Maps yapabileceğiniz gibi tuval etrafında sürüklemesine izin için nasıl anlamaya var. Bu çalışma aldığımda kodu buraya post ederim, ama zoom-fare-için yukarıdaki bağlantıya bölümünü kontrol edin.
Ölçek ve Tuval bağlama yöntemleri çevirmek yok fark etmedim, aynı şeyi örneğin CSS3 kullanarak elde edebilirsiniz. jQuery kullanarak:
$('div.canvasContainer > canvas')
.css('-moz-transform', 'scale(1) translate(0px, 0px)')
.css('-webkit-transform', 'scale(1) translate(0px, 0px)')
.css('-o-transform', 'scale(1) translate(0px, 0px)')
.css('transform', 'scale(1) translate(0px, 0px)');
Bu CSS3 0, 0 (- - dönüşümü-moz kökeni: 0 0) kökenli bir dönüşüm kurmak emin olun. CSS3 dönüştürme bir şey yakınlaştırmak, sadece kapsayıcı DİV ayarlandığından emin olmak için taşma sağlar kullanarak: iki akıyordu. Yakınlaştırılmış kenarları durdurmak için gizli
CSS3 dönüşümler kullanıp, ya da tuval ölçekte kendi ve yöntemleri kadar, ama hesaplamalar için yukarıdaki bağlantıyı kontrol edin çevirmek.
Güncelleme:Vıdı! Sadece kodu buraya yazı yerine size bir link takip edeceğim:
$(document).ready(function()
{
var scale = 1; // scale of the image
var xLast = 0; // last x location on the screen
var yLast = 0; // last y location on the screen
var xImage = 0; // last x location on the image
var yImage = 0; // last y location on the image
// if mousewheel is moved
$("#mosaicContainer").mousewheel(function(e, delta)
{
// find current location on screen
var xScreen = e.pageX - $(this).offset().left;
var yScreen = e.pageY - $(this).offset().top;
// find current location on the image at the current scale
xImage = xImage ((xScreen - xLast) / scale);
yImage = yImage ((yScreen - yLast) / scale);
// determine the new scale
if (delta > 0)
{
scale *= 2;
}
else
{
scale /= 2;
}
scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale);
// determine the location on the screen at the new scale
var xNew = (xScreen - xImage) / scale;
var yNew = (yScreen - yImage) / scale;
// save the current screen location
xLast = xScreen;
yLast = yScreen;
// redraw
$(this).find('div').css('-moz-transform', 'scale(' scale ')' 'translate(' xNew 'px, ' yNew 'px' ')')
.css('-moz-transform-origin', xImage 'px ' yImage 'px')
return false;
});
});
Elbette tuval ölçeği kullanın ve yöntemleri çevirmek için uyum gerekir.
Güncelleme 2:Sadece birlikte dönüşüm kökenli translate ile kullandığımı fark ettim. Başardım uygulamak için bir sürüm sadece kullanır ölçek ve tercüme üzerinde kendi, bak burada http://www.dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html Bekle resimleri indir daha sonra kullanmak fare tekerleği zoom da destekler kaydırma sürükleyerek görüntünün etrafında. Bu CSS3 kullanarak Dönüştürür ama Tuval için de aynı hesap kullanmak gerekir.
Nasıl reset ölçek/iPhone oryantasyon d...
Nasıl YAY kullanarak ve 4.0 iOS göster...
Neden kullanarak " ediyoruz; ({ })...
Nasıl giriş tipi jquery kullanarak?...
Kullanarak "gibi" hazır deyi...