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;
const camera = stage.camera;
const stageScale = stage.scale;
const position = Vector.mul([particle.p.x, particle.p.y], stageScale);
const position = [particle.p.x, particle.p.y];
if (camera) {
const realOffset = Vector.mul(camera.realOffset, stageScale);
const realOffset = camera.realOffset;
position[0] -= realOffset[0];
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%';
// DOM parent.
this.parent = undefined;
// Set scale.
this.scale = visibleScale;
// Canvas renderer.
this.renderer = new Renderer(size);
this.renderer.element.style.width = '100%';
@ -59,8 +61,6 @@ export class Stage extends decorate(Container) {
this.element.appendChild(this.ui);
this.element.tabIndex = 0;
this.on('cameraChanged', this.onCameraChanged, this);
// Set scale.
this.scale = visibleScale;
}
addToDom(parent) {
@ -81,8 +81,8 @@ export class Stage extends decorate(Container) {
const node = window.document.createElement('div');
node.className = 'ui';
node.style.position = 'absolute';
node.style.width = `${this.size[0]}px`;
node.style.height = `${this.size[1]}px`;
node.style.width = `${this.size[0] / this.scale[0]}px`;
node.style.height = `${this.size[1] / this.scale[1]}px`;
node.style.left = 0;
node.style.top = 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.
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);
}

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

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