0
두 개의 ImageSurface를 정의했습니다. 하나는 다른 하나의 겹치는 부분입니다. 이제 첫 번째 곡면을 클릭하면 내 이벤트가 등록되지 않습니다. 어떻게 해결할 수 있습니까? Z- 인덱스 속성으로 시도했지만 작동하지 않습니다.Famo.us 겹치는 서페이스 - 이벤트 트리거
편집
나는 참조 자습서를 사용하고 - 음색을 내 시작 지점으로. 내 PageView.js에서 내가 가진 : 당신은 스케일링 ID가 하나라는 것을 기억 0으로 수정 Z 규모 중 하나를 설정하는 것처럼
define(function(require, exports, module) {
var View = require('famous/core/View');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Modifier = require('famous/core/Modifier');
var HeaderFooter = require('famous/views/HeaderFooterLayout');
var ImageSurface = require('famous/surfaces/ImageSurface');
var EventHandler = require('famous/core/EventHandler');
var Transitionable = require('famous/transitions/Transitionable');
var Easing = require('famous/transitions/Easing');
var TransitionableTransform = require("famous/transitions/TransitionableTransform");
var TweenTransition = require('famous/transitions/TweenTransition');
TweenTransition.registerCurve('inElastic', Easing.inElastic);
var SpringTransition = require("famous/transitions/SpringTransition");
console.log(SpringTransition);
function PageView() {
View.apply(this, arguments);
_createBacking.call(this);
_createLayout.call(this);
_createHeader.call(this);
_createBody.call(this);
_createMapPin.call(this);
_createCenterCircle.call(this);
_createCityState.call(this);
_createFb.call(this);
_createTw.call(this);
_setListeners.call(this);
}
PageView.prototype = Object.create(View.prototype);
PageView.prototype.constructor = PageView;
PageView.DEFAULT_OPTIONS = {
headerSize: 80
};
function _createBacking() {
this.add(backing);
var backing = new Surface({
size: [undefined, undefined],
properties: {
backgroundColor: 'black',
boxShadow: '0 0 20px rgba(0,0,0,0.5)'
}
});
this.add(backing);
}
function _createLayout() {
this.layout = new HeaderFooter({
headerSize: this.options.headerSize
});
var layoutModifier = new StateModifier({
transform: Transform.translate(0, 0, 0.1)
});
this.add(layoutModifier).add(this.layout);
}
function _createHeader() {
var backgroundSurface = new Surface({
properties: {
backgroundColor: 'white'
}
});
this.hamburgerSurface = new ImageSurface({
size: [44, 44],
content : 'images/hamburger.png'
});
var backgroundModifier = new StateModifier({
transform : Transform.behind
});
var hamburgerModifier = new StateModifier({
origin: [0, 0.5],
align : [0, 0.5],
transform: Transform.translate(20, 0, 0)
});
this.layout.header.add(backgroundModifier).add(backgroundSurface);
this.layout.header.add(hamburgerModifier).add(this.hamburgerSurface);
}
function _createBody() {
this.bodySurface = new ImageSurface({
properties: {
size:[undefined,undefined],
//backgroundImage: 'url(images/background.png)',
//backgroundRepeat:'no-repeat',
// backgroundSize: 'cover',
border:'0',
backgroundColor: 'red'
},
content:'images/background.png'
});
this.layout.content.add(this.bodySurface);
}
function _createCenterCircle() {
this.centerCircle = new ImageSurface({
size : [200, 200],
content : 'images/center-circle.png',
properties: {
zIndex: 2
},
});
var centerCircleModifier = new StateModifier({
origin: [0.5,0.5],
align:[0.5,0.5],
transform: Transform.scale(0.8,0.8,0)
});
Transitionable.registerMethod('spring', SpringTransition);
var transition = {
method: "spring",
period: 200,
dampingRatio: .1,
velocity: 0
}
this.centerCircle.on("click", function(){
centerCircleModifier.setTransform(Transform.scale(1,1,1));
centerCircleModifier.setTransform(Transform.scale(1.1,1.1,1.1),transition);
}.bind(this));
this.layout.content.add(centerCircleModifier).add(this.centerCircle);
}
function _createMapPin() {
this.mapPin = new ImageSurface({
size : [true, true],
content : 'images/map-pin.png',
properties: {
zIndex: 10
}
});
var mapPinSizeModifier = new StateModifier({
origin: [0.5,0.5],
align:[0.5,0.5],
transform: Transform.scale(0.3,0.3,0)
});
var mapPinPosModifier = new StateModifier({
transform: Transform.translate(-130,-240)
});
this.mapPin.on('click', function() {
console.log("map pin clicked");
}.bind(this));
this.layout.content.add(mapPinSizeModifier).add(mapPinPosModifier).add(this.mapPin);
}
function _createCityState()
{
this.cityState = new ImageSurface({
size : [true, true],
content : 'images/city-state.png',
properties: {
zIndex: 8
}
});
var cityStateModifier = new StateModifier({
origin: [0.5,0.5],
align:[0.5,0.5],
transform: Transform.scale(0.4,0.4,0)
});
var cityStatePosModifier = new StateModifier({
transform: Transform.translate(0,-480)
});
this.layout.content.add(cityStateModifier).add(cityStatePosModifier).add(this.cityState);
}
function _createFb() {
this.fbLogo = new ImageSurface({
size : [true, true],
content : 'images/fb.png',
properties: {
zIndex: 10
}
});
var fbModifier = new StateModifier({
origin: [0.5,0.5],
align:[0.5,0.5],
transform: Transform.scale(0.4,0.4,0)
});
var fbPosModifier = new StateModifier({
transform: Transform.translate(-250,480)
});
this.layout.content.add(fbModifier).add(fbPosModifier).add(this.fbLogo);
}
function _createTw() {
this.twLogo = new ImageSurface({
size : [true, true],
content : 'images/tw.png',
properties: {
zIndex: 10
}
});
var twModifier = new StateModifier({
origin: [0.5,0.5],
align:[0.5,0.5],
transform: Transform.scale(0.4,0.4,0)
});
var twPosModifier = new StateModifier({
transform: Transform.translate(0,480)
});
this.layout.content.add(twModifier).add(twPosModifier).add(this.twLogo);
}
function _setListeners() {
this.hamburgerSurface.on('click', function() {
this._eventOutput.emit('menuToggle');
}.bind(this));
this.bodySurface.pipe(this._eventOutput);
}
module.exports = PageView;
});
당신이 가진 것을 보여줄 수 있습니까? – johntraver
나는 편집 한 질문. – Sysrq147
그래서 클릭하지 않으려는 요소는 무엇입니까? – johntraver