使用默认实例化形状扩展dojo.gfx.Group

我试图用dojo.gfx创建一些简单的UI组件。我已经设法扩展了dojo.gfx.Group，但是我没有深入了解任何绘制到曲面的默认形状。在Firebug中检查渲染的SVG，有一个节点，但没有正确的。使用默认实例化形状扩展dojo.gfx.Group

简化类看起来是这样的：

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; 
    } 
});

而在HTML的JavaScript是这样的：

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);

来源

2009-12-09 droid001

我喜欢简单的隆胸技术。下面是一个脚本标签的内容：

// 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"); 
});

上面的示例假定有一个名为“表面” <div>。

该增强技术适用于任何渲染器，无论其实现如何，并且仅使用已发布的API。

来源

2009-12-12 07:33:23

是的，这确实不错，因为，你说，它只使用发布的gfx API。在创建小型UI库的情况下（原型设计目的），我会放弃使用getBoundingBox和直接矩阵操作等属性来访问属性，这对于自动定位有好处。此外，序列化会更棘手。与此同时，虽然我发现它更有利于使用小部件并让CSS执行定位工作，然后使用gfx在此处演示绘制界面： http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/gfx/演示/ tooltip.html – droid001 2009-12-14 00:44:51

使用默认实例化形状扩展dojo.gfx.Group

回答

相关问题