我设法做了一些破解以缩放raphael纸，因为setviewbox不适合我，这是我写的功能：
function setCTM(element, matrix) {
var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
element.setAttribute("transform", s);
}
Raphael.fn.zoomAndMove = function(coordx,coordy,zoom) {
var svg = document.getElementsByTagName("svg")[0];
var z = zoom;
var g = document.getElementById("viewport1");
var p = svg.createSVGPoint();
p.x = coordx;
p.y = coordy;
p = p.matrixTransform(g.getCTM().inverse());
var k = svg.createSVGMatrix().scale(z).translate(-p.x, -p.y);
setCTM(g, g.getCTM().multiply(k));
}
其中viewport1元素定义为：
var gelem = document.createElementNS('http://www.w3.org/2000/svg', 'g');
gelem.id = 'viewport1';
paper.canvas.appendChild(gelem);
paper.canvas = gelem;
然后我可以打电话：paper.zoomAndMove(minx,miny,zoomRatio);
是否可以转换功能以使其平滑变焦？
请参阅this JS Fiddle example以了解如何使用jQuery和Raphael的setViewBox，它可以平滑地进行缩放和平移。我们在更复杂和更大的环境中使用完全相同的功能，即使屏幕上绘制了大量项目，它也能完美呈现并保持平滑。
基本上，不要试图重新发明轮子。我知道这可能不是你想要的答案，但它几乎肯定是你最好的选择。
编辑：我已修复附加小提琴（由于JSFiddle对网站所做的更改而被破坏）但显然SO不会让我保存JSFiddle链接而不包含一些代码，所以...
console.log("hello world!");
对于想要平滑缩放和平移动画的任何人（比如我），请看这里：
https://groups.google.com/forum/?fromgroups#!topic/raphaeljs/7eA9xq4enDo
这个剪辑帮助我自动化和动画缩放和平移到画布上的特定点。 （Will Morgan的道具）
Raphael.fn.animateViewBox = function(currentViewBox, viewX, viewY, width, height, duration, callback) {
duration = duration || 250;
var originals = currentViewBox, //current viewBox Data from where the animation should start
differences = {
x: viewX - originals.x,
y: viewY - originals.y,
width: width - originals.width,
height: height - originals.height
},
delay = 13,
stepsNum = Math.ceil(duration / delay),
stepped = {
x: differences.x / stepsNum,
y: differences.y / stepsNum,
width: differences.width / stepsNum,
height: differences.height / stepsNum
}, i,
canvas = this;
/**
* Using a lambda to protect a variable with its own scope.
* Otherwise, the variable would be incremented inside the loop, but its
* final value would be read at run time in the future.
*/
function timerFn(iterator) {
return function() {
canvas.setViewBox(
originals.x + (stepped.x * iterator),
originals.y + (stepped.y * iterator),
originals.width + (stepped.width * iterator),
originals.height + (stepped.height * iterator)
);
// Run the callback as soon as possible, in sync with the last step
if(iterator == stepsNum && callback) {
callback(viewX, viewY, width, height);
}
}
}
// Schedule each animation step in to the future
// Todo: use some nice easing
for(i = 1; i <= stepsNum; ++i) {
setTimeout(timerFn(i), i * delay);
}
}
小调整到patrics'回答摆脱“currentViewBox”...这适用于Raphael 2.1.0：
Raphael.fn.animateViewBox = function(viewX, viewY, width, height, duration, callback) {
duration = duration || 250;
//current viewBox Data from where the animation should start
var originals = {
x: this._viewBox[0],
y: this._viewBox[1],
width: this._viewBox[2],
height: this._viewBox[3]
},
differences = {
x: viewX - originals.x,
y: viewY - originals.y,
width: width - originals.width,
height: height - originals.height
},
delay = 13,
stepsNum = Math.ceil(duration / delay),
stepped = {
x: differences.x / stepsNum,
y: differences.y / stepsNum,
width: differences.width / stepsNum,
height: differences.height / stepsNum
}, i,
canvas = this;
/**
* Using a lambda to protect a variable with its own scope.
* Otherwise, the variable would be incremented inside the loop, but its
* final value would be read at run time in the future.
*/
function timerFn(iterator) {
return function() {
canvas.setViewBox(
originals.x + (stepped.x * iterator),
originals.y + (stepped.y * iterator),
originals.width + (stepped.width * iterator),
originals.height + (stepped.height * iterator),
true
);
// Run the callback as soon as possible, in sync with the last step
if(iterator == stepsNum && callback) {
callback(viewX, viewY, width, height);
}
}
}
// Schedule each animation step in to the future
// Todo: use some nice easing
for(i = 1; i <= stepsNum; ++i) {
setTimeout(timerFn(i), i * delay);
}
}
如果发布一个mod是不礼貌的话。随意将它合并到patrics'版本中，但随后评论没有意义。
与上述类似，但有所不同：
linear，easeIn，easeOut，easeInOut，backIn，backOut，elastic，bounce）由于这是完全重写，我没有修改上述内容。
Raphael.fn.animateViewBox = function(viewX, viewY, width, height, duration, callback, easing) {
var start = window.performance.now(),
canvas = this;
easing = Raphael.easing_formulas[ easing || 'linear' ];
duration = duration === undefined ? 250 : duration;
if (canvas.currentViewBox == undefined) {
canvas.currentViewBox = {
x: 0,
y: 0,
width: this._viewBox ? this._viewBox[2] : canvas.width,
height: this._viewBox ? this._viewBox[3] : canvas.height
}
}
function step(timestamp) {
var progress = timestamp - start;
var progressFraction = progress/duration;
if (progressFraction > 1) {
progressFraction = 1;
}
var easedProgress = easing( progressFraction );
var newViewBox = {
x: canvas.currentViewBox.x + (viewX - canvas.currentViewBox.x) * easedProgress,
y: canvas.currentViewBox.y + (viewY - canvas.currentViewBox.y) * easedProgress,
width: canvas.currentViewBox.width + (width - canvas.currentViewBox.width) * easedProgress,
height: canvas.currentViewBox.height + (height - canvas.currentViewBox.height) * easedProgress
};
canvas.setViewBox(newViewBox.x, newViewBox.y, newViewBox.width, newViewBox.height, false);
if (progressFraction < 1) {
window.requestAnimationFrame(step);
} else {
canvas.currentViewBox = newViewBox;
if (callback) {
callback(newViewBox.x, newViewBox.y, newViewBox.width, newViewBox.height);
}
}
}
window.requestAnimationFrame(step);
}