Question

有人知道如何通过点击按钮来使用Raphaël-ZPD触发放大/缩小吗？

Answer 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是一个有效的例子

我建议添加一些计算屏幕中心的平移，因此缩放不会转到角落。但是想想这一切可能会指出你正确的方向。

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

1 个答案: