foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2025-01-12 16:08:50 -05:00
Code Issues Wiki Activity

added scaling to Demo.views

Browse source
This commit is contained in:
liabru 2014-05-04 12:43:29 +01:00
parent 1f8ee5ccca
commit a8d7a40249
1 changed files with 58 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
demo/js/Demo.js
View file

@ -15,6 +15,7 @@
Vector = Matter.Vector, Vector = Matter.Vector,
Vertices = Matter.Vertices, Vertices = Matter.Vertices,
MouseConstraint = Matter.MouseConstraint, MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
Query = Matter.Query; Query = Matter.Query;
// MatterTools aliases // MatterTools aliases
@ -204,7 +205,7 @@
World.add(_world, stack); World.add(_world, stack);
// get the centre of the viewport // get the centre of the viewport
var viewCentre = { var viewportCentre = {
x: _engine.render.options.width * 0.5, x: _engine.render.options.width * 0.5,
y: _engine.render.options.height * 0.5 y: _engine.render.options.height * 0.5
}; };
@ -215,26 +216,65 @@
_world.bounds.max.x = 1100; _world.bounds.max.x = 1100;
_world.bounds.max.y = 900; _world.bounds.max.y = 900;
// keep track of current bounds scale (view zoom)
var boundsScaleTarget = 1,
boundsScale = {
x: 1,
y: 1
};
// use the engine tick event to control our view // use the engine tick event to control our view
_sceneEvents.push( _sceneEvents.push(
Events.on(_engine, 'tick', function() { Events.on(_engine, 'beforeTick', function() {
var world = _engine.world, var world = _engine.world,
mouse = _engine.input.mouse, mouse = _engine.input.mouse,
render = _engine.render; render = _engine.render,
translate;
// get vector from mouse relative to centre of view // mouse wheel controls zoom
var mouseRelative = Vector.sub(mouse.position, mouse.offset), var scaleFactor = mouse.wheelDelta * -0.1;
deltaCentre = Vector.sub(mouseRelative, viewCentre); if (scaleFactor !== 0) {
if ((scaleFactor < 0 && boundsScale.x >= 0.6) || (scaleFactor > 0 && boundsScale.x <= 1.4)) {
boundsScaleTarget += scaleFactor;
}
}
// only translate the view if mouse has moved 200px from the centre // if scale has changed
if (Vector.magnitude(deltaCentre) > 200) { if (Math.abs(boundsScale.x - boundsScaleTarget) > 0.01) {
// smoothly tween scale factor
scaleFactor = (boundsScaleTarget - boundsScale.x) * 0.2;
boundsScale.x += scaleFactor;
boundsScale.y += scaleFactor;
// create a vector to translate the view, allowing the user to control view speed // scale the render bounds
var translate = { render.bounds.max.x = render.bounds.min.x + render.options.width * boundsScale.x;
x: Math.pow(Math.abs(deltaCentre.x), 1.5) * 0.001 * Common.sign(deltaCentre.x), render.bounds.max.y = render.bounds.min.y + render.options.height * boundsScale.y;
y: Math.pow(Math.abs(deltaCentre.y), 1.5) * 0.001 * Common.sign(deltaCentre.y)
// translate so zoom is from centre of view
translate = {
x: render.options.width * scaleFactor * -0.5,
y: render.options.height * scaleFactor * -0.5
}; };
Bounds.translate(render.bounds, translate);
// update mouse
Mouse.setScale(mouse, boundsScale);
Mouse.setOffset(mouse, render.bounds.min);
}
// get vector from mouse relative to centre of viewport
var deltaCentre = Vector.sub(mouse.absolute, viewportCentre),
centreDist = Vector.magnitude(deltaCentre);
// translate the view if mouse has moved over 50px from the centre of viewport
if (centreDist > 50) {
// create a vector to translate the view, allowing the user to control view speed
var direction = Vector.normalise(deltaCentre),
speed = Math.min(10, Math.pow(centreDist - 50, 2) * 0.0002);
translate = Vector.mult(direction, speed);
// prevent the view moving outside the world bounds // prevent the view moving outside the world bounds
if (render.bounds.min.x + translate.x < world.bounds.min.x) if (render.bounds.min.x + translate.x < world.bounds.min.x)
translate.x = world.bounds.min.x - render.bounds.min.x; translate.x = world.bounds.min.x - render.bounds.min.x;
@ -248,11 +288,11 @@
if (render.bounds.max.y + translate.y > world.bounds.max.y) if (render.bounds.max.y + translate.y > world.bounds.max.y)
translate.y = world.bounds.max.y - render.bounds.max.y; translate.y = world.bounds.max.y - render.bounds.max.y;
// move the view
Bounds.translate(render.bounds, translate); Bounds.translate(render.bounds, translate);
// we must update the mouse offset too // we must update the mouse too
mouse.offset.x = render.bounds.min.x; Mouse.setOffset(mouse, render.bounds.min);
mouse.offset.y = render.bounds.min.y;
} }
}) })
); );
@ -1100,11 +1140,9 @@
// reset id pool // reset id pool
Common._nextId = 0; Common._nextId = 0;
// reset mouse offset // reset mouse offset and scale (only required for Demo.views)
if (_engine.input.mouse.offset) { Mouse.setScale(_engine.input.mouse, { x: 1, y: 1 });
_engine.input.mouse.offset.x = 0; Mouse.setOffset(_engine.input.mouse, { x: 0, y: 0 });
_engine.input.mouse.offset.y = 0;
}
_engine.enableSleeping = false; _engine.enableSleeping = false;
_engine.world.gravity.y = 1; _engine.world.gravity.y = 1;