Search the Community

Hi, The code is available here https://jsbin.com/hazogar/edit?html,js,output What I do not understand is that initial behavior is not correct, past the first zoom, it will jump/jag then be proper to zoom to a point of the object. I am zooming content inside container, so what am I missing ? var initZoom = function(app, objectDocument) { var inZoomMode = true; var content = objectDocument.view; var container = objectDocument.board; var scale = { x: content.scale.x, y: content.scale.y }; var zoom = function(x, y, isZoomIn) { var globalPosition = app.renderer.plugins.interaction.eventData.data.global; if (!globalPosition) { return; } var containerPosition = container.toLocal(globalPosition, app.stage); var contentPosition = content.toLocal(containerPosition, container); var direction = isZoomIn ? 1 : -1; var factor = (1 + direction * 0.01); var nextScaleX = content.scale.x * factor; var nextScaleY = content.scale.y * factor; var p = contentPosition; console.debug('>> P', p.x, p.y); var mat = new PIXI.Matrix(); mat.translate(-p.x, -p.y); mat.scale(nextScaleX, nextScaleY); mat.translate(p.x, p.y); content.transform.setFromMatrix(mat); content.updateTransform(); }; documentView.on('mousewheel', function(e, delta) { if (!inZoomMode) { return; } zoom(e.clientX, e.clientY, delta > 0); }); }; Thank you!