我已经定义了两个ImageSurface-s，一个只是重叠了一个。现在当我点击第一个表面时，我的活动没有注册。我怎么解决这个问题。我尝试使用z-index属性，但它不会工作。
修改
我正在使用参考教程 - Timbre作为我的起点。在我的PageView.js中，我有：
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;
});
答案 0 :(得分：2)
看起来你将你的一个修饰符Z scale设置为0.请记住缩放标识是1，所以如果Z的刻度为0，则表面基本上不存在。
以下是我需要更改以使centerCircle可点击的内容..
var centerCircleModifier = new StateModifier({
origin: [0.5,0.5],
align:[0.5,0.5],
transform: Transform.scale(0.8,0.8,1) // <- Transform scale Z from 0 to 1
});
Geed Luck！
答案 1 :(得分：0)
this.hamburgerSurface = new ImageSurface(
{
size: [44, 44],
`enter code here`content : 'images/hamburger.png'
});
hamburgerSurface应该是var的类型。因为这是指当前对象但类型未定义。