Автор этого расширения Raphael JS исчез с лица интернета, помогите мне с его сценарием - PullRequest
Новая
       28

Автор этого расширения Raphael JS исчез с лица интернета, помогите мне с его сценарием

2 голосов
/ 23 августа 2011

Расширение, о котором я говорю, - это Raphael-zpd: http://pohjoisespoo.net84.net/src/raphael-zpd.js

/ * РЕДАКТИРОВАТЬ Сценарий добавляется в документ Raphael с помощью этой команды var zpd = new RaphaelZPD(paper, { zoom: true, pan: true, drag: false}); где бумага - ваш холст * /

Сценарий был первоначально выпущен на github авторов http://www.github.com/somnidea, который больше не существует.

Я хотел запустить масштабирование колесика мыши до порога, как только загрузится рафаэль. Порог увеличения устанавливается в начале скрипта zoomThreshold: [-37, 20]. В функции прокрутки колесика мыши он сравнивается с zoomCurrent, который по умолчанию 0 me.zoomCurrent = 0;

Это целая часть события колесика мыши 

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

Причина, по которой я не могу просто нарисовать SVG меньшего размера, заключается в том, что я использую растровые изображения в качестве фона и нуждаюсь в них с более высоким разрешением. Я все еще хотел бы начать с самой дальней точки, которую я установил на пороге. Могу ли я как-то использовать этот скрипт для этого? Я естественно использую это иначе, чтобы обращаться с масштабированием / панорамированием мыши.

// EDIT

В конце скрипта также есть эта функция, но до сих пор я не смог ее сработать. 

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;


}

Похоже, он используется для панорамирования документа с помощью, скажем, событий щелчка, чтобы щелчок выполнял функцию с заданными координатами. Однако, как я уже сказал, я не смог это сделать. Я не знаю, как это должно функционировать. Я пробовал paper.ZPDPanTo(100, 100); так же, как и просто ZPDPanTo(100,100), но ничего не происходит.

Ответы [ 2 ]

4 голосов
/ 23 августа 2011

Вы также можете проверить рабочую ветку для Raphaël 2.0, которая предположительно добавляет поддержку viewBox и преобразований, см. https://github.com/DmitryBaranovskiy/raphael/tree/2.0.

Это не отвечает на ваш вопрос полностью, но кажется вполне возможнымчто Raphaël 2.0 решит ваш сценарий использования.

Если вы используете чистый svg, вы можете манипулировать позициями масштабирования и панорамирования через свойства SVG DOM currentTranslate и currentScale, см. в этом примере .

0 голосов
/ 17 января 2014

Пример использования 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/

...