cha0s/avocado-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: scaling

Browse Source
This commit is contained in:
cha0s 2019-04-20 02:15:04 -05:00
parent 7825e647b0
commit 092079625f
3 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/graphics/proton/text-node-renderer.js
View File

@ -35,10 +35,9 @@ export class TextNode {
)`; )`;
div.style.opacity = alpha; div.style.opacity = alpha;
const camera = stage.camera; const camera = stage.camera;
const stageScale = stage.scale; const position = [particle.p.x, particle.p.y];
const position = Vector.mul([particle.p.x, particle.p.y], stageScale);
if (camera) { if (camera) {
const realOffset = Vector.mul(camera.realOffset, stageScale); const realOffset = camera.realOffset;
position[0] -= realOffset[0]; position[0] -= realOffset[0];
position[1] += realOffset[1]; position[1] += realOffset[1];
} }

13
packages/graphics/stage.js
View File

@ -25,6 +25,8 @@ export class Stage extends decorate(Container) {
this.element.style.width = '100%'; this.element.style.width = '100%';
// DOM parent. // DOM parent.
this.parent = undefined; this.parent = undefined;
// Set scale.
this.scale = visibleScale;
// Canvas renderer. // Canvas renderer.
this.renderer = new Renderer(size); this.renderer = new Renderer(size);
this.renderer.element.style.width = '100%'; this.renderer.element.style.width = '100%';
@ -59,8 +61,6 @@ export class Stage extends decorate(Container) {
this.element.appendChild(this.ui); this.element.appendChild(this.ui);
this.element.tabIndex = 0; this.element.tabIndex = 0;
this.on('cameraChanged', this.onCameraChanged, this); this.on('cameraChanged', this.onCameraChanged, this);
// Set scale.
this.scale = visibleScale;
} }
addToDom(parent) { addToDom(parent) {
@ -81,8 +81,8 @@ export class Stage extends decorate(Container) {
const node = window.document.createElement('div'); const node = window.document.createElement('div');
node.className = 'ui'; node.className = 'ui';
node.style.position = 'absolute'; node.style.position = 'absolute';
node.style.width = `${this.size[0]}px`; node.style.width = `${this.size[0] / this.scale[0]}px`;
node.style.height = `${this.size[1]}px`; node.style.height = `${this.size[1] / this.scale[1]}px`;
node.style.left = 0; node.style.left = 0;
node.style.top = 0; node.style.top = 0;
node.style.transformOrigin = '0 0 0'; node.style.transformOrigin = '0 0 0';
@ -186,7 +186,10 @@ export class Stage extends decorate(Container) {
} }
// Precalc the transformation ratio and apply it to the UI layer. // Precalc the transformation ratio and apply it to the UI layer.
this._transformRatio = this.size[0] / this.element.clientWidth; this._transformRatio = this.size[0] / this.element.clientWidth;
this.ui.style.transform = `scale(${1 / this._transformRatio})`; const scaleFactor = 1 / this._transformRatio;
const scaleX = scaleFactor * this.scale[0];
const scaleY = scaleFactor * this.scale[1];
this.ui.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
this.emit('displaySizeChanged', this.displaySize); this.emit('displaySizeChanged', this.displaySize);
} }

4
packages/physics/body-view.js
View File

@ -28,7 +28,7 @@ export class BodyView extends Renderable {
primitives.drawLine( primitives.drawLine(
lastVertice, lastVertice,
vertice, vertice,
Primitives.lineStyle(new Color(255, 255, 0), 0.5), Primitives.lineStyle(new Color(255, 255, 0), 1),
); );
} }
lastVertice = vertice; lastVertice = vertice;
@ -36,7 +36,7 @@ export class BodyView extends Renderable {
primitives.drawLine( primitives.drawLine(
lastVertice, lastVertice,
firstVertice, firstVertice,
Primitives.lineStyle(new Color(255, 255, 0), 0.5), Primitives.lineStyle(new Color(255, 255, 0), 1),
); );
} }