AFrame扩展组件和覆盖 [英] AFrame extend component and override

问题描述

我正在尝试扩展a-animation组件，但要覆盖某些功能。

I am trying to extend the a-animation component but override some functionality.

我想向父级 el添加状态属性，并且仅当父级认为该状态将由mouseenter事件实际触发动画。

I want to add a state attribute to the parent "el", and only if the parent has that state will a mouseenter event actually trigger the animation.

我希望我不需要重写或要求执行Pull请求来简化此附加操作那样的功能会减慢我的测试速度和可用性，但是我希望能够使用主代码而只能使用添加或覆盖功能。

I am hoping I don't need to re-write or require a Pull request to facilitate this additional functionality as that will slow down testing and usability for me, but I would like to be able to use the main code and only "add or override" functionality.

推荐答案

我来这里的目的是寻找相同的答案如何扩展组件。我想为外观控件写一些自定义逻辑

I came here looking for the same answer, "How to extend a component". I wanted to write some custom logic for the look-controls component, so I'll share what I learned about extending components.

首先，我建议对组件进行 copy 避免损坏原始组件（以防万一您在其他地方使用它）。我正在使用Angular，因此对于深拷贝，但您可以随意使用。 （看起来A-Frame有一些实用程序可以执行此操作，但是没有有关如何使用它们的文档： AFRAME.utils.extend ， AFRAME.utils.extendDeep ）。

First of all, I would recommend doing a copy on the component to avoid doing any damage to the original component (just in case you are using it elsewhere). I am using Angular, so I have a nice utility for a deep copy, but you can use whatever you like. (It looks like A-Frame has some utilities that might do this, but there are no docs as to how to use them: AFRAME.utils.extend, AFRAME.utils.extendDeep). Copying is up to you.

无论如何，这是您可以扩展现有组件的方法：

Anyways, here is how you can extend an existing component:

// Get a copy of the original component.
var customLookControls = angular.copy(AFRAME.components['look-controls']),
    customLookControlsComponent = customLookControls.Component;

// Add your custom logic to component.
customLookControlsComponent.prototype.myNewMethod = function() { // Something awesome. };

这是注册的方式：

AFRAME.registerComponent('custom-look-controls', customLookControls);

最后，这是使用的方法：

<a-entity custom-look-controls></a-entity>

---

更新

在本地，我发现在现有组件的基础上创建新组件并没有达到我期望的方式。因此，以一种简单得多的方式，我发现扩展现有组件非常容易：

Locally I found that creating a new component based off of an existing one, was not working the way I had expected it to. So, in a much simpler way, I found it is pretty easy to extend an existing component:

// Get a reference to the component we want to extend.
var lookControls = AFRAME.components['look-controls'],
    lookControlsComponent = lookControls.Component;


/**
 * Overrides the Touch event handler...
 * @param {!Event} e The touch event object.
 */
lookControlsComponent.prototype.onTouchMove = function(e) {
  // Replace the TouchMove event handler...
};

/**
 * New/custom method...
 */
lookControlsComponent.prototype.somethingNew = function() {
  // My awesome logic here.
};

这篇关于AFrame扩展组件和覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！