/ / Famo.us `true`のサイズ設定とレンダリングツリーのサイズの受け渡し？ - 有名

Famo.usの `true`サイズをレンダリングツリーのサイズに合わせて渡しますか？ - famo.us

famo.usノードのサイズを true サイズ。

この例では、ビューを固定サイズで中央に配置しようとしていますが、最終的には、これらのBlueViewでコンテンツに基づいてサイズを計算し、それらの配列をScrollviewに配置する必要があります。

だから、私は私の質問があると思います：

何をする true サイズは本当に意味ですか？その背後にある数学は何ですか？私は true ノードをトリガーし、 blueModifier、その直接の子ノードからその値を取得するには、この場合は blueView 実例。私が間違っている？

その場合、BlueViewにサイズを公開させるにはどうすればよいですか？famo.usソースとそのドキュメントを読むのは混乱を招きます。 View 子が1つしかない場合は、その子のサイズを使用する必要があります。または、 setOptions() そのサイズを設定するためのビューで。または、ビューを上書きできます getSize() 関数。しかし、私はそれらのどれも機能させることができません。

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

回答：

回答№1は1

サイズ設定 Famo.us すぐに混乱する可能性があります（現在のバージョン 0.3.5）。私たちは皆、彼らがこれを修正することを望んでいます MixedMode。これはあなたのためにそれを片付けることを試みるためにそれを説明することの刺し傷です。

サイジングの種類：

  • NS - [true, true]
  • 未定義 - [undefined, undefined]
  • 実際 - [Xpx, Ypx] 例えば [100, 100]

これらのそれぞれには、クリックすると返されるサイズを確認できるスニペットがあります。 BlueView。私は拡張することによってリファクタリングするために自由を取りました View、したがって、例のレンダラブルにアクセスできます。

真

真のサイジング Famo.us レンダブルにサイズを合わせる方法です」 contents。基本的にそれは持っていることと同等です <div> 高さと幅はありません。レンダラブルは子から直接サイズを取得しないため、ここでは計算は行われません。開発者は、サイズが透過的でない可能性があることを理解する必要があります getSize 使用時の方法 True サイジング。

レンダリング可能なものの実際のサイズを取得する方法はいくつかありますが、コンテキストにレンダリングされる方法とタイミングによって異なります。レンダリング可能なものをデプロイするのに良い時期かもしれません。 real true からのサイズ 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>

未定義

未定義のサイズ設定は、レンダラブルのサイズを次のように指示しますこの場合、サイズは親から参照する必要があります。親が誰であるかわからない場合は、デプロイ後にレンダリング可能な実際のターゲットからいつでもサイズを取得できます。

注意： いつ size は ない 未定義の設定に似ています。

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>

実際の

実際のサイズは自明です。 [100, 100] でレンダリング可能な100ピクセルを作成すると言います width 100ピクセルで 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>

関連する質問

famo.usを使ったバーチャルツアーのパノラマを変えたのですか？ - 変換、パノラマ、famo.us、バーチャルツアー
Famo.us RenderControllerを使用してコンテナスタック、ライフサイクル、famo.usをスタックする
有名な表面のフロントエンドから流星のテンプレートにデータを取得するための推奨される方法は何ですか？ - node.js、meteor、meteorite、famo.us、meteor-blaze
Famo.us/有名な景色を正しくレイアウトするには？ - meteor、famo.us
famo.us Firefoxの設定z-indexが機能しない - javascript、css、firefox、z-index、famo.us
Famo.usポリゴンの衝突のサポート - javascript、polygon、physics-engine、famo.us
Famo.us POSTメソッド - javascript、xmlhttprequest、multipartform-data、famo.us
famo.usの予期しない動作javascript - javascript、famo.us
famo.usのサーフェスに動的コンテンツ（ajax）をロードするにはどうすればよいですか？ - javascript、ajax、famo.us
famo.usで#renderメソッドを使用するタイミング - javascript、famo.us
Famo.usとIonicを使用する - javascript、angularjs、ionic-framework、famo.us
Famo.us表面 - 背景としてのイメージ - イメージ、背景、famo.us
Famo.us - 表面のあるビューを削除する方法 - famo.us
なぜ状態変更子を再利用できないのですか？ - famo.us
famo.usでスティッキースクロールビューを作成する - famo.us
Famo.usプラットフォームの壁のサイズを変更する方法は何ですか？ - famo.us
famo.usに線を引く方法は？ - famo.us
ImageSurfaceのaltタグまたはtitleタグを設定するには？ - famo.us
famo.usのサーフェス選択+角度 - anglejs、famo.us、有名な角度
Famo.usウェブプラットフォームはphonegapをサポートしていますか？ [閉鎖] - アンドロイド、ios、ウェブアプリケーション、cordova、famo.us