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 istiyorum5h15h

Bir şey ile başlamak için:2 hafta aradan sonra, 3 dakika içinde, burada çalışan kod yaptım:

<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>

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.