HTML5-Canvas-Größe ändern Bild Klicken um zu Vergrößern

Ich habe ein Bild einer Karte in eine Leinwand, ich möchte handeln, wie die google-Maps-interface mit HTML5 und jQuery. Ich möchte die folgenden Aktionen ausführen:

• Double click on pan in without changing the size of the containing div

• Click on a building to bring up a pop up of information on that building

• Click and drag to pan

Den code habe ich jetzt das Bild im canvas-Bereich. Ich fand einige codes, die zeigen, dass "Zoomen" auf das Bild, sondern entweder die Größe der div-container, oder nicht glatt und reaktionsschnell Weg, es zu tun, nur es springt auf eine größere Größe und ich möchte das Zoomen animiert werden soll.

Gibt es einige Gebäude, die sind "angepinnt" auf der Karte, die der Benutzer anklicken kann, um Informationen über das Gebäude.

Der code ist wie folgt:

JS:

$( document ).ready( function() {
var canvas = document.getElementById( 'canvas' );
var context = null;
var map = null;

if( canvas.getContext )
{
    context = canvas.getContext( '2d' );

    $( '#map' ).load( function( evt ) {
        context.drawImage( evt.currentTarget, 10, 10 );
    } );

    map = new Image();
    map.onload = function() {
        context.drawImage( this, 20, 20 );
    };
    map.src = 'images/asu_poly_map.png';
} else {
    alert( 'Your browser does not support canvas.' );
}
} );

HTML:

<div id="map">

<canvas id="canvas" width="1055" height="600"></canvas>

</div>

CSS:

#map {
margin:0 auto;
margin-top : 180px;
width : 1200px;
}

BEARBEITET, UM HINZUFÜGEN:
Ich gehe davon aus, es wäre so etwas ähnlich wie diese, aber kann nicht herausfinden, wie Sie für ein image vom server gezogen und auf die Leinwand.

Zoom in auf einen Punkt (mit scale und translate)

Erstellt ein Basis-Geige für Sie: jsfiddle.net/CMse5

InformationsquelleAutor Jen | 2013-04-21

  1. 5

    Boom! Ich kombinierte eine Reihe von StackOverflow verweisen, in etwas, das für Sie arbeitet: http://jsfiddle.net/CMse5/1/

    Hier ist der code:

    HTML:

    <div id="map">
    <canvas id="canvas" width="300" height="300"></canvas>
</div>

    CSS:

    canvas {
    border: 1px solid black;
}

    JS:

    $( document ).ready( function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var scale = 1.5;
var originx = 0;
var originy = 0;
var imageObj = new Image(); 
    imageObj.src = 'http://placehold.it/300x300';

function draw(){
    //From: http://goo.gl/jypct
    //Store the current transformation matrix
    context.save();

    //Use the identity matrix while clearing the canvas
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);

    //Restore the transform
    context.restore();

    //Draw on transformed context    
    context.drawImage(imageObj, 0, 0, 300, 300);

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

} );

    Auch, Sie erwähnen, animieren das Zoomen in eine glatte Art und Weise. Um dies zu tun, müssen Sie erleichtern das Zoomen in jedem frame. Also, in deiner draw Funktion, die jeden frame, den Sie wollen, um Leichtigkeit, zwischen einem original-Skala mit der neuen. Sie wollen auf jeden Fall ändern, requestAnimationFrame, so dass Sie eine bessere framerate.

    Es möglicherweise einfacher, verwenden Sie eine Leinwand/DOM-hybrid, und die Nutzung der CSS3-Transformationen und-Animationen auf ein Bild, das kümmert sich um alle die Entspannung für Sie. Sie könnte overlay notwendige canvas Dinge, wenn nötig.

    Beachten Sie, dass es ist besser ein requestAnimationFrame für animation-loops anstelle von setInterval.
    jsfiddle.net/CMse5/4 -- mit requestAnimationFrame Schleife, sehr glatte Zeichnung mit der kontinuierlichen mousewheels, wie das Apple trackpad.
    Ich legte mein Bild in es und ich bekomme es nicht, etwas zu tun.
    jsfiddle.net/CMse5/4 Hier ist der link. Ich bin mir nicht sicher ob es eine Einstellung die ich ändern muß oder so? Wenn ich doppelt auf das Bild klicken, passiert nichts. :/
    Das ist eine doppelte Verknüpfung. Haben Sie speichern Sie die Geige?

    InformationsquelleAutor Dan

Schreibe einen Kommentar