Zooming into a specific canvas point

Hi,

I’m trying to setup zooming into a specific point on the paper. On mouse wheel event, when I scale using event provided coordinates:

paper.scale(scale, scale, x, y);

graph scales off target point.

Is this achievable using paper.prototype.scale() method, or should I be using a different approach?

JointJS@2.2.1

Thanks.

[TaiAivaras]

Doesn’t seem like an ideal solution, since this translates view-port to coordinate origin.

To anyone else wondering, I got my desired behavior like this:

	handleCellMouseWheel = (cellView, e, x, y, delta) =>
		this.handleCanvasMouseWheel(e, x, y, delta);

	handleCanvasMouseWheel = (e, x, y, delta) => {
		e.preventDefault();

		const oldScale = this.paper.scale().sx;
		const newScale = oldScale + delta * .1;

		this.scaleToPoint(newScale, x, y);
	};

	scaleToPoint = (nextScale, x, y) => {
		if (nextScale >= MIN_SCALE && nextScale <= MAX_SCALE) {
			const currentScale = this.paper.scale().sx;

			const beta = currentScale / nextScale;

			const ax = x - (x * beta);
			const ay = y - (y * beta);

			const translate = this.paper.translate();

			const nextTx = translate.tx - ax * nextScale;
			const nextTy = translate.ty - ay * nextScale;

			this.paper.translate(nextTx, nextTy);

			const ctm = this.paper.matrix();

			ctm.a = nextScale;
			ctm.d = nextScale;

			this.paper.matrix(ctm);
		}
	};

I’ll be closing the issue.

[vtalas]

Note that joint.ui.PaperScroller has the ready-made solution for this:

paper.on('blank:mousewheel', function(evt, x, y, delta) {
    paperScroller.zoom(delta * 0.2, { min: 0.2, max: 5, grid: 0.2, ox: x, oy: y });
});

https://resources.jointjs.com/docs/rappid/v2.4/ui.html#ui.PaperScroller