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

我能够将我的工具添加到工具栏并使用它在画布上绘制矩形。现在，我想将自定义工具创建的矩形自定义为具有圆角，但我不知道如何实现。 我已经检查了 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 中自定义矩形外观的机制是什么 圆角？
2. 在上面的代码片段中，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 的版本。您要么设置 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 渲染之前被调用。