Oop 使用默认实例形状扩展dojo.gfx.Group
我正在尝试使用dojo.gfx创建一些简单的UI组件。我已经成功地扩展了dojo.gfx.Group,但是我无法在曲面上绘制任何默认形状。在Firebug中检查呈现的SVG时,正确地说有一个节点,但没有rect 简化类如下所示:Oop 使用默认实例形状扩展dojo.gfx.Group,oop,dojo,dojox.gfx,Oop,Dojo,Dojox.gfx,我正在尝试使用dojo.gfx创建一些简单的UI组件。我已经成功地扩展了dojo.gfx.Group,但是我无法在曲面上绘制任何默认形状。在Firebug中检查呈现的SVG时,正确地说有一个节点,但没有rect 简化类如下所示: dojo.provide("gfxui.SimpleButton"); dojo.require("dojox.gfx.shape");//-¿ needed? dojo.require("dojox.gfx.svg"); dojo.require("dojox.gf
dojo.provide("gfxui.SimpleButton");
dojo.require("dojox.gfx.shape");//-¿ needed?
dojo.require("dojox.gfx.svg");
dojo.require("dojox.gfx._base");
dojo.declare("gfxui.SimpleButton", dojox.gfx.Group, {
constructor: function(){
this.draw();
},
draw:function(){
var bg = this.createRect(this.rect_props);
//var bg = this.createObject(dojox.gfx.Rect);
}
}
gfxui.SimpleButton.nodeType = dojox.gfx.Group.nodeType;
dojo.extend(dojox.gfx.Surface, {
createButton: function(){
var button = this.createObject(gfxui.SimpleButton, null, true);
this.add(button);
return button;
}
});
dojo.require("dojox.gfx");
dojo.require("gfxui.SimpleButton");
function init(){
var g = dojox.gfx;
var surface = dojox.gfx.createSurface(dojo.byId("gfx_holder"), 800, 280, "#eee");
var button = container.createButton();
};
dojo.addOnLoad(init);
HTML中的javascript如下所示:
dojo.provide("gfxui.SimpleButton");
dojo.require("dojox.gfx.shape");//-¿ needed?
dojo.require("dojox.gfx.svg");
dojo.require("dojox.gfx._base");
dojo.declare("gfxui.SimpleButton", dojox.gfx.Group, {
constructor: function(){
this.draw();
},
draw:function(){
var bg = this.createRect(this.rect_props);
//var bg = this.createObject(dojox.gfx.Rect);
}
}
gfxui.SimpleButton.nodeType = dojox.gfx.Group.nodeType;
dojo.extend(dojox.gfx.Surface, {
createButton: function(){
var button = this.createObject(gfxui.SimpleButton, null, true);
this.add(button);
return button;
}
});
dojo.require("dojox.gfx");
dojo.require("gfxui.SimpleButton");
function init(){
var g = dojox.gfx;
var surface = dojox.gfx.createSurface(dojo.byId("gfx_holder"), 800, 280, "#eee");
var button = container.createButton();
};
dojo.addOnLoad(init);
我更喜欢简单的增强技术。下面是脚本标记的内容:
// let's include gfx (renderer will be selected dynamically)
dojo.require("dojox.gfx");
// useful short names
var d = dojo, g = dojox.gfx;
// our creator function
function createButton(color){
// let's create our main shape: group
var group = this.createGroup();
// add custom properties, if any
group._rect = group.createRect().
setShape({x: 5, y: 5, width: 100, height: 30}).
setStroke("black").
setFill(color);
return group;
}
// we want it to be available on groups and surfaces
d.extend(g.Surface, {createButton: createButton});
d.extend(g.Group, {createButton: createButton});
// let's test the result
dojo.addOnLoad(function(){
var s = g.createSurface(dojo.byId("surface"), 500, 400),
b = s.createButton("red");
});
上面的示例假设存在一个名为“曲面”的
增强技术适用于任何渲染器,无论其实现如何,并且只使用已发布的API。是的,这确实很好,正如您所说,它只使用已发布的gfx API。在创建一个小的UI库的背景下(原型设计的目的),我会放弃访问属性,比如getBoundingBox和直接矩阵操作,这将有助于进行自动定位。此外,序列化将更加棘手。与此同时,尽管我发现使用小部件并让CSS进行定位工作更为有益,但我还是用gfx绘制了界面,如下所示: