Javascript 这个Raphael JS扩展的作者已经从互联网上消失了,请帮我看看他的脚本
我说的扩展是拉斐尔zpd: /*使用以下命令将编辑脚本添加到Raphael文档中Javascript 这个Raphael JS扩展的作者已经从互联网上消失了,请帮我看看他的脚本,javascript,svg,zooming,raphael,Javascript,Svg,Zooming,Raphael,我说的扩展是拉斐尔zpd: /*使用以下命令将编辑脚本添加到Raphael文档中var zpd=new RaphaelZPD(paper,{zoom:true,pan:true,drag:false})纸在哪里是画布*/ 该脚本最初是在作者github发布的,现在已经不存在了 我想做的是在拉斐尔号装载完毕后,立即将鼠标滚轮缩小到阈值。zoomthreshold设置在脚本的开头zoomthreshold:[-37,20]。在鼠标滚轮滚动功能中,它与zoomCurrent进行比较,默认情况下zoom
var zpd=new RaphaelZPD(paper,{zoom:true,pan:true,drag:false})代码>纸在哪里是画布*/
该脚本最初是在作者github发布的,现在已经不存在了
我想做的是在拉斐尔号装载完毕后,立即将鼠标滚轮缩小到阈值。zoomthreshold设置在脚本的开头zoomthreshold:[-37,20]
。在鼠标滚轮滚动功能中,它与zoomCurrent进行比较,默认情况下zoomCurrent为0me.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());
}
它似乎用于通过单击事件对文档进行平移,以便单击将使用给定的坐标执行函数。然而,正如我所说,我一直无法工作。我不知道它应该如何运作。我试过paper.ZPDPanTo(100100)
以及ZPDPanTo(100100)
但是什么都没有发生。您可能还想查看Raphaël 2.0的工作分支,该分支据说增加了对viewBox和变换的支持,请参阅
这并不能完全回答您的问题,但Raphaël 2.0很可能会解决您的用例
如果使用纯svg,则可以通过svg DOM属性currentTranslate
和currentScale
操纵缩放和平移位置,请参见。使用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});
你确定这是问题的答案吗?
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});