Question

我正在使用dojox.drawing.Drawing来创建一个简单的图表工具。我已经创建了一个自定义工具，通过扩展dojox.drawing.tools.Rect来绘制圆角矩形，如下所示 -

dojo.provide("dojox.drawing.tools.custom.RoundedRect");
dojo.require("dojox.drawing.tools.Rect");

dojox.drawing.tools.custom.RoundedRect = dojox.drawing.util.oo.declare(

        dojox.drawing.tools.Rect,
        function(options){
        },
        {
          customType:"roundedrect"
        }    
);

dojox.drawing.tools.custom.RoundedRect.setup = {
    name:"dojox.drawing.tools.custom.RoundedRect",
    tooltip:"Rounded Rect",
    iconClass:"iconRounded"
};
dojox.drawing.register(dojox.drawing.tools.custom.RoundedRect.setup, "tool");

我能够将我的工具添加到工具栏并使用它在画布上绘制一个rectagle。现在，我想自定义我的自定义工具创建的矩形有圆角，但我无法弄清楚如何。我检查了dojox.drawing.tools.Rect类的源代码以及它的父dojox.drawing.stencil.Rect类，我可以看到在dojox.drawing.stencil.Rect中创建的实际矩形如下 -

_create: function(/*String*/shp, /*StencilData*/d, /*Object*/sty){
        // summary:
        //              Creates a dojox.gfx.shape based on passed arguments.
        //              Can be called many times by implementation to create
        //              multiple shapes in one stencil.
        //
        //console.log("render rect", d)
        //console.log("rect sty:", sty)
        this.remove(this[shp]);
        this[shp] = this.container.createRect(d)
                .setStroke(sty)
                .setFill(sty.fill);

        this._setNodeAtts(this[shp]);
}

在dojox.gfx中，可以通过设置r属性将圆角添加到矩形中。有了这个背景，有人可以提供我以下问题的答案吗？

dojox.drawing用于自定义矩形外观的机制是什么圆角？
在上面的代码片段中，StencilData被传递给createRect调用。自定义此数据的机制是什么？可以在此数据中设置控制圆角的矩形的r属性吗？

Answer 1

以编程方式添加圆角矩形很容易。在tests文件夹中，你会找到test_shadows.html，它有一行添加一个带圆角的矩形：

myDrawing.addStencil("rect", {data:{x:50, y:175, width:100, height:50, r:10}});

使用x，y，width，height和r的值创建数据对象（否则默认为0）。

如果你想通过扩展rect来实现它，最简单的方法就是在构造函数中设置值（例如data.r = 10），或者你可以创建一个pointsToData函数来覆盖Rect的版本。您可以设置this.data.r的值，也可以设置默认值：

pointsToData: function(/*Array*/p){
        // summary:
        //      Converts points to data
        p = p || this.points;
        var s = p[0];
        var e = p[2];
        this.data = {
            x: s.x,
            y: s.y,
            width: e.x-s.x,
            height: e.y-s.y,
            r:this.data.r || 10
        };
        return this.data;

    },

在该示例中，我将r值10作为默认值，而不是之前的0。这是有效的，因为每次模板用于绘制矩形时，它会将画布x，y点（所有模板记住它们的点）转换为数据（gfx用于绘制）。换句话说，在rect渲染之前总会调用此函数。

dojox.drawing.Drawing - 用于创建带圆角的矩形的自定义工具

1 个答案: