Fixjs——显示基类DisplayObject

Fixjs介绍

Fixjs是我打算在javascript技术领域开始积累的一个框架项目，这套框架主要为开发复杂组件提供底层的框架支持。

框架的类与接口我会尽量参考flash框架的实现。同时，我也会开放Fixjs的源代码，欢迎同仁一起学习、交流。

 

DisplayObject

在flash中，DisplayObject是最基础的显示基类，它定义了布局的基本属性和方法，在组件开发领域，绝对定位布局是非常重要的。

我引入了jQuery进行DOM元素的操作，能够简化代码又能够解决浏览器的兼容问题，以下是Fixjs中DisplayObject的构造函数。

   init: function (ele) {

        fixjs.display.DisplayObject.base.init.call(this, this);

        this.ele = ele;

        this.ele.fixjsObj = this;

        $(this.ele).css({ "padding": "0", "margin":"0", "border":"0", "width":"0", "height":"0",

           "position":"absolute", "top": "0","left": "0","overflow": "visible"

        });

        this.stage = null; //to do...

        this.parent = null; //to do...

        this.name = null;

        this.x = 0;

        this.y = 0;

        this.width = 0;

        this.height = 0;

        this.visible = true;

        this.alpha = 1;

   }

通过外部传入DOM节点ele，在DisplayObject内部进行封装，Displayobject通过ele能够访问DOM节点，DOM节点通过ele的fixjsObj属性又能够访问DisplayObject。

        this.ele = ele;

        this.ele.fixjsObj = this;

然后定义了x,y,width,height等重要的布局属性，属性的读取好办直接访问即可。但是设置属性则复杂些，要用function来实现属性设置。

   setX: function (val) {

        if (this.x == val)

           return false;

        this.x = val;

        $(this.ele).css("left", val + "px");

        return true;

   }

上述代码是常见的属性处理，先判断属性值与新值是否相等，然后才赋值，许多场合还需要派发属性改变的事件、执行更多操作等。

DisplayObject要支持事件派发，所以，它继承于EventDispatcher，以下是DisplayObject的完整实现。

fixjs.display.DisplayObject = fixjs.events.EventDispatcher.extend({

   init: function (ele) {

        fixjs.display.DisplayObject.base.init.call(this, this);

        this.ele = ele;

        this.ele.fixjsObj = this;

        $(this.ele).css({ "padding": "0", "margin":"0", "border":"0", "width":"0", "height":"0",

           "position":"absolute", "top": "0","left": "0","overflow": "visible"

        });

        this.stage = null; //to do...

        this.parent = null; //to do...

        this.name = null;

        this.x = 0;

        this.y = 0;

        this.width = 0;

        this.height = 0;

        this.visible = true;

        this.alpha = 1;

    },

   disposing: function() {

        this.ele.fixjsObj = null;

        this.ele = null;

        fixjs.display.DisplayObject.base.disposing.call(this);

   },

   clone: function() {

        throw new Error("[fixjs.display.DisplayObject.clone] is not implements!");

   },

   getStyle: function (name) {

        return $(this.ele).css(name);

   },

   setStyle: function (name, val) {

        return $(this.ele).css(name, val);

   },

   setStyles: function (obj) {

        return $(this.ele).css(obj);

   },

   setX: function (val) {

        if (this.x == val)

           return false;

        this.x = val;

        $(this.ele).css("left", val + "px");

        return true;

   },

   setY: function (val) {

        if (this.y == val)

           return false;

        this.y = val;

        $(this.ele).css("top", val + "px");

        return true;

   },

   move: function(x, y) {

        this.setX(x);

        this.setY(y);

   },

   setWidth: function (val) {

        if (this.width == val)

           return false;

        this.width = val;

        $(this.ele).css("width", val + "px");

        return true;

   },

   setHeight: function (val) {

        if (this.height == val)

           return false;

        this.height = val;

        $(this.ele).css("height", val + "px");

        return true;

   },

   resize: function(x, y) {

        this.setWidth(x);

        this.setHeight(y);

   },

   setAlpha: function (val) {

        if (this.alpha == val)

           return false;

        this.alpha = val;

        $(this.ele).css("opacity", val);

        return true;

   },

   setVisible: function (val) {

        if (this.visible == val)

           return false;

        this.visible = val;

 

        if (val)

           $(this.ele).css("visibility","visible");

        else

           $(this.ele).css("visibility","hidden");

        return true;

   },

   hitTestPoint: function (x, y) {

        var r = this.x + this.width;

        var b = this.y + this.height;

        return this.x <= x && x <= r &&this.y <= y&& y <= b;

   },

   hitTestObject: function (obj) {

        var x1 = this.x;

        var y1 = this.y;

        var w1 = this.width;

        var h1 = this.height;

        var x2 = obj.x;

        var y2 = obj.y;

        var w2 = obj.width;

        var h2 = obj.height;

        var minX = x1 > x2 ? x1 : x2;

        var minY = y1 > y2 ? y1 : y2;

        var maxX = (x1 + w1) > (x2 + w2) ? (x2+ w2) : (x1 + w1);

        var maxY = (y1 + h1) > (y2 + h2) ? (y2 + h2) : (y1 + h1);

        return minX<= maxX && minY<= maxY;

   },

   localToGlobal: function (point) {

        var p = $(this.ele).offset();

        return new fixjs.geom.Point(p.left + point.x, p.top + point.y);

   },

   globalToLocal: function (point) {

        var p = $(this.ele).offset();

        return new fixjs.geom.Point(point.x - p.left, point.y - p.top);

   }

});

 

 

 

相关文章

Fixjs专栏

 

作者推荐

MyReport：一款非常实用的报表引擎插件，提供Web报表设计、展现、打印、导出等功能集，集成简单。