zoukankan      html  css  js  c++  java
  • AlloyRenderingEngine继承

    写在前面

    不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine
    然后star一下,多谢支持:)。

    前几天发了篇向ES6靠齐的Class.js,当初jr为什么不把父类的实例暴露给子类,其原因还是为了延续原型继承的习惯,子类重写就会覆盖掉父类的方法,父类的方法就会丢,如下面的代码,就堆栈溢出了:

    var Parent = function () {
    }
    Parent.prototype.a = function () {
    }
    var Child = function () {
    }
    Child.prototype = new Parent();
    Child.prototype.a = function () {
        this.a();
    }
    var child = new Child();
    child.a();

    而jr的Class.js可以让你通过this._super访问父类同类方法,修复了原型继承同名无法访问父类的弱点,当然也可以hack一下,先赋给变量或者某个属性。如:

    var Parent = function () {
    }
    Parent.prototype.a = function () {
        alert(1)
    }
    var Child = function () {
    }
    Child.prototype = new Parent();
    Child.prototype.parentA = Child.prototype.a;
    Child.prototype.a = function () {
        this.parentA();
    }
    var child = new Child();
    child.a();

    但是这样的话,代码不就很丑陋了吗!?
    所以AlloyRenderingEngine选择使用了JR的Class.js,然后在其基础之上扩展了静态方法和属性,以及静态构造函数

    所以就变成了这样:

    var Person = Class.extend({
      statics:{
       //静态构造函数会直接被Class.js执行
       ctor:function(){
          //这里的this相当于Person
       },
       Version:"1.0.0",
       GetVersion:function(){
         return Person.Version;
       }
      },
      ctor: function(isDancing){
        this.dancing = isDancing;
      },
      dance: function(){
        return this.dancing;
      }
    });
    var Ninja = Person.extend({
      ctor: function(){
        this._super( false );
      },
      dance: function(){
        // Call the inherited version of dance()
        return this._super();
      },
      swingSword: function(){
        return true;
      }
    });

    AlloyRenderingEngine继承

    AlloyRenderingEngine内置了Container对象,用来管理元素,Stage对象也是继承自Container对象,
    还有,Container对象继承自DisplayObject,所以Container对象也能够设置scale、x、y、alpha、rotation、compositeOperation…等,设置的属性能够叠加到子元素上。

    x、y、rotation、scaleX、scaleY、skewX、skewY…等直接矩阵叠加,也就是子元素的呈现跟父容器、父容器的父容器、父容器的父容器的父容器…都有关系;
    其实alpha是乘法叠加(如:容器的透明度是0.5,容器内部的元素透明度为0.9,最后容器内部元素呈现的透明度就是0.45);;
    compositeOperation先查找自己,自己没定义,再向上查找,直到找到定义了compositeOperation的,就使用该compositeOperation,有点类似决定定位元素找父容器的感觉。
    很多情况下,我们需要继承Container对象来封装一些自定义的对象。
    比如封装一个按钮:

    var Button = Container.extend({
        ctor: function (image) {
            this._super();
            this.bitmap = new Bitmap(image);
            this.bitmap.originX = this.bitmap.originY = 0.5;
            this.add(this.bitmap);
            //鼠标指针的形状
            this.cursor = "pointer";
            this._bindEvent();
        },
        _bindEvent: function () {
            this.onHover(function () {
                this.scale = 1.1;
            }, function () {
                this.scale = 1.0;
            })
            this.onMouseDown(function () {
                this.scale = 0.9;
            })
            this.onMouseUp(function () {
                this.scale = 1.1;
            })
        }
    });

    使用这个button就很方便了:

    var  stage = new Stage("#ourCanvas");
    var button = new Button("button.png");
    button.x = 100;
    button.y = 100;
    button.onClick(function () {
        console.log("你点击我了");
    })
    stage.add(button);

    简单吧!

    在线演示

    地址

    Class.js:https://github.com/AlloyTeam/AlloyGameEngine/blob/master/src/are/base.js
    AlloyGameEngine:https://github.com/AlloyTeam/AlloyGameEngine

  • 相关阅读:
    Android 2.2 r1 API 中文文档系列(11) —— RadioButton
    Android API 中文 (15) —— GridView
    Android 中文 API (16) —— AnalogClock
    Android2.2 API 中文文档系列(7) —— ImageButton
    Android2.2 API 中文文档系列(6) —— ImageView
    Android 2.2 r1 API 中文文档系列(12) —— Button
    Android2.2 API 中文文档系列(8) —— QuickContactBadge
    [Android1.5]TextView跑马灯效果
    [Android1.5]ActivityManager: [1] Killed am start n
    Android API 中文(14) —— ViewStub
  • 原文地址:https://www.cnblogs.com/iamzhanglei/p/4463031.html
Copyright © 2011-2022 走看看