在我的组件的keydown事件处理程序中,我需要通过this修改组件的一个属性:
canvasKeyHandler (event) {
console.log('vrscene.canvasKeyHandler: event.keyCode=' + event.keyCode);
console.log('vrscene.canvasKeyHandler: self.dolly' + this.dolly);
CameraKeypressEvents.keyHandler(event, this.dolly) // <-- do something with this.dolly
但是this.dolly
被设置为undefined
:
vrscene.canvasKeyHandler: self.dollyundefined
vrscene.html:
<div class="container" id ="canvas-container-2">
<canvas id="vrruntime-view"
class="camera-keypress-events"
tabindex="1"
(keydown)="canvasKeyHandler($event)"
style="border: 1px solid black;"
>
</canvas>
<!--camera-keypress-events [cubeScene]="cubeScene" -->
</div>
vrscene.ts:
import {Component} from 'angular2/core';
import {Injectable} from 'angular2/core';
import WebGLRenderer = THREE.WebGLRenderer;
import {VRRenderer} from '../vrrenderer/vrrenderer'
import {CameraKeypressEvents} from '../camera-keypress-events/camera-keypress-events'
import Object3D = THREE.Object3D;
import Scene = THREE.Scene;
import PerspectiveCamera = THREE.PerspectiveCamera;
import Mesh = THREE.Mesh;
import VRControls = THREE.VRControls;
import VREffect = THREE.VREffect;
@Component ({
selector: 'vrscene',
templateUrl: 'app//vrscene/vrscene.html',
})
@Injectable()
export class VRScene {
private _scene: Scene;
camera: PerspectiveCamera;
dolly: Object3D;
vrControls: VRControls;
vrEffect: VREffect;
webVrManager;
sphere: Mesh;
cube: Mesh;
BaseRotation = new THREE.Quaternion();
constructor() {}
//initScene(width: number, height: number, renderer: VRRenderer) {
init(width: number, height: number, vrRenderer: VRRenderer) {
console.log('VRScene.init: entered')
this.scene = new THREE.Scene;
this.camera = new THREE.PerspectiveCamera(75, width / height);
this.camera.position.set(0, 1.5, 100);
this.dolly = new THREE.Object3D();
this.dolly.position.z = 50;
this.scene.add(this.dolly);
//
this.dolly.add(this.camera);
this.vrControls = new THREE.VRControls(this.camera);
this.vrEffect = new THREE.VREffect(vrRenderer.renderer);
this.vrEffect.setSize(width, height);
this.webVrManager = new (<any>window).WebVRManager(vrRenderer.renderer, this.vrEffect);
console.log('VRScene.init: this.webVrManager=' + this.webVrManager);
this.camera.quaternion.copy(this.BaseRotation);
var geometry = new THREE.BoxGeometry(25, 25, 25);
var meshParms = new Object();
meshParms['color'] = 0xff8000;
var material = new THREE.MeshBasicMaterial(meshParms);
//material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
this.cube = new THREE.Mesh(geometry, material);
this.scene.add(this.cube);
// draw!
vrRenderer.canvas.focus();
//CubeOnPlaneScene.prototype.mainLoop.bind(this)
// bind the 'this' of the canvasKeyHandler to the definition-time 'this'
//VRScene.prototype.canvasKeyHandler.bind(this)
}
canvasKeyHandler (event, dolly) {
console.log('vrscene.canvasKeyHandler: event.keyCode=' + event.keyCode);
//console.log('vrscene.canvasKeyHandler: this.dolly' + this.dolly);
//console.log('vrscene.
canvasKeyHandler: self.dolly' + this.dolly);
console.log('vrscene.canvasKeyHandler: dolly' + dolly);
//CameraKeypressEvents.keyHandler(event, this.dolly)
//CameraKeypressEvents.keyHandler(event, VRScene.prototype.canvasKeyHandler)
CameraKeypressEvents.keyHandler(event, dolly)
}
doIt() : string {
return 'hello from VRScene'
}
// getters and setters
get scene():Scene {
return this._scene;
}
set scene(scene: Scene) {
if (scene === undefined) throw 'Please supply a scene';
this._scene = scene;
}
}
按键处理程序:
import {Directive} from 'angular2/core';
import {CubeScene} from '../cube-scene/cube-scene';
import Object3D = THREE.Object3D;
import Vector3 = THREE.Vector3;
import {Base} from '../base/base';
import Quaternion = THREE.Quaternion;
@Directive({
selector: '[camera-keypress-events]',
providers: [],
//host: {},
host: {
'(keypress)' : 'onKeypress($event)'
},
})
export class CameraKeypressEvents {
constructor() {}
static CAMERA_MOVE_DELTA = 1.2;
static CAMERA_ROT_DELTA = 5;
static keyHandler (event, dolly: Object3D) {
console.log('CameraKeypressEvents.keyHandler: event.keyCode=' + event.keyCode)
console.log('CameraKeypressEvents.keyHandler: dolly=' + dolly)
switch( event.keyCode) {
case 'S'.charCodeAt(0):
console.log('you pressed s');
//dolly.position.z += CAMERA_MOVE_DELTA;
dolly.translateZ(this.CAMERA_MOVE_DELTA);
console.log('dolly.postion.x=' + dolly.position.x);
break;
case 'W'.charCodeAt(0):
//console.log('you pressed s');
//this.dolly.position.z -= this.CAMERA_MOVE_DELTA;
dolly.translateZ(-this.CAMERA_MOVE_DELTA);
//console.log('this.do-ly.postion.x=' + this.dolly.position.x);
break;
case 'A'.charCodeAt(0):
//this.dolly.position.x -= this.CAMERA_MOVE_DELTA;
dolly.translateX(-this.CAMERA_MOVE_DELTA);
break;
case 'D'.charCodeAt(0):
//console.log('you pressed s');
//this.dolly.position.x += this.CAMERA_MOVE_DELTA;
dolly.translateX(this.CAMERA_MOVE_DELTA);
//console.log('this.dolly.postion.x=' + this.dolly.position.x);
break;
case 'N'.charCodeAt(0):
//this.dolly.position.y -= this.CAMERA_MOVE_DELTA;
dolly.translateY(-this.CAMERA_MOVE_DELTA);
break;
case 'P'.charCodeAt(0):
//console.log('you pressed s');
//this.dolly.position.y += this.CAMERA_MOVE_DELTA;
//console.log('this.dolly.postion.x=' + this.dolly.position.x);
dolly.translateY(this.CAMERA_MOVE_DELTA);
break;
case 'Q'.charCodeAt(0):
var tmpQuat = (new THREE.Quaternion()).setFromAxisAngle( new THREE.Vector3(0,1,0), Base.ONE_DEG * this.CAMERA_ROT_DELTA);
dolly.quaternion.multiply(tmpQuat);
break;
case 'E'.charCodeAt(0):
var tmpQuat = (new THREE.Quaternion()).setFromAxisAngle( new THREE.Vector3(0,1,0), Base.ONE_DEG * -this.CAMERA_ROT_DELTA);
dolly.quaternion.multiply(tmpQuat);
break;
};
}
onKeypress (event, cubeScene) {
console.log('CameraKeypressEvents.onKeypress: event.keyCode=' + event.keyCode)
//event.preventDefault();
console.log('vtClass.canvasKeyhandler: cubeScene=' + cubeScene);
console.log(event, event.keyCode, event.keyIdentifier);
/*
*/
}
}
我应该怎么做才能:
A)在keyhandler调用中传递实例?
我尝试过:
(keydown)="canvasKeyHandler($event,{{dolly}})"
B) 将canvasKeyHandler
方法绑定到编译时的this
?
我尝试过:
// bind the callback 'this' of the canvasKeyHandler to the definition-time 'this'
VRScene.prototype.canvasKeyHandler.bind(this)
并且
canvasKeyHandler (event) {
...
}.bind(this)
非常抱歉,如果这是一个显而易见的问题,但我正在学习Angular 2框架,并且在这一点上有些不知所措。我是否需要使用@Input?
非常感谢。
@Injectable()
(@Injectable
仅在具有依赖关系的服务中需要)。在StackOverflow上发布“代码墙”通常会对您不利。人们通常不会花时间阅读它,无论是那些可以帮助您的人,还是未来遇到类似问题的读者。创建一个最小化的plunker,只显示出问题所在。例如,删除所有这些case语句 - 只显示一个,如果真的需要来演示问题。也许对您来说,将所有内容粘贴可能更容易,但正如我所说,您将得到较少的帮助。 - Mark Rajcok