Fixjs——显示基类DisplayObject

<sdt id="89512093" sdtgroup="t" contentlocked="t" sdtlocked="t"></sdt>

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报表设计、展现、打印、导出等功能集，集成简单。