Raphaël-ZPD 点击放大/缩小答案

【问题标题】：Raphaël-ZPD click to zoom in/outRaphaël-ZPD 点击放大/缩小
【发布时间】：2013-12-18 07:44:46
【问题描述】：

有谁知道如何通过点击按钮触发 Raphaël-ZPD 的放大/缩小？

【问题讨论】：

你能放一个 jsfiddle 让别人帮忙玩吗？
我刚刚看到 IE 10 不支持 Raphaël-ZPD。至少它对我不起作用。如果有的话，您可以推荐一些其他适合此目的的插件。
code.google.com/p/svgpan 或 dashasalo.com/2011/04/13/… 也可以使用 setViewBox()

标签： svg click zooming raphael

【解决方案1】：

如果查看 Raphael-ZPD 的代码，您会发现所有缩放和平移都是使用 svg 矩阵完成的。在缩放的特定情况下，它首先在鼠标所在的位置绘制一个参考点，并计算相对于该点的缩放方向，使用鼠标滚轮的增量来应用缩放量。

现在，如果您想使用按钮，则必须在代码中确定增量，并且您可以使用屏幕中心作为相对点来计算缩放方向。

对于初学者，您可以只使用 svg scale 属性，如果您使用的是 Raphael ZPD，这样的事情可能没问题：

paper = Raphael('container',600, 600);
paper.ZPD({ zoom: true, pan: true, drag: false });

scale = 1;
var zoomin = document.getElementById('in')
var zoomout = document.getElementById('out')

zoomin.onclick = function(){
    scale *= 1.2
    paper.canvas.setAttribute("transform", "scale("+scale+")")
}

zoomout.onclick = function(){
    scale *= 0.8
    paper.canvas.setAttribute("transform", "scale("+scale+")")
}

Here 是一个工作示例

我建议添加一些计算屏幕中心的平移，因此缩放不会转到角落。但请认为所有这些都可以为您指明正确的方向。

【讨论】：