Ayuda en la programación, respuestas a preguntas / Famoso / Famo.us `true '¿el tamaño y el tamaño de paso del árbol de renderizado? - famoso

¿Famo.us `true 'dimensionando y pasando el tamaño del árbol de render? - famoso

No creo que entienda lo que significa dimensionar un nodo famo.us con un true tamaño.

En este ejemplo, estoy tratando de centrar una Vista con un tamaño fijo. Pero eventualmente quiero que estos BlueView calculen su tamaño según su contenido y tengan una variedad de ellos en una vista de desplazamiento.

Entonces, supongo que mis preguntas son:

Que hace true tamaño realmente significa? ¿Cuál es la matemática detrás de esto? Asumo que un tamaño de true activa el nodo, blueModifier, para obtener ese valor de su nodo hijo directo, en este caso mi blueView ejemplo. ¿Me equivoco?

Si ese es el caso, ¿cómo puedo obtener BlueView "s para publicar su tamaño? Leer la fuente de famo.us y su documentación es simplemente confuso. Parece que si un View tiene solo un hijo, debe usar el tamaño de ese niño. O puede usar setOptions() en una vista para establecer su tamaño. O puedes anular una vista getSize() función. Pero no puedo hacer que ninguno de ellos funcione.

function BlueView() {
View.call(this)

this
.add(new Modifier({
size: [400, 200],
origin: [0, 0],
align: [0, 0]
}))
.add(new Surface({
properties: {
backgroundColor: "blue"
}
}));

};
BlueView.prototype = Object.create(View.prototype);
BlueView.prototype.constructor = BlueView;



var blueModifier = new Modifier({
size: [true, true],
origin: [0.5, 0.5],
align: [0.5, 0.5],
});

var blueView = new BlueView();


mainContext.add(blueModifier).add(blueView);

http://jsbin.com/gopeli/1/edit?html,output

Respuestas

1 para la respuesta № 1

Dimensionamiento en Famo.us Puede ser confuso realmente rápido (versión actual 0.3.5). Todos esperamos que solucionen esto en MixedMode. Aquí hay un intento de explicarlo para tratar de aclararlo.

Tipos de tamaño:

Cierto - [true, true]
Indefinido [undefined, undefined]
Actual - [Xpx, Ypx] p.ej. [100, 100]

Cada uno de estos tiene un fragmento que puede ver los tamaños devueltos en un clic de la BlueView. Me tomé la libertad de refactorizar extendiendo View, para que podamos acceder a los renderables de los ejemplos.

Cierto

Tamaño real en Famo.us es una forma de decirle a tu rendidor el tamaño de la misma. contents. Básicamente es el equivalente a tener una <div> Sin altura y anchura. El rendidor no obtiene el tamaño directamente del niño, por lo que no hay matemáticas aquí. El desarrollador debe entender que el tamaño puede no ser transparente para el getSize método al usar True dimensionamiento.

Puede haber formas de obtener el tamaño real de la interpretación, pero depende de cómo y cuándo se representa en el contexto. Un buen momento puede ser en el despliegue de lo rendible, y obtener el real true tamaño de la target.

define("main", function(require, exports, module) {
var Engine = require("famous/core/Engine");
var View = require("famous/core/View");
var Surface = require("famous/core/Surface");
var StateModifier = require("famous/modifiers/StateModifier");
var Modifier = require("famous/core/Modifier");

var BlueView = require("BlueView");

var mainContext = Engine.createContext();

// Grid lines to show the center of the context.

var sizeShow = new Surface({
content: "Click BlueView Surface to get sizes",
size: [true, true],
properties: {
backgroundColor: "rgba(0,0,0,0.15)"
}
});

var outerBlueBack = new Surface({
size: [undefined, undefined],
properties: {
backgroundColor: "rgba(0,0,255,0.15)"
}
});

var horizontalRule = new Surface({
content: "",
size: [undefined, 1],
properties: {
backgroundColor: "#aaaaaa"
}
});

var verticalRule = new Surface({
content: "",
size: [1, undefined],
properties: {
backgroundColor: "#aaaaaa"
}
});

var originModifier = new StateModifier({
origin: [0.5, 0.5],
align: [0.5, 0.5]
});

var node = mainContext.add(originModifier);
node.add(verticalRule);
node.add(horizontalRule);


var sizeBlueModifier = new Modifier({
//size: [true, true]
//size: [undefined, undefined]
size: [400, 200]
});

var centerBlueModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5],
});

var blueView = new BlueView({
content: "set to true",
size: [true, true]
});
blueView.on("deploy", function() {
var sizeInfo = sizeShow.getContent() + "<br/><hr>";
var target = this.surface._currentTarget;
var targetSize = [target.clientWidth, target.clientHeight];

sizeInfo += "target size = " + targetSize;
sizeShow.setContent(sizeInfo);
});
blueView.on("click", function(e) {
console.log(e);
var target = e.target;
var targetSize = [target.clientWidth, target.clientHeight];

var sizeInfo = "target size = " + targetSize + "<br/><hr>";
sizeInfo += "BlueView size = " + this.sizeMod.getSize() + "<br/>";
sizeInfo += "BlueView.sizeMod = " + this.sizeMod.getSize() + "<br/>";
sizeInfo += "BlueView.surface = " + this.surface.getSize() + "<br/><hr>";
sizeInfo += "sizeBlueModifier = " + sizeBlueModifier.getSize() + "<br/>";
sizeInfo += "outerBlueBack = " + outerBlueBack.getSize() + "<br/>";

sizeShow.setContent(sizeInfo);
});


mainContext.add(sizeShow);
var centerBlueNode = mainContext.add(centerBlueModifier);
var outerBlueNode = centerBlueNode.add(sizeBlueModifier);
outerBlueNode.add(outerBlueBack);
centerBlueNode.add(blueView);
});
define("BlueView", function(require, exports, module) {
var View = require("famous/core/View");
var Surface = require("famous/core/Surface");
var Modifier = require("famous/core/Modifier");

function BlueView(options) {
View.apply(this, arguments);

this.sizeMod = new Modifier({
size: this.options.size,
});
this.placeMod = new Modifier({
origin: this.options.origin,
align: this.options.align
});
this.surface = new Surface({
content: this.options.content,
properties: {
backgroundColor: "blue",
cursor: "pointer"
}
});

this
.add(this.sizeMod)
.add(this.placeMod)
.add(this.surface);

this.surface.pipe(this._eventOutput);

};

BlueView.DEFAULT_OPTIONS = {
size: [undefined, undefined]
};

BlueView.prototype = Object.create(View.prototype);
BlueView.prototype.constructor = BlueView;

module.exports = BlueView;
});
require(["main"]);

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

Indefinido

El tamaño indefinido le dice al rendidor a tamañoes "s" padre ". En este caso, el tamaño debe ser referenciado por el padre. Si no sabe quién es el padre, siempre puede obtener el tamaño de la versión de destino real después del despliegue.

Nota: Cuando el size es no configurarlo es como establecer indefinido.

define("main", function(require, exports, module) {
var Engine = require("famous/core/Engine");
var View = require("famous/core/View");
var Surface = require("famous/core/Surface");
var StateModifier = require("famous/modifiers/StateModifier");
var Modifier = require("famous/core/Modifier");

var BlueView = require("BlueView");

var mainContext = Engine.createContext();

// Grid lines to show the center of the context.

var sizeShow = new Surface({
content: "Click BlueView Surface to get sizes",
size: [true, true],
properties: {
backgroundColor: "rgba(0,0,0,0.15)"
}
});

var outerBlueBack = new Surface({
size: [undefined, undefined],
properties: {
backgroundColor: "rgba(0,0,255,0.15)"
}
});

var horizontalRule = new Surface({
content: "",
size: [undefined, 1],
properties: {
backgroundColor: "#aaaaaa"
}
});

var verticalRule = new Surface({
content: "",
size: [1, undefined],
properties: {
backgroundColor: "#aaaaaa"
}
});

var originModifier = new StateModifier({
origin: [0.5, 0.5],
align: [0.5, 0.5]
});

var node = mainContext.add(originModifier);
node.add(verticalRule);
node.add(horizontalRule);


var sizeBlueModifier = new Modifier({
//size: [true, true]
//size: [undefined, undefined]
size: [200, 200]
});

var centerBlueModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5],
});

var blueView = new BlueView({
content: "set to undefined",
size: [undefined, undefined]
});
blueView.on("deploy", function() {
var sizeInfo = sizeShow.getContent() + "<br/><hr>";
var target = this.surface._currentTarget;
var targetSize = [target.clientWidth, target.clientHeight];

sizeInfo += "target size = " + targetSize;
sizeShow.setContent(sizeInfo);
});
blueView.on("click", function(e) {
console.log(e);
var myTarget = e.target;
var myTargetSize = [myTarget.clientWidth, myTarget.clientHeight];

var sizeInfo = "target size = " + myTargetSize + "<br/><hr>";
sizeInfo += "BlueView size = " + this.sizeMod.getSize() + "<br/>";
sizeInfo += "BlueView.sizeMod = " + this.sizeMod.getSize() + "<br/>";
sizeInfo += "BlueView.surface = " + this.surface.getSize() + "<br/><hr>";
sizeInfo += "sizeBlueModifier = " + sizeBlueModifier.getSize() + "<br/>";
sizeInfo += "outerBlueBack = " + outerBlueBack.getSize() + "<br/>";

sizeShow.setContent(sizeInfo);
});


mainContext.add(sizeShow);
var centerBlueNode = mainContext.add(centerBlueModifier);
var outerBlueNode = centerBlueNode.add(sizeBlueModifier);
outerBlueNode.add(outerBlueBack);
outerBlueNode.add(blueView);
});
define("BlueView", function(require, exports, module) {
var View = require("famous/core/View");
var Surface = require("famous/core/Surface");
var Modifier = require("famous/core/Modifier");

function BlueView(options) {
View.apply(this, arguments);

this.sizeMod = new Modifier({
size: this.options.size,
});
this.placeMod = new Modifier({
origin: this.options.origin,
align: this.options.align
});
this.surface = new Surface({
content: this.options.content,
properties: {
backgroundColor: "blue",
cursor: "pointer"
}
});

this
.add(this.sizeMod)
.add(this.placeMod)
.add(this.surface);

this.surface.pipe(this._eventOutput);

};

BlueView.DEFAULT_OPTIONS = {
size: [undefined, undefined]
};

BlueView.prototype = Object.create(View.prototype);
BlueView.prototype.constructor = BlueView;

module.exports = BlueView;
});
require(["main"]);

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

Real

El tamaño real se explica por sí mismo. [100, 100] Dice para hacer los 100 píxeles rendibles en width por 100 píxeles en height.

define("main", function(require, exports, module) {
var Engine = require("famous/core/Engine");
var View = require("famous/core/View");
var Surface = require("famous/core/Surface");
var StateModifier = require("famous/modifiers/StateModifier");
var Modifier = require("famous/core/Modifier");

var BlueView = require("BlueView");

var mainContext = Engine.createContext();

// Grid lines to show the center of the context.

var sizeShow = new Surface({
content: "Click BlueView Surface to get sizes",
size: [true, true],
properties: {
backgroundColor: "rgba(0,0,0,0.15)"
}
});

var outerBlueBack = new Surface({
size: [undefined, undefined],
properties: {
backgroundColor: "rgba(0,0,255,0.15)"
}
});

var horizontalRule = new Surface({
content: "",
size: [undefined, 1],
properties: {
backgroundColor: "#aaaaaa"
}
});

var verticalRule = new Surface({
content: "",
size: [1, undefined],
properties: {
backgroundColor: "#aaaaaa"
}
});

var originModifier = new StateModifier({
origin: [0.5, 0.5],
align: [0.5, 0.5]
});

var node = mainContext.add(originModifier);
node.add(verticalRule);
node.add(horizontalRule);


var sizeBlueModifier = new Modifier({
//size: [true, true]
//size: [undefined, undefined]
size: [200, 200]
});

var centerBlueModifier = new Modifier({
origin: [0.5, 0.5],
align: [0.5, 0.5],
});

var blueView = new BlueView({
content: "Actual<br/>[100, 100]",
size: [100, 100]
});
blueView.on("click", function(e) {
console.log(e);
var target = e.target;
var targetSize = [target.clientWidth, target.clientHeight];

var sizeInfo = "target size = " + targetSize + "<br/><hr>";
sizeInfo += "BlueView size = " + this.sizeMod.getSize() + "<br/>";
sizeInfo += "BlueView.sizeMod = " + this.sizeMod.getSize() + "<br/>";
sizeInfo += "BlueView.surface = " + this.surface.getSize() + "<br/><hr>";
sizeInfo += "sizeBlueModifier = " + sizeBlueModifier.getSize() + "<br/>";
sizeInfo += "outerBlueBack = " + outerBlueBack.getSize() + "<br/>";

sizeShow.setContent(sizeInfo);
});


mainContext.add(sizeShow);
var centerBlueNode = mainContext.add(centerBlueModifier);
var outerBlueNode = centerBlueNode.add(sizeBlueModifier);
outerBlueNode.add(outerBlueBack);
centerBlueNode.add(blueView);
});
define("BlueView", function(require, exports, module) {
var View = require("famous/core/View");
var Surface = require("famous/core/Surface");
var Modifier = require("famous/core/Modifier");

function BlueView(options) {
View.apply(this, arguments);

this.sizeMod = new Modifier({
size: this.options.size,
});
this.placeMod = new Modifier({
origin: this.options.origin,
align: this.options.align
});
this.surface = new Surface({
content: this.options.content,
properties: {
backgroundColor: "blue",
cursor: "pointer"
}
});

this
.add(this.sizeMod)
.add(this.placeMod)
.add(this.surface);

this.surface.pipe(this._eventOutput);

};

BlueView.DEFAULT_OPTIONS = {
size: [undefined, undefined]
};

BlueView.prototype = Object.create(View.prototype);
BlueView.prototype.constructor = BlueView;

module.exports = BlueView;
});
require(["main"]);

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>