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

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属性将圆角添加到矩形中。在此背景下，能否请任何人就我的以下问题提供答复？

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

Answer 1

以编程方式添加圆角矩形很容易。在“测试”文件夹中，可以找到test_shadows.html，它的一行添加了带有圆角的矩形：

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

创建一个具有x、y、宽度、高度和r值的数据对象(否则，它的默认值为0)。

如果您想通过扩展rect来实现它，最简单的方法就是在构造函数中设置值(例如data.r=10)，或者创建一个pointsToData函数来覆盖Rect的版本。要么设置了这个.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呈现之前被调用。