我有一些问题，缩放容器固定点。
在我的情况，我想规模（变焦）的舞台，鼠标光标。
这里是一个方式做纯帆布： http://phrogz.net/tmp/canvas_zoom_to_cursor.html （如在讨论放大画布鼠标光标 ）
我只是无法弄清楚如何在使用KineticJS API应用相同的逻辑。
示例代码：
var position = this.stage.getUserPosition();
var scale = Math.max(this.stage.getScale().x + (0.05 * (scaleUp ? 1 : -1)), 0);
this.stage.setScale(scale);
// Adjust scale to position...?
this.stage.draw();
很多挣扎，搜索和尝试，利用提供尖端的后@Eric罗威尔和在SO问题发布的代码放大点（使用规模和翻译）我终于得到了放大和缩小定点工作的使用KineticJS 。
这里有一个工作演示 。
而这里的代码：
var ui = {
stage: null,
scale: 1,
zoomFactor: 1.1,
origin: {
x: 0,
y: 0
},
zoom: function(event) {
event.preventDefault();
var evt = event.originalEvent,
mx = evt.clientX /* - canvas.offsetLeft */,
my = evt.clientY /* - canvas.offsetTop */,
wheel = evt.wheelDelta / 120;
var zoom = (ui.zoomFactor - (evt.wheelDelta < 0 ? 0.2 : 0));
var newscale = ui.scale * zoom;
ui.origin.x = mx / ui.scale + ui.origin.x - mx / newscale;
ui.origin.y = my / ui.scale + ui.origin.y - my / newscale;
ui.stage.setOffset(ui.origin.x, ui.origin.y);
ui.stage.setScale(newscale);
ui.stage.draw();
ui.scale *= zoom;
}
};
$(function() {
var width = $(document).width() - 2,
height = $(document).height() - 5;
var stage = ui.stage = new Kinetic.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Kinetic.Layer({
draggable: true
});
var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;
var box = new Kinetic.Circle({
x: 100,
y: 100,
radius: 50,
fill: '#00D200',
stroke: 'black',
strokeWidth: 2,
});
// add cursor styling
box.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(box);
stage.add(layer);
$(stage.content).on('mousewheel', ui.zoom);
});
您需要抵消台以它的中心点位于固定点。 下面是一个例子，因为舞台的中心点默认为画布的左上角。 比方说，你的舞台为600像素，宽400像素，并且希望在舞台上从中心开始放大。 你需要做的：
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 400,
offset: [300, 200]
};
更新@ juan.facorro的演示，而不是扩展阶段的形状
的jsfiddle
var ui = {
stage: null,
box: null,
scale: 1,
zoomFactor: 1.1,
zoom: function(event) {
event.preventDefault();
var evt = event.originalEvent,
mx = evt.offsetX,
my = evt.offsetY,
wheel = evt.wheelDelta / 120; //n or -n
var zoom = (ui.zoomFactor - (evt.wheelDelta < 0 ? 0.2 : 0));
var newscale = ui.scale * zoom;
var origin = ui.box.getPosition();
origin.x = mx - (mx - origin.x) * zoom;
origin.y = my - (my - origin.y) * zoom;
ui.box.setPosition(origin.x, origin.y);
ui.box.setScale(newscale);
ui.stage.draw();
ui.scale *= zoom;
}
};
$(function() {
var width = $(document).width() - 2,
height = $(document).height() - 5;
var stage = ui.stage = new Kinetic.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Kinetic.Layer();
var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;
var box = ui.box = new Kinetic.Circle({
x: 100,
y: 100,
radius: 50,
fill: '#00D200',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
// add cursor styling
box.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(box);
stage.add(layer);
$(stage.content).on('mousewheel', ui.zoom);
});
只有上面的演示工作，如果该阶段的X和Y坐标是0。如果如舞台是可拖动的同时拖动所以他们需要被包含在偏移计算也将改变这些坐标。 这可以通过从画布偏移量减去它们来实现：
的jsfiddle
zoom: function(event) {
event.preventDefault();
var evt = event.originalEvent,
mx = evt.offsetX - ui.scale.getX(),
my = evt.offsetY - ui.scale.getY(),
var zoom = (ui.zoomFactor - (evt.wheelDelta < 0 ? 0.2 : 0));
var newscale = ui.scale * zoom;
var origin = ui.box.getPosition();
origin.x = mx - (mx - origin.x) * zoom;
origin.y = my - (my - origin.y) * zoom;
ui.box.setPosition(origin.x, origin.y);
ui.box.setScale(newscale);
ui.stage.draw();
ui.scale *= zoom;
}
