L'auteur de cette extension Raphael JS a disparu de la surface de l'internet, aidez-moi avec son script.

Question

L'extension dont je parle est le Raphael-zpd : http://pohjoisespoo.net84.net/src/raphael-zpd.js

/* EDIT Le script est ajouté à un document Raphael avec cette commande. var zpd = new RaphaelZPD(paper, { zoom: true, pan: true, drag: false}); où le papier est votre toile */

Le script a été initialement publié sur le github des auteurs. http://www.github.com/somnidea qui n'existe plus.

Ce que je voulais faire, c'est que le zoom de la molette de la souris atteigne le seuil dès que le raphaël est chargé. Le zoomthreshold est défini au début du script. zoomThreshold: [-37, 20] . Dans la fonction de défilement de la molette de la souris, il est comparé à zoomCurrent qui est par défaut 0. me.zoomCurrent = 0;

C'est la partie entière de l'événement mousewheel

me.handleMouseWheel = function(evt) {
    if (!me.opts.zoom) return;

    if (evt.preventDefault)
        evt.preventDefault();

    evt.returnValue = false;

    var svgDoc = evt.target.ownerDocument;

    var delta;

    if (evt.wheelDelta)
        delta = evt.wheelDelta / 3600; // Chrome/Safari
    else
        delta = evt.detail / -90; // Mozilla

    if (delta > 0) {
        if (me.opts.zoomThreshold) 
            if (me.opts.zoomThreshold[1] <= me.zoomCurrent) return;
        me.zoomCurrent++;
    } else {
        if (me.opts.zoomThreshold)
            if (me.opts.zoomThreshold[0] >= me.zoomCurrent) return;
        me.zoomCurrent--;
    }

    var z = 1 + delta; // Zoom factor: 0.9/1.1

    var g = svgDoc.getElementById("viewport"+me.id);

    var p = me.getEventPoint(evt);

    p = p.matrixTransform(g.getCTM().inverse());

    // Compute new scale matrix in current mouse position
    var k = me.root.createSVGMatrix().translate(p.x, p.y).scale(z).translate(-p.x, -p.y);
    me.setCTM(g, g.getCTM().multiply(k));

    if (!me.stateTf)
        me.stateTf = g.getCTM().inverse();

    me.stateTf = me.stateTf.multiply(k.inverse());
}

La raison pour laquelle je ne peux pas simplement dessiner un SVG plus petit pour commencer est que j'utilise des images matricielles comme arrière-plan et que j'ai besoin qu'elles aient une résolution plus élevée. Je voudrais quand même commencer au point le plus éloigné que j'ai défini au niveau du seuil. Est-il possible pour moi d'utiliser ce script pour faire cela ? Je l'utilise naturellement autrement pour gérer le zoom/pan de la souris.

//EDIT

Il y a aussi cette fonction à la fin du script, mais jusqu'à présent je n'ai pas réussi à la faire fonctionner.

Raphael.fn.ZPDPanTo = function(x, y) {
var me = this;

if (me.gelem.getCTM() == null) {
    alert('failed');
    return null;
}

var stateTf = me.gelem.getCTM().inverse();

var svg = document.getElementsByTagName("svg")[0];

if (!svg.createSVGPoint) alert("no svg");        

var p = svg.createSVGPoint();

p.x = x; 
p.y = y;

p = p.matrixTransform(stateTf);

var element = me.gelem;
var matrix = stateTf.inverse().translate(p.x, p.y);

var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";

element.setAttribute("transform", s);

return me;

}

Il semble qu'il soit utilisé pour faire un panoramique dans le document par le biais d'événements de clics, de sorte qu'un clic exécute la fonction avec les coordonnées données. Cependant, comme je l'ai dit, je n'ai pas été en mesure de le faire fonctionner. Je ne sais pas comment il est censé fonctionner. J'ai essayé paper.ZPDPanTo(100, 100); ainsi que juste ZPDPanTo(100,100) mais rien ne se passe.

Answer 1

Vous pouvez également consulter la branche de travail de Raphaël 2.0, qui est censée ajouter le support de viewBox et des transforms, à savoir https://github.com/DmitryBaranovskiy/raphael/tree/2.0 .

Cela ne répond pas entièrement à votre question, mais il semble tout à fait possible que Raphaël 2.0 réponde à votre cas d'utilisation.

Si vous utilisez du svg pur, vous pouvez manipuler les positions de zoom et de panoramique via les propriétés DOM du SVG. currentTranslate y currentScale voir cet exemple .

Answer 2

Un exemple utilisant RAPHAEL ZPD :

var paper = Raphael("container",800,760);

window.paper = paper;

zpd = new RaphaelZPD(paper, { zoom: true, pan: true, drag: false });

paper.circle(100,100, 50).attr({fill:randomRGB(),opacity:0.95});
paper.rect(100,100, 250, 300).attr({fill:randomRGB(),opacity:0.65});
paper.circle(200,100, 50).attr({fill:randomRGB(),opacity:0.95});
paper.circle(100,200, 50).attr({fill:randomRGB(),opacity:0.95});

http://jsfiddle.net/4PkRm/1/